JavaScriptのObject.assign()メソッドとは？使い方と注意点を解説

Object.assign()メソッドは、1つ以上のソースオブジェクトからターゲットオブジェクトへ、列挙可能な独自プロパティの値をすべてコピーするためのメソッドです。戻り値として、コピー先となったターゲットオブジェクトが返されます。

基本的な使い方

const targetObj = { a: 1, b: 2 };
const sourceObj = { b: 4, c: 5 };
const returnedTarget = Object.assign(targetObj, sourceObj);
console.log(targetObj);
console.log(returnedTarget);
console.log(returnedTarget === targetObj);
console.log(sourceObj);

出力結果

{ a: 1, b: 4, c: 5 }
{ a: 1, b: 4, c: 5 }
true
{ b: 4, c: 5 }

この例では、sourceObj のプロパティ b と c が targetObj へコピーされています。同じキー名（b）が存在する場合は、後から渡されたソース側の値で上書きされる点に注目してください。

押さえておきたいポイント

• ソースオブジェクト（sourceObj）は元の状態のまま変更されません。

• returnedTarget と targetObj は同一のオブジェクトです。つまり、Object.assign()は新しいオブジェクトを生成せず、第一引数のオブジェクト自体を変更して返しています。

• コピーされるのは「列挙可能」かつ「オブジェクト自身が持つ」プロパティのみです。継承されたプロパティや Symbol 以外の非列挙プロパティはコピー対象外となります。

• 内部処理ではソースに対して [[Get]]、ターゲットに対して [[Set]] を使用するため、ゲッターとセッターが呼び出されます。

主な活用シーン

• オブジェクトのマージ： 複数のオブジェクトのプロパティを1つにまとめたいとき

• デフォルト設定の上書き： デフォルト設定オブジェクトにユーザー設定を反映させるとき

• オブジェクトの複製： 元のオブジェクトを変更せずに作業用コピーを作るとき

const defaults = { theme: "light", fontSize: 14 };
const userSettings = { theme: "dark" };
const settings = Object.assign({}, defaults, userSettings);

console.log(settings);
// { theme: "dark", fontSize: 14 }

このように、第一引数に空オブジェクト {} を渡すことで、元のオブジェクトを破壊せずに新しいオブジェクトを生成できます。

注意：浅いコピー（シャローコピー）であること

Object.assign()によるコピーは「浅いコピー」です。ネストされたオブジェクトや配列は値そのものではなく参照がコピーされるため、コピー先で内容を変更すると元のオブジェクトにも影響します。深いコピーが必要な場合は、structuredClone() の利用を検討しましょう。