Object.assignとスプレッド構文 | オブジェクトのマージ | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

オブジェクトのマージとは？

JavaScriptでは、オブジェクトを結合して新しいオブジェクトを作成する操作がよく行われます。この操作をオブジェクトのマージと呼びます。オブジェクトのマージによって、複数のオブジェクトのプロパティを一つのオブジェクトにまとめることができ、便利な再利用や拡張が可能になります。

Object.assignによるオブジェクトのマージ

Object.assign()は、JavaScriptでオブジェクトをマージするためのメソッドです。複数のオブジェクトを引数に取り、最初のオブジェクトにそれ以降のオブジェクトのプロパティをコピーします。結果として、新しいオブジェクトが作成されます。

Object.assignの例

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObj = Object.assign({}, obj1, obj2);

console.log(mergedObj);  // { a: 1, b: 3, c: 4 }

この例では、Object.assignを使ってobj1とobj2をマージし、新しいオブジェクトmergedObjを作成しています。obj1とobj2の共通するプロパティbは、後から指定されたobj2の値に上書きされます。

スプレッド構文によるオブジェクトのマージ

スプレッド構文（...）は、ES6で導入された機能で、オブジェクトのマージにも利用できます。スプレッド構文は、オブジェクトのプロパティを個々に展開し、他のオブジェクトと結合する際に便利です。

スプレッド構文の例

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj);  // { a: 1, b: 3, c: 4 }

この例では、スプレッド構文を使ってobj1とobj2をマージしています。Object.assignと同様に、bの値は後に指定されたobj2の値に上書きされています。

Object.assignとスプレッド構文の違い

Object.assignとスプレッド構文はどちらもオブジェクトのマージに使われますが、いくつかの違いがあります。以下にその違いを表でまとめます。

Object.assign スプレッド構文
ES5から使用可能 ES6以降で使用可能
プロパティをコピーする プロパティを展開してマージする
元のオブジェクトに影響を与える可能性がある 新しいオブジェクトが作成される

違いを示す具体例

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

// Object.assignを使ったマージ
const mergedWithAssign = Object.assign({}, obj1, obj2);
console.log(mergedWithAssign);  // { a: 1, b: 3, c: 4 }

// スプレッド構文を使ったマージ
const mergedWithSpread = { ...obj1, ...obj2 };
console.log(mergedWithSpread);  // { a: 1, b: 3, c: 4 }

この例では、Object.assignとスプレッド構文を使ってそれぞれオブジェクトをマージしています。両者の動作は似ていますが、スプレッド構文の方が新しい構文であり、より直感的です。

マージ時のプロパティの上書き

オブジェクトのマージ時、同じプロパティが複数のオブジェクトに存在する場合、後に指定されたオブジェクトのプロパティが優先され、上書きされます。この動作はObject.assignでもスプレッド構文でも同じです。

プロパティの上書きの例

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);  // { a: 1, b: 3, c: 4 }

この例では、obj1とobj2のbというプロパティが競合していますが、後から指定されたobj2のbの値3が最終的に使用されています。

まとめ

Object.assignとスプレッド構文は、JavaScriptでオブジェクトをマージするための便利な手法です。どちらを使うかは、プロジェクトの仕様や使用しているJavaScriptのバージョンに依存しますが、スプレッド構文は直感的でモダンな書き方としてよく利用されます。これらの手法を理解することで、効率的にオブジェクトを管理し、コードの再利用性を高めることができます。

スポンサーリンク