【JavaScript】オブジェクト比較の落とし穴とは？比較演算子とJSON.stringify()の違いを解説

JavaScriptでオブジェクト同士を比較する際、「中身が同じなのに等しくない判定になる」という問題に直面したことはありませんか？これは、比較演算子（== や ===）がオブジェクトの「値」ではなく「参照（メモリ上のアドレス）」を比較するために起こる現象です。

本記事では、以下のような2つのオブジェクトを例に、比較演算子を使った場合と JSON.stringify() を使った場合の違いを具体的に見ていきます。

var object1 = { firstName: "David" };
var object2 = { firstName: "David" };

なぜ比較演算子では正しい結果が得られないのか

JavaScriptにおいて、== や === を使ってオブジェクトを比較すると、プロパティの中身ではなく、それぞれの変数が参照しているメモリ上の場所が同じかどうかが判定されます。上記の例では、object1 と object2 は内容が同じでも別々のオブジェクトとして生成されているため、参照先が異なり、比較結果は必ず false になります。

そこで、オブジェクトを文字列に変換してから比較する JSON.stringify() を活用します。このメソッドを使えば、オブジェクトの内容を表す文字列同士の比較になるため、期待通りの結果が得られます。

サンプルコード

以下は、両方の方法を実装し、その違いを確認できるコード例です。

var object1 = { firstName: "David" };
var object2 = { firstName: "David" };

if (object1 == object2)
    console.log("using == operator result ==> true");
else
    console.log("using == operator result ==> false");

if (JSON.stringify(object1) == JSON.stringify(object2))
    console.log("using JSON.stringify() result ==> true");
else
    console.log("using JSON.stringify() result ==> false");

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で以下のコマンドを使用します。

node fileName.js

ここでは、ファイル名を「demo224.js」としています。

実行結果

実行すると、コンソールには次のように出力されます。

PS C:\Users\Amit\JavaScript-code> node demo224.js
using == operator result ==> false
using JSON.stringify() result ==> true

このように、== 演算子による比較では false となり、JSON.stringify() を使った比較では true となることが確認できます。

JSON.stringify() を使う際の注意点

JSON.stringify() は手軽で便利な方法ですが、いくつか注意すべき点があります。

• プロパティの順序が影響する： {a: 1, b: 2} と {b: 2, a: 1} は、内容が同じでも文字列化すると異なる結果になります。
• undefined や関数は無視される： 値が undefined のプロパティや関数型の値は、JSON文字列から除外されます。
• 循環参照に対応していない： オブジェクト内に循環参照があるとエラーが発生します。

より厳密な深い比較が必要な場合は、Lodash の _.isEqual() などのライブラリを利用するか、再帰的にプロパティを比較する専用の関数を実装することをおすすめします。