얕은 복사(shallow copy)
: 객체의 참조(주소) 값을 복사하는 것. 1 depth까지만 복사하며, 객체에 중첩되어 있는 객체의 경우 참조 값을 복사한다.const obj1 = { a: 1, b: 2 };
const obj2 = obj1; // 참조에 의한 할당 (같은 데이터 주소)
console.log(obj1 === obj2); // true
obj2.a = 3; // 같은 주소를 참조하고 있어서 obj2의 프로퍼티를 수정하면 obj1의 프로퍼티도 수정된다.
console.log(obj1.a); // 3
깊은 복사(deep copy)
: 객체의 실제 값을 복사하는 것. 객체에 중첩된 객체까지 모두 복사한다.const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
obj2.a = 3;
console.log(obj1 === obj2) // false
console.log(obj1.a) // 1
const obj1 = { a: 1, b: 2 };
const obj2 = Object.assign({}, obj1);
obj2.a = 3;
console.log(obj1 === obj2); // false
console.log(obj1.a) // 1
const obj1 = { a: 1, b: 2, c: {d: 3} };
// 객체 순환이 아닌 문자열로 변경 후 그것을 다시 원본 객체로 변경하는 방식
// 문자열은 원시 타입으로 불변성을 가지기 때문에 깊은 복사가 가능하다!
const obj2 = JSON.parse(JSON.stringify(obj1));
obj2.c = 3;
console.log(obj1 === obj2); // false
console.log(obj1.c) // {d: 3}
헷갈려하던 얕은 복사와 깊은 복사를 코드 예제를 직접 작성해보면서 다시 상기하게 되었다. 원시 값과 객체의 특성이 다르기 때문에 항상 이를 내부적으로 고려해서 코드를 작성해야겠다고 느꼈다.
참고 자료
- 모던 자바스크립트 Deep Dive
- 얕은 복사(shallow copy) vs 깊은 복사(deep copy)
- 깊은 복사와 얕은 복사에 대한 심도있는 이야기
잘못된 점이나 궁금한 점이 있으시면 댓글로 남겨주시면 감사하겠습니다!