JavaScriptでディープコピーとシャローコピーについて

JavaScript(Vue.js)で実装している時に参照先のデータがうまく参照できないケースが発生しました。

そこで、データを参照する為ようのコピーを作成したのですが、その時にディープコピーとシャローコピーについて理解が出来ておらず詰まったのでそれぞれの違いを記載します。

結論

ディープコピー：オブジェクトの中のオブジェクトまで丸ごとコピーする
シャローコピー：オブジェクトの中の中のオブジェクトは参照コピーする

ディープコピーはコピー元とコピー先の実体は別なので、どちらかのオブジェクトを変更したも、もう片方のオブジェクトに影響を与えない

シャローコピーはコピー元とコピー先の実態は同じなので、どちらかのオブジェクトを変更したら、もう片方のオブジェクトも変更される

違いについてはこちらの動画がわかりやすい：ディープコピーとシャローコピーの違い - YouTube

ディープコピー図解

画像参照： 【JavaScript】ディープコピーとシャローコピーの違い

ディープコピー実装方法

単純にシリアライズ → デシリアライズという形でも、ディープコピーできるようです。

例）

let lists = [{'key1': 'value1', 'key2':'value2'},{'key1': 'value3', 'key2': undefined}]
let copyLists = JSON.parse(JSON.stringify(lists))

copyLists[0].key1 = "hoge"
console.log('lists')
console.log(lists)

console.log('copyLists')
console.log(copyLists)

実行結果

lists
0: {key1: "value1", key2: "value2"}
1: {key1: "value3", key2: undefined}

copyLists
0: {key1: "hoge", key2: "value2"}
1: {key1: "value3"}

シャローコピー図解

画像参照： 【JavaScript】ディープコピーとシャローコピーの違い