깊은 복사와 얕은 복사는 객체를 복사할 때 데이터가 어떻게 복사되는지를 설명하는 개념입니다.
📖 얕은 복사(Shallow Copy)
- 얕은 복사는 객체의 참조만 복사됩니다. 즉, 복사된 객체의 속성들이 원본 객체와 같은 메모리 주소를 가리키게 됩니다.
- 복사한 객체의 속성을 변경하면 원본 객체도 영향을 받을 수 있습니다.
예제
let original ={name : "JJS",
details : {age : 25},
};
let shallowCopy = Object.assign({}, original);
shallowCopy.name = "Bob";
shallowCopy.details.age = 30;
console.log(original.name); // "JJS" (변경되지 않음)
console.log(original.details); // 30 (변경됨)동작원리
-
Object.assign(): 메서드는 여러 개의 소스 객체로부터 속성을 복사하여 대상 객체에 병합합니다. 이 경우, 빈 객체{}를 대상 객체로 제공하여original객체를 얕게 복사합니다. -
얕은 복사이므로 원본 객체의 최상위 속성 값은 독립적으로 복사되지만, 중첩된 객체나 배열은 여전히 원본 객체와 참조를 공유합니다.
여기서 name속성은 복사된 값이지만(name을 변경해도 original.name은 영향을 받지않지만), details객체는 원본과 동일한 참조를 공유하므로 details.age를 변경하면 원본 객체에도 영향을 미칩니다.
📖 깊은 복사(Deep Copy)
- 깊은 복사는 객체를 완전히 복제하여 원본과 독립적인 복사본을 생성합니다. 복사된 객체는 원본과 다른 메모리 주소를 가지므로, 복사본을 수정해도 원본에 영향을 주지 않습니다.
- 깊은 복사는 중첩된 객체나 배열이 복사될 때 유용합니다.
예제
let original = {name : "JJS",
details : {age : 26},
}
let deepcopy = JSON.parse(JSON.stringify(original));
deepcopy.detail.age = 30;
console.log(original.details.age); // 25(변경되지 않음)동작 원리
JSON.stringify(original):original객체를 JSON 문자열로 변환합니다. 이 과정에서 객체의 모든 속성과 중첩된 객체까지 문자열로 직렬화 됩니다.JSON.parse(...): 문자열로 변환된 JSON을 다시 JavaScript 객체로 변환 합니다. 이로 인해 새로운 객체가 생성되며, 원본과 별개의 메모리 주소를 가지게 됩니다.
위 예제에서 JSON.parse(JSON.stringify())는 깊은 복사를 수행하여 original객체와 deepCopy객체가 서로 독립적인 값을 갖습니다.
99