JavaScriptのオブジェクトを比較する方法を完全ガイド！深い比較と浅い比較の違いを理解しよう
生徒
「JavaScriptでオブジェクト同士が同じかどうかを確認するには、どうしたらいいですか？」
先生
「JavaScriptでは、オブジェクトを比較する方法にいくつかの種類があります。浅い比較と深い比較という考え方があります。」
生徒
「浅いとか深いってどういう意味なんですか？」
先生
「それでは、浅い比較と深い比較の違いについて、具体的な例を交えて説明していきましょう。」
1. JavaScriptのオブジェクトとは？
まず最初に、JavaScriptの「オブジェクト」について簡単におさらいしましょう。オブジェクトとは、データをキーと値のセットで管理するための仕組みです。人間で言えば「名前＝山田、年齢＝30歳」といった情報をひとまとめにできます。
2. オブジェクトの浅い比較とは？
浅い比較とは、オブジェクトの参照（ポインタ）が同じかどうかを確認する方法です。中身のデータが同じでも、別々に作ったオブジェクトは"違う"と判断されます。
下記は浅い比較の例です。
const obj1 = { name: "Taro" };
const obj2 = { name: "Taro" };
console.log(obj1 === obj2); // false
const obj3 = obj1;
console.log(obj1 === obj3); // true
1つ目の比較では、中身が同じでも、obj1とobj2は別々のオブジェクトなので「false」になります。2つ目の比較では、obj3はobj1と同じ場所を指しているので「true」になります。
3. オブジェクトの深い比較とは？
深い比較とは、オブジェクトの中身の値がすべて同じかどうかをチェックする方法です。JavaScriptには標準でこの機能はないため、自分で関数を書くか、ライブラリを使います。
以下は、簡単な深い比較関数の例です。
function isEqual(a, b) {
const aKeys = Object.keys(a);
const bKeys = Object.keys(b);
if (aKeys.length !== bKeys.length) return false;
for (let key of aKeys) {
if (a[key] !== b[key]) return false;
}
return true;
}
const obj1 = { name: "Taro", age: 20 };
const obj2 = { name: "Taro", age: 20 };
console.log(isEqual(obj1, obj2)); // true
この関数は、キーの数と値を1つずつ比べて同じかどうかを判定します。深い比較を行いたいときにはこのような方法が必要になります。
4. JSON.stringifyを使った簡易的な深い比較
簡単に深い比較を行いたいときは、JSON.stringify()を使う方法もあります。オブジェクトを文字列に変換して、それを比較するのです。
const obj1 = { name: "Taro", age: 20 };
const obj2 = { name: "Taro", age: 20 };
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
この方法は手軽ですが、キーの順番が違う場合はfalseになりますので、注意が必要です。
5. オブジェクトの比較を使う場面とは？
オブジェクトの比較は、次のような場面でよく使われます。
- 画面に表示する情報が変わったか確認するとき
- フォームの入力内容が変更されたかをチェックしたいとき
- ゲームやアプリの状態を監視したいとき
初心者の方は、まずは「浅い比較は同じ場所を見ているか」「深い比較は中身まで見る」という考え方をしっかり覚えておくとよいでしょう。
