JavaScriptオブジェクトのプロパティを別のオブジェクトに複製・コピーする方法

JavaScriptでオブジェクトのプロパティを別のオブジェクトにコピーしたい場合、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は変更されません。値が更新されるのはコピー先のターゲットオブジェクトのみです。

• returnedTargetとtargetObjは同一のオブジェクトです。Object.assign()は、コピー先のオブジェクトそのものを戻り値として返します。

• コピーされるのは列挙可能な自身のプロパティのみです。継承されたプロパティや列挙不可のプロパティはコピーの対象外となります。また、ソースに対しては[[Get]]、ターゲットに対しては[[Set]]が使用されるため、getterやsetterが呼び出される点にも注意が必要です。

さらに、Object.assign()によるコピーは浅いコピー（シャローコピー）である点にも留意してください。プロパティの値がオブジェクトの場合、参照がコピーされるだけで、ネストされたオブジェクト自体は複製されません。完全に独立したコピーが必要な場合は、structuredClone()やディープコピーに対応したライブラリの利用を検討するとよいでしょう。