【JavaScript】コピーしたオブジェクトを更新すると元のオブジェクトも変わる？Object.assign()の挙動を解説

結論：元の（親の）オブジェクトは更新されません

結論からお伝えすると、Object.assign()で作成したコピー先のオブジェクトを更新しても、元のオブジェクトは更新されません。
これは、Object.assign()が第1引数に指定した空のオブジェクト{}に対して、各オブジェクトのプロパティをコピーし、まったく別の新しいオブジェクトを生成するためです。

コード例

var firstObject = { name: 'John' };
var secondObject = { name: 'Carol' };
console.log("マージ前=");
console.log(firstObject);
var afterMerging = Object.assign({}, firstObject, secondObject);
afterMerging.name = 'Smith';
console.log("マージ後=");
console.log(firstObject);

上記のプログラムを実行するには、ターミナルから以下のコマンドを使用します。

node fileName.js

実行結果

ここでは、ファイル名を demo131.js として実行しています。実行すると、次のような出力が得られます。

PS C:\Users\Amit\JavaScript-code> node demo131.js
マージ前=
{ name: 'John' }
マージ後=
{ name: 'John' }

結果の解説

出力結果に注目してください。コピー先の afterMerging.name を 'Smith' に書き換えても、firstObject は { name: 'John' } のまま一切変化していません。
これは、Object.assign({}, firstObject, secondObject) の時点ですでに独立した新しいオブジェクトが作られているためです。つまり、コピー先への変更が元のオブジェクトに波及することはありません。

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

ただし、Object.assign() によるコピーは「浅いコピー（シャローコピー）」である点に注意が必要です。
オブジェクトの中に入れ子になったオブジェクト（ネストしたオブジェクト）がある場合、その内部オブジェクトへの参照は元のオブジェクトと共有されます。そのため、ネストされた内部の値を変更すると、元のオブジェクトにも影響が及ぶ可能性があります。

完全に独立したディープコピーが必要な場合は、structuredClone() や JSON を利用した方法などの使用を検討しましょう。