[Interview] 깊은 복사와 얕은 복사에 대해서 설명해주세요
얕은 복사 (Shallow Copy)
● 객체의 최상이 레벨 속성만 복사합니다.
- 원시 값(Number, String)은 값 자체가 복사되지만, 객체나 배열과 같이 참조형 데이터는
참조(주소)만 복사되어 원본과 복사본이 같은 내부 객체를 공유하게 됩니다.
- 중첩된 객체가 있을 경우 복사본에서 해당 내부 객체를 변경하면 원본에도 영향이 있습니다.
- 얕은 복사는 한 가지의 값을 바라보기 때문에 원본에 영향이 있을 수 있습니다.
const origin = { a: 1, b: { c: 2 } };
const shallowCopy = { ...origin };
console.log(shallowCopy.b === origin.b); // true (같은 객체 참조) - es6를 사용한다면 '...xxx'같은 형태의 코드를 사용하는데 이것이 곧 얕은 복사이며
Spread Operator라고 합니다.
깊은 복사 (Deep Copy)
● 객체의 모든 계층을 재귀적으로 복사하여 원본과 독립적인 새로운 객체를 생성합니다.
- 중첩 객체나 배열까지 모두 새로운 메모리 공간에 복사하므로, 얕은 복사와는 달리
복사본의 수정이 원본에 영향을 미치지 않습니다.
const origin = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(origin));
console.log(deepCopy.b === origin.b); // false (서로 다른 객체)- 객체를 JSON 문자열로 변환 후 다시 파싱하여 새로운 객체를 생성했을 때,
origin을 복사했지만 deepCopy.b와 origin.b는 서로 다른 객체로 판별됩니다.
Q. 깊은 복사, 얕은 복사를 정리하자면...
A :
깊은 복사는 객체의 상태를 완전히 복제하는 것입니다. 원본 객체와 복사된 객체가 독립적으로 작동이 가능하다는 것입니다. 하나의 객체를 가지고 여러 개의 복사본을 만들 수 있어 확실한 복사를 보장하지만, 독립적으로 존재한다는 것은 메모리에 한 자리를 차지한다는 뜻입니다. 즉, 메모리를 많이 사용하기 때문에 너무 많이 사용할 경우 프로그램 성능이 저하될 수 있습니다.
얕은 복사는 한 가지의 값을 바라보기 때문에 메모리를 적게 사용하고, 복사 과정이 간단합니다. 이는 성능이 좋다는 뜻이며 객체의 상태를 부분적으로 복제할 수 있습니다. 하지만 객체의 상태를 완전히 복사하는 것은 아니기 때문에 원본의 값이 변형에는 안전하지 않습니다.