[Javascript] Shallow Copy & Deep Copy

Shallow Copy

개체 의 얕은 복사본 은 속성이 복사본이 만들어진 원본 개체의 참조와 동일한 참조(동일한 기본 값을 가리킴)를 공유하는 복사본입니다. 결과적으로 소스나 복사본 중 하나를 변경하면 다른 개체도 변경될 수 있습니다. 따라서 의도하지 않은 소스나 복사본에 예상치 못한 변경이 발생할 수 있습니다. 이 동작 은 원본과 복사본이 완전히 독립적인 깊은 복사 의 동작과 대조됩니다 . -MDN

쉽게 설명하면 얕은 복사는 복사를 한 후 복사본의 내용이 변경되면 원본의 내용도 변경되는 것이다.

const a = [1,2,3,4,5]
const b = a

console.log(a)  // [ 1, 2, 3, 4, 5 ]
console.log(b)  // [ 1, 2, 3, 4, 5 ]

b.pop()

console.log(a)  // [ 1, 2, 3, 4]
console.log(b)  // [ 1, 2, 3, 4]

위 예시와 같이 복사본이 변경되면 원본도 변경되는것이 Shallow Copy이다.

Deep Copy

개체 의 전체 복사본 은 속성이 복사본이 만들어진 원본 개체의 참조와 동일한 참조(동일한 기본 값을 가리킴)를 공유하지 않는 복사본입니다. 결과적으로 소스나 복사본을 변경할 때 다른 개체도 변경하지 않도록 할 수 있습니다. 즉, 의도하지 않은 소스나 복사본을 의도하지 않게 변경하지 않을 것입니다. 이 동작 은 소스나 복사본 중 하나를 변경하면 다른 개체도 변경될 수 있는 얕은 복사본 의 동작과 대조됩니다 (두 개체가 동일한 참조를 공유하기 때문에). -MDN

얕은 복사와는 달리 깊은 복사는 복사본의 내용을 변경하더라도 원본의 내용이 변경되지 않는다.

const a = [1,2,3,4,5]
const b = [...a]

console.log(a)  // [ 1, 2, 3, 4, 5 ]
console.log(b)  // [ 1, 2, 3, 4, 5 ]

b.pop()

console.log(a)  // [ 1, 2, 3, 4, 5 ]
console.log(b)  // [ 1, 2, 3, 4]

위 예시와 같이 복사본이 변경되어도 원본이 변경되지 않는 것이 깊은 복사이다.