[프론트] JS에서 얕은 복사와 깊은 복사에 대해 설명해주세요

한줄 결론

JS에서 얕은 복사와 깊은 복사의 근본적 차이점은

얕은 복사는 객체의 1단계만 복사하고 내부 참조는 공유하는 것임에 반해

깊은 복사는 모든 중첩 구조까지 재귀적으로 복사해서 완전히 독립적인 객체를 만드는 것이라는 점입니다. 

 

설명

객체 안에 또 객체가 있는 상황에서

얕은 복사는 객체의 1단게만 복사하고 내부 참조는 공유해서 

복사본의 내부 객체가 원본의 내부 객체 주소 그대로 사용합니다.

따라서 얕은 복사본의 내부 객체를 수정하면 원본 객체도 따라 바뀌고

원본 객체의 내부 객체를 수정해도 얕은 복사본의 내부 객체가 따라 바뀝니다. 

const obj = { a: 1, b: { c: 2 } };
const copy = { ...obj };

copy.b.c = 3;

console.log(obj.b.c); // 3 ❗ 영향 받음

 

깊은 복사는 반면 모든 중첩 구조까지 완전히 독립적으로 복사해서

내부 객체가 완전히 다른 주소를 가지게 됩니다. 

따라서 깊은 복사본의 내부 객체를 수정해도 원본 객체는 바뀌지 않고

원본 객체의 내부 객체를 수정해도 깊은 복사본의 원본 객체는 바뀌지 않습니다. 

const obj = { a: 1, b: { c: 2 } };
const copy = structuredClone(obj);

copy.b.c = 3;

console.log(obj.b.c); // 2 ✅ 영향 없음

 

예시

얕은 복사는 통상적으로 spread operator을 사용해 다음과 같은 방식으로 진행합니다. 

보통 배열 복사를 할때 사용하는 방식입니다. 

const orgArr = [1,2,3];
const shallowCopyArr = [...orgArr];

const orgObj = {a:1, b:2, c:3};
const shallowCopyObj = {...orgObj}

 

깊은 복사는 다음과 같은 방식으로 진행합니다. 

아직 사용해본적 없지만 다계층 객체를 안전하게 복사할때 사용할 것 같습니다

const orgArr = [1,2,3];
const deepcopyArr = structuredClone(orgArr);

const orgObj = {a:1, b:2, c:3};
const deepCopyObj = structuredClone(orgObj);

 

https://mnevermore1122.tistory.com/354