JavaScriptで2つのオブジェクトを結合して新しいオブジェクトを作成する方法

JavaScriptでは、既存の複数のオブジェクトのプロパティを組み合わせて、まったく新しいオブジェクトを作りたい場面がよくあります。本記事では、元のオブジェクトには一切変更を加えずに、2つのオブジェクトのプロパティとメソッドを統合した新オブジェクトを生成する方法を解説します。

前提となるオブジェクト

まず、次のように定義された2つのJavaScriptオブジェクトを用意します。

const a = {
    a: 1,
    af: function() { console.log(this.a) },
};
const b = {
    b: 2,
    bf: function() { console.log(this.b) },
};

ここで求められているのは、この2つのオブジェクトを受け取って、両方のプロパティを持つ新しいオブジェクトを作成する関数です。期待される結果は以下のようになります。

const output = {
    a: 1,
    af: function() { console.log(this.a) },
    b: 2,
    bf: function() { console.log(this.b) },
}

重要なポイントとして、元のオブジェクトaとbはそのまま変更されない必要があります。つまり、破壊的な操作ではなく、非破壊的なマージを行うことが求められます。

実装例

この処理を実現するコードは次のとおりです。可変長引数（arguments）を使うことで、任意の数のオブジェクトをまとめて結合できる汎用的な関数になっています。

const a = {
    a: 1,
    af: function() { console.log(this.a) },
};
const b = {
    b: 2,
    bf: function() { console.log(this.b) },
};
const extend = function(){
    let i, j, x, res=(arguments[0] || {});
    for (i = 1; i < arguments.length; i++) {
        const x = arguments[i];
        for (j in x) {
            if (x.hasOwnProperty(j)) {
                res[j] = x[j];
            }
        }
    }
    return res;
};
const c = extend({}, a, b);
console.log(c);

実行結果

コンソールには以下のように出力されます。

{ a: 1, af: [Function: af], b: 2, bf: [Function: bf] }

コードのポイント

• arguments[0] || {}: 第1引数をベースとなるオブジェクトとし、指定がなければ空のオブジェクトを使用します。
• hasOwnProperty(): プロトタイプチェーンから継承されたプロパティではなく、オブジェクト自身が持つプロパティだけをコピー対象にしています。
• extend({}, a, b): 空のオブジェクトを出発点にすることで、元のaやbは一切変更されません。

モダンな代替手段：Object.assign とスプレッド構文

上記のような関数を自作しなくても、ES2015以降では標準機能だけで同じことが実現できます。

Object.assignを使う方法

const c = Object.assign({}, a, b);
console.log(c); // { a: 1, af: [Function], b: 2, bf: [Function] }

スプレッド構文（...）を使う方法

const c = { ...a, ...b };
console.log(c); // { a: 1, af: [Function], b: 2, bf: [Function] }

どちらの方法でも、第1引数（または先頭）に空のオブジェクトを渡す・配置することで、元のオブジェクトを変更せずに新しいオブジェクトを生成できます。プロパティ名が重複している場合は、後ろに指定したオブジェクトの値が優先されますので注意してください。