【JavaScript】複数オブジェクトをマージ（結合）する方法

JavaScriptで複数のオブジェクトを結合する場合は、Object.assign()メソッドまたはスプレッド構文を使用します。

前提（検証環境）

• Node.jsがインストールされていること。

# 確認したバージョン
$ node -v
v20.13.1

Object.assign() を使用する方法

Object.assign()メソッド

Object.assign()は、第一引数に指定したコピー先のオブジェクトに、第二引数以降の全てのオブジェクトをマージするメソッドです。

Object.assign(target, source1, source2, …);

検証コード（assign_test.js）

以下内容をファイル名：assign_test.jsで保存します。

const foods1 = { banana: 'バナナ', apple: 'りんご'};
const foods2 = { grapes: 'ぶどう', orange: 'オレンジ'};
Object.assign(foods1, foods2);

console.log(foods1);

実行コマンド（assign_test.js）

以下コマンドでファイルを実行します。

node assign_test.js

実行結果（assign_test.js）

以下のように、food1とfood2をマージした結果が、出力されることを確認できました。

{ banana: 'バナナ', apple: 'りんご', grapes: 'ぶどう', orange: 'オレンジ' }

スプレッド構文を使用する方法

スプレッド構文

スプレッド構文 (…food1) のように記載し、配列やオブジェクトの要素を展開する構文です。

検証コード（spread_syntax.js）

以下内容をファイル名：spread_syntax_test.jsで保存します。

const foods1 = { banana: 'バナナ', apple: 'りんご'};
const foods2 = { grapes: 'ぶどう', orange: 'オレンジ'};
const mergeFoods = { ...foods1, ...foods2 };

console.log(mergeFoods);

実行コマンド（spread_syntax.js）

node spread_syntax_test.js

実行結果（spread_syntax.js）

{ banana: 'バナナ', apple: 'りんご', grapes: 'ぶどう', orange: 'オレンジ' }

---

以上で本記事の解説を終わります。
よいITライフを！