Object.assign() 対応: ES6（ECMAScript 2015）

1つ以上のオブジェクトのプロパティを別のオブジェクトにコピーします。オブジェクトの結合やコピーを行う際に使用します。

構文

// コピー元のプロパティをコピー先にコピーします。
Object.assign(コピー先, コピー元)

// 複数のコピー元を指定できます。
Object.assign(コピー先, コピー元1, コピー元2, ...)

// スプレッド構文によるオブジェクトのコピー・結合
var copy = { ...元のオブジェクト };
var merged = { ...オブジェクト1, ...オブジェクト2 };

サンプルコード

// オブジェクトのコピーを作成します。
var original = { name: "Kuu", age: 25 };
var copy = Object.assign({}, original);
console.log(copy); // 『{ name: "Kuu", age: 25 }』と出力されます。

// 複数のオブジェクトを結合します。
var defaults = { color: "red", size: "M" };
var custom = { size: "L", weight: 100 };
var result = Object.assign({}, defaults, custom);
console.log(result); // 『{ color: "red", size: "L", weight: 100 }』と出力されます。

// 同じキーがある場合、後のオブジェクトの値で上書きされます。
console.log(result.size); // 『L』と出力されます。

// スプレッド構文でも同じことができます。
var copy2 = { ...original };
console.log(copy2); // 『{ name: "Kuu", age: 25 }』と出力されます。

var merged = { ...defaults, ...custom };
console.log(merged); // 『{ color: "red", size: "L", weight: 100 }』と出力されます。

// コピー先にオブジェクトを直接指定すると、そのオブジェクトが変更されます。
var target = { a: 1 };
Object.assign(target, { b: 2, c: 3 });
console.log(target); // 『{ a: 1, b: 2, c: 3 }』と出力されます。

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

項目	Object.assign()	スプレッド構文
書き方	Object.assign({}, a, b)	{ ...a, ...b }
コピー先の変更	第1引数のオブジェクトが直接変更されます。	常に新しいオブジェクトが作られます。
コピーの深さ	浅いコピーのみ。ネストされたオブジェクトは参照がコピーされます。	同じく浅いコピーのみです。

概要

『Object.assign()』はコピー元オブジェクトの列挙可能なプロパティをコピー先にコピーするメソッドです。第1引数がコピー先、第2引数以降がコピー元となり、複数のオブジェクトを左から順にマージできます。同じキーが存在する場合は後のオブジェクトの値で上書きされます。

注意点として、『Object.assign()』は浅いコピーを行います。ネストされたオブジェクトや配列は参照がそのままコピーされるため、コピー先で変更するとコピー元にも影響します。深いコピーが必要な場合は structuredClone() や JSON.parse(JSON.stringify()) を使用してください。

ES2018以降はスプレッド構文 { ...obj } を使ったコピー・結合が主流です。スプレッド構文は常に新しいオブジェクトを返すため、意図しない変更を防ぎやすいという利点があります。