JavaScriptで、ObjectとObjectが同じ値かどうかの比較・判定方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで、ObjectとObjectが同じ値かどうかの比較・判定方法について解説していきます。

1 JavaScriptで、ObjectとObjectが同じ値かどうかの比較・判定方法
- 1.1 再起的に JavaScriptのObjectやArrayの中身の値が、同じものかチェックする関数
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

JavaScriptで、ObjectとObjectが同じ値かどうかの比較・判定方法

JavaScriptで、ObjectとObjectが同じ値かどうかの比較・判定するのは、中々に困難です。

次の SampleCodeを consoleで、実行してみてください。

const obj1 = { id: 1, val: "Gunmar" };

const obj2 = { id: 1, val: "Gunmar" };

// 1. 代入による 参照Copyと、その判定結果
const copyRefObj1 = obj1;
const result0 = obj1 === copyRefObj1;
console.log("copyRefObj1", copyRefObj1); // copyRefObj1 {id: 1, val: 'Gunmar'}
console.log("result0", result0); // result0 true

// 2. 中身の「key: value」は、同じ値だが、定義しているメモリが違うため、別の値と判定される
const result1 = obj1 === obj2;
console.log("result1", result1); // result1 false

// 3. DeepCopy なので、別の値と判定される
const copyObj1 = JSON.parse(JSON.stringify(obj1));
const result2 = obj1 === copyObj1;
console.log("copyObj1", copyObj1); // copyObj1 {id: 1, val: 'Gunmar'}
console.log("result2", result2); // result2 false

// 4. スプレッド構文でも、別の値と判定される
const obj3 = { id: 2, val: "Saitamar" };
const copyObj3 = { ...obj3 };
const result3 = obj3 === copyObj3;
console.log("copyObj3", copyObj3); // copyObj3 {id: 2, val: 'Saitamar'}
console.log("result3", result3); // result3 false

実行結果は、次のとおりです。

代入によるメモリの参照Copyが、trueというような判定になってしまうため、

Objectや Array の中身の値が、同じかどうかを上記のような方法で、判定することはできません。

そこで、必要になるのが、再起的に Object の中身の値が、同じものかチェックする関数です。

再起的に JavaScriptのObjectやArrayの中身の値が、同じものかチェックする関数

先述の問題を解決するために、再起的に JavaScriptのObjectやArrayの中身の値が、同じものかチェックする関数を作成しました。

SampleCodeは、次のとおりです。

const obj1 = { id: 1, val: "Gunmar" };

const obj2 = { id: 1, val: "Gunmar" };

const obj3 = { id: 2, val: "Saitamar" };

const arr1 = [
  { id: 1, val: "Gunmar" },
  { id: 2, val: "Saitamar" },
];
const arr2 = [
  { id: 1, val: "Gunmar" },
  { id: 2, val: "Saitamar" },
];
const arr3 = [
  { id: 1, val: "Gunmar" },
  { id: 3, val: "Tokyo" },
];

/**
 * deepEqual => 再起的に、JavaScriptの変数の値が、同じものかを Checkする Func
 */
function deepEqual(obj1, obj2) {
  // 両方がオブジェクトであるかどうかをチェック
  if (obj1 && obj2 && typeof obj1 === "object" && typeof obj2 === "object") {
    // オブジェクトのkeyを比較
    const keys1 = Object.keys(obj1);
    const keys2 = Object.keys(obj2);
    if (keys1.length !== keys2.length) {
      return false;
    }
    // keyが同じ場合は、再帰的に値を比較
    for (const key of keys1) {
      if (!keys2.includes(key) || !this.deepEqual(obj1[key], obj2[key])) {
        return false;
      }
    }
    return true;
  } else {
    // オブジェクトでない場合、単純に値を比較
    return obj1 === obj2;
  }
}

console.group("DeepEqual_Object");
console.log(deepEqual(obj1, obj2)); // true
console.log(deepEqual(obj1, obj3)); // false
console.groupEnd();

console.group("DeepEqual_Array");
console.log(deepEqual(arr1, arr2)); // true
console.log(deepEqual(arr1, arr3)); // false
console.groupEnd();

上記、SampleCodeの実行結果は、次のとおりです。

ちゃんと、ObjectでもArrayでも中身のDataを比較Checkして、値が同じであることを確認しています。