얕고(Shallow), 깊은(Deep) 복사(Copy)

자바스크립트에서 얕은복사와 깊은 복사는 객체나 배열을 복사하는 방법을 뜻한다. 

얕은복사 (Shallow copy)

• 얕은복사는 객체의 1차원 속성만 복사한다. 객체 내의 참조타입 속성(ex. 배열, 객체 등)은 복사되지 않고 원본 객체의 참조를 공유한다.
• Object, assign(), 스프레드 연산자(...), Array, property.slice() 등을 사용해서 얕은복사를 수행할 수 있다.

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

shallowCopy.a = 10; // 원본에는 영향 없음
shallowCopy.b.c = 20; // 원본도 영향을 받음

console.log(original.b.c); // 20

✅장점

1. 간단하고 빨라서 성능이 좋다.
2. 객체의 속성이 단순한 경우에는 충분히 유용하다.

⛔단점

1. 참조 타입의 속성에 대한 변경이 원본 객체에 영향을 미칠 수 있다.

깊은 복사(Deep copy)

• 깊은 복사는 객체의 모든 속성을 재귀적(recursive, 자기 자신을 이용하여 정의하거나 응용하는 성질)으로 복사한다. 중첩된 객체나 배열도 완전히 새로운 복사본이 생성된다.
• 일반적으로 JSON.parse(JSON.stringify()) 방법이나, 라이브러리(ex. Lodash의 _.cloneDeep())를 사용하여 수행할 수 있다.

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.a = 10; // 원본에는 영향 없음
deepCopy.b.c = 20; // 원본에도 영향 없음

console.log(original.b.c); // 2

✅장점

1. 중첩된 객체나 배열의 변경이 원본 객체에 영향을 미치지 않아 안전하다.

⛔단점

1. 성능이 떨어질 수 있고 특히, 큰 객체를 복사할 때 느려질 수 있다.
2. JSON.stringify()를 사용할 경우, 함수, undefined, symbol, 순환참조를 복사할 수 없다.

결론

• 속성이 단순하고 참조 타입의 영향을 걱정하지 않아도 될 때 => 얕은 복사
• 중첩된 구조에서 안전하게 데이터를 복사하고 싶을 때 => 깊은 복사 (단, 성능저하와 제한사항이 있을 수 있다.)