JavaScriptのディープコピーとは？

こんにちは、Yu_riです。
今回はオブジェクトのディープコピーについて紹介します。
ディープコピーを使えるとよりセキュアにオブジェクトを扱うことができると思うのでぜひ読んでみてください。

ディープコピーとは？

オブジェクトの ディープコピー とは、コピー先のオブジェクトのプロパティがコピー元のオブジェクトのプロパティと同一の参照（同じ値を指す）を共有しないコピーのことです。

引用：https://developer.mozilla.org/ja/docs/Glossary/Deep_copy

つまり、コピー元と参照先を（完全に）共有しないオブジェクトを作成（コピー）するということですね。

具体的な実装方法

オブジェクトをディープコピーは、下記の実装方法で実現できます。

const obj = {
    objKey1: {key1: "value1"},
    objKey2: {key2: "value2"},
};
const deepObj = JSON.parse(JSON.stringify(obj));

なぜディープコピーを使用するのか？

● ディープコピーしない例（シャローコピー）

まずは以下の例（自分の過去）を見てください。

const obj = {
    objKey1: {key1: "value1"},
    objKey2: {key2: "value2"},
};
// Object.assignを使用
const assignObj = Object.assign({}, obj);

上記のObject.assignメソッドでオブジェクトをコピーできます。
しかし今回の例のようにオブジェクトの中にオブジェクトがあるという構造の場合、Object.assignメソッドでは第２階層のオブジェクトまではコピーできません。
つまり、コピー先で第２階層のオブジェクトの値を更新するとコピー元にも影響が出るということです。

（以下の結果を参照）

assignObj.objKey1.key1 = "copy1";
console.log(obj.objKey1.key1, assignObj.objKey1.key1);
// 結果は「copy1 copy1」となり、コピー元も値が変わっていることが分かる。

上記のObject.assignメソッドのように１階層までコピーすることを「シャローコピー（浅いコピー）」といいます。

● ディープコピーする例

ディープコピーを使用した場合には、以下のようにコピー元の第２階層のオブジェクトには影響が出ていないことが分かります。

deepObj.objKey1.key1 = "copy1";
console.log(obj.objKey1.key1, deepObj.objKey1.key1);
// 「value1 copy1」