【JavaScript】Object.assign()メソッド：オブジェクトのマージとコピー

JavaScriptのObject.assign()メソッドは、オブジェクトのマージやコピーを行うための便利な方法です。このメソッドは、1つまたは複数のソースオブジェクトのプロパティをターゲットオブジェクトにコピーします。この記事では、Object.assign()メソッドの基本的な使い方や機能、および実際の使用例について説明します。

Object.assign()メソッドの構文

Object.assign()メソッドの構文は以下の通りです。

Object.assign(target, ...sources)

target: コピー先のターゲットオブジェクトです。
sources: コピー元のソースオブジェクトです。複数のソースオブジェクトを指定できます。

Object.assign()メソッドの動作

Object.assign()メソッドは、ソースオブジェクトからターゲットオブジェクトにプロパティをコピーします。同名のプロパティが存在する場合、後から指定されたソースオブジェクトのプロパティが優先されます。つまり、後の引数で指定されたオブジェクトのプロパティが前の引数で指定されたオブジェクトのプロパティを上書きします。

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };

const merged = Object.assign({}, target, source);

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

上記の例では、sourceオブジェクトのbプロパティの値がtargetオブジェクトの同じプロパティを上書きし、cプロパティは追加されました。

Object.assign()メソッドの注意点

オブジェクトの浅いコピーを行います。つまり、プロパティの値がオブジェクトや配列の場合、参照がコピーされるだけで、中身はコピーされません。
ターゲットオブジェクト自体が変更されます。Object.assign()はターゲットオブジェクトを変更してしまいます。そのため、ターゲットオブジェクトを変更したくない場合は、空のオブジェクトを渡して新しいオブジェクトを作成することが推奨されます。

Object.assign()メソッドの使用例

オブジェクトのマージ:

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };

const merged = Object.assign({}, target, source);

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

オブジェクトのコピー:

const obj = { a: 1, b: 2 };
const copy = Object.assign({}, obj);

console.log(copy); // { a: 1, b: 2 }

プロパティの追加:

const obj = { a: 1 };
const extended = Object.assign({}, obj, { b: 2 });

console.log(extended); // { a: 1, b: 2 }

結論

Object.assign()メソッドは、JavaScriptでオブジェクトのマージやコピーを行うための重要なツールです。これを活用することで、コードの効率性を向上させることができます。ただし、浅いコピーであることやターゲットオブジェクトが変更されることに注意して使用してください。