[JavaScript]JSでみるシャローコピーとディープコピーの違い

2022/11/08に公開約1,100字

はじめに

本記事は、筆者による理解の復習・確認やアウトプットの練習のために書いております。
間違った解釈等ございましたら、ご連絡いただけますと幸いです。

JavaScript でみるシャローコピーとディープコピー

シャローコピー

const object = [
  { id: 1, name: '佐藤' }
]

const shallowCopy = [...object]
shallowCopy[0].id = 999
console.log(object) // { id: 999, name: '佐藤' }
console.log(shallowCopy) // { id: 999, name: '佐藤' }

delete shallowCopy[0].id
console.log(object) // { name: '佐藤' }
console.log(shallowCopy) // { name: '佐藤' }

ディープコピー

const object = [
  { id: 1, name: '佐藤' }
]

const deepCopy = object.map(value => ({...value}))
deepCopy[0].id = 999
console.log(object) // { id: 1, name: '佐藤' }
console.log(deepCopy) // { id: 999, name: '佐藤' }

delete deepCopy[0].id
console.log(object) // { id: 1, name: '佐藤' }
console.log(deepCopy) // { name: '佐藤' }

シャローコピーとディープコピー

シャローコピー

コピーがコピー元のオブジェクトとプロパティにおいて同じ参照を共有する(同じ基礎値を指す)コピーのことを指します

→ 元のオブジェクトの直を変更すると、コピー先のオブジェクトも同様に変更されます。

ディープコピー

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

→ 元のオブジェクトの値を変更しても、コピー先のオブジェクトは変更されません。

引用

https://developer.mozilla.org/ja/docs/Glossary/Shallow_copy
https://developer.mozilla.org/ja/docs/Glossary/Deep_copy

GitHubで編集を提案

Discussion

ログインするとコメントできます