✨
[JavaScript]JSでみるシャローコピーとディープコピーの違い
はじめに
本記事は、筆者による理解の復習・確認やアウトプットの練習のために書いております。
間違った解釈等ございましたら、ご連絡いただけますと幸いです。
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: '佐藤' }
シャローコピーとディープコピー
シャローコピー
コピーがコピー元のオブジェクトとプロパティにおいて同じ参照を共有する（同じ基礎値を指す）コピーのことを指します
→ 元のオブジェクトの直を変更すると、コピー先のオブジェクトも同様に変更されます。
ディープコピー
コピー先のオブジェクトのプロパティがコピー元のオブジェクトのプロパティと同一の参照（同じ値を指す）を共有しないコピーのことです。
→ 元のオブジェクトの値を変更しても、コピー先のオブジェクトは変更されません。
引用
Discussion