浅いコピーと深いコピーの違い

このレッスンでは、浅いコピーと深いコピーの違いを学び、オブジェクトを複製するときの思わぬバグを防げるようになることを目標にします。「JavaScript 浅いコピー 深いコピー」「JavaScript オブジェクト コピー」で調べている方向けです。

浅いコピーは「一番外側の入れ物だけ」を複製し、中の入れ子オブジェクトは元と共有したままです。深いコピーは中身まですべて複製するので、コピー先を変更しても元のデータに影響しません。スプレッド構文{ ...original }は浅いコピーを作り、JSON.parse(JSON.stringify(...))は簡易的な深いコピーを作れます。

サンプルコードでは、originalというオブジェクトを{ ...original }で浅くコピーしたshallowの入れ子部分(address.city)を書き換えると、元のoriginalまで変わってしまう様子を確認できます。一方、JSON.parse(JSON.stringify(original))で深くコピーしたdeepを書き換えても、元のデータには影響しません。

「コピーしたはずなのに、元のデータまで書き換わってしまった」というバグは、この違いを理解していないと起こりやすい初心者のつまずきポイントの1つです。オブジェクトを複製するときは、この違いを意識しておかないと思わぬバグの原因になります。JSONを使った深いコピーは、関数やundefinedを含むデータには使えない点にも注意が必要です。

実際の開発現場では、フォームの入力データを一時的に編集する際に元のデータを保持しておきたい場合など、コピーの種類を正しく選べるかどうかが重要になります。状態管理を行うアプリケーションほど、この違いを理解しておくことが求められます。