JavaScriptで2つのオブジェクトの差分を抽出する方法

JavaScriptでは、2つのオブジェクト(ネストされた構造でも可)を受け取り、1つ目のオブジェクトに存在するが、2つ目のオブジェクトには存在しないキーとその値のペアを持った新しいオブジェクトを返す関数が必要になるケースがあります。

本記事では、そのような差分抽出関数の実装方法を、具体的なコード例とともにわかりやすく解説します。

実装のポイント

今回の実装では、以下の3つのメソッドを組み合わせて使用します。

• Object.keys(): オブジェクトのすべてのキーを配列として取得する
• reduce(): 配列を走査しながら、結果を1つのオブジェクトに集約する
• hasOwnProperty(): 指定したキーがオブジェクトに存在するかどうかを判定する

コード例

const obj1 = {
    "firstName": "Raghav",
    "lastName": "Raj",
    "age": 43,
    "address": "G-12 Kalkaji",
    "email": "raghavraj1299@yahoo.com",
    "salary": 90000
};
const obj2 = {
    "lastName": "Raj",
    "address": "G-12 Kalkaji",
    "email": "raghavraj1299@yahoo.com",
    "salary": 90000
};

const objectDifference = (first, second) => {
    return Object.keys(first).reduce((acc, val) => {
        if(!second.hasOwnProperty(val)){
            acc[val] = first[val];
        };
        return acc;
    }, {});
};

console.log(objectDifference(obj1, obj2));

処理の流れ

この関数の動作を順番に見ていきましょう。

1. Object.keys(first) によって、1つ目のオブジェクトの全キー(firstName、lastName、age、address、email、salary)を配列として取得します。
2. reduce() を使い、初期値として空のオブジェクト {} を用意して各キーを順にチェックしていきます。
3. second.hasOwnProperty(val) で、そのキーが2つ目のオブジェクトに存在するかどうかを判定し、存在しない場合のみ結果オブジェクトにキーと値を追加します。
4. 最終的に、1つ目のオブジェクトにのみ存在するキーと値のペアだけが集まった新しいオブジェクトが返されます。

実行結果

コンソールへの出力は以下のようになります。

{ firstName: 'Raghav', age: 43 }

このように、obj2 に存在しない firstName と age のみが正しく抽出されています。

補足： 値の違いも検出したい場合

上記の実装は「キーの有無」だけを比較していますが、同じキーでも値が異なる場合も差分として検出したい場合は、条件式を少し変更するだけで対応できます。

const deepDiff = (first, second) => {
    return Object.keys(first).reduce((acc, val) => {
        if(!second.hasOwnProperty(val) || first[val] !== second[val]){
            acc[val] = first[val];
        }
        return acc;
    }, {});
};

これにより、「2つ目のオブジェクトに存在しないキー」に加えて「両方のオブジェクトに存在するが値が異なるキー」も差分として取得できるようになります。用途に応じて使い分けてみてください。