JavaScriptで2つのオブジェクトを結合（ユニオン）する方法

JavaScriptでは、複数のオブジェクトの値をひとつにまとめたい場面がよくあります。例えば、次のようなオブジェクトがあったとします。

const obj1 = { name: " ", email: " " };

そして、もうひとつはこのようなオブジェクトです。

const obj2 = { name: ['x'], email: ['y']};

ここで必要になるのは、これら2つのオブジェクトを受け取り、各キーの値を配列としてまとめた「ユニオン（和集合）」を返す関数です。期待する出力は以下のイメージです。

const output = { name: [" ", ['x']], email: [" ", ['y']] };

実装例

for...in ループを使って、両方のオブジェクトの値を順番に新しいオブジェクトへ追加していく方法を見てみましょう。

const obj1 = { name: " ", email: " " };
const obj2 = { name: ['x'], email: ['y']};

const objectUnion = (obj1 = {}, obj2 = {}) => {
  const obj3 = {};
  // 1つ目のオブジェクトの値を配列に格納
  for (let i in obj1) {
    obj3[i] = [obj1[i]];
  }
  // 2つ目のオブジェクトの値を同じキーに追加
  for (let i in obj2) {
    if (obj3[i]) {
      obj3[i].push(obj2[i]);
    } else {
      obj3[i] = [obj2[i]];
    }
  }
  return obj3;
};

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

出力結果

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

{ name: [ ' ', [ 'x' ] ], email: [ ' ', [ 'y' ] ] }

コードの解説

この関数の処理の流れは以下のとおりです。

• 第1段階： 最初の for...in ループで obj1 の各キーを走査し、その値を配列にラップして結果オブジェクトに設定します。
• 第2段階： 次のループで obj2 を走査し、同じキーがすでに存在すれば push() で値を追加し、存在しなければ新しく配列を作成します。
• 引数の初期値： デフォルトパラメータ（{}）を指定しているため、どちらか一方が undefined でもエラーにならず安全に動作します。

なお、キー名（name や email）をあらかじめ固定してしまうと汎用性が失われてしまいます。上記の例では、どんなキーを持つオブジェクトにも対応できるように改良しています。

補足：Object.assign やスプレッド構文との違い

単純にオブジェクトをマージしたいだけであれば、Object.assign() やスプレッド構文（...）が利用できます。ただしこれらの方法は、後ろのオブジェクトの値で前の値を上書きするため、今回のように「両方の値を保持した配列」を作りたいケースには適していません。

const merged = { ...obj1, ...obj2 };
// 結果：{ name: ['x'], email: ['y'] } ← 値が上書きされる

すべての値を残したい場合には、本記事で紹介したようなループ処理によるユニオンの実装が有効です。