얕은 복사와 깊은 복사

생각보다 spread 연산자, Object.assign을 이용하는 경우가 많은데, 얕은 복사와 깊은 복사의 차이점에 대해서 정확히 파악하고 사용하고자 글을 작성한다.

얕은복사

• 얕은 복사는 객체의 참조를 복사하는 방식이다.
• 원본 객체와 복사본은 동일한 객체를 가리키게 된다.
• 얕은 복사는 객체의 최상위 속성만을 복사하고, 내부 객체나 배열의 참조는 공유한다.

✅ 참조를 공유 한다.....?

참조를 공유한다는 말은 쉽게 말해서 복사본의 depth가 있는 대상의 속성을 변경하면, 그 참조를 공유하고 있는 원본의 동일한 객체의 속성도 변경된다는 뜻이다.

// ✅ 예시 1

const originalObject = { name: 'John', age: 30, hobbies: ['reading', 'running'] };

// 얕은 복사
const shallowCopy = { ...originalObject };

shallowCopy.name = 'Jane';
shallowCopy.hobbies.push('cooking');

console.log(originalObject.name); // 'John'
console.log(originalObject.hobbies); // ['reading', 'running', 'cooking']

// ✅ 예시 2

const a = {b : {c: 'c'}, e: 'e'};
const b = {...a};

b.e = 'd'
a // { b: { c: 'c' }, e: 'e' }
b // { b: { c: 'c' }, e: 'd' }

==================================

b.b.c = 'qqq'
a // { b: { c: 'qqq' }, e: 'e' } (원본까지 변경)
b // { b: { c: 'qqq' }, e: 'd' }

위의 코드를 보면 1depth인 e 값을 바꾸면 b의 값만 바뀌지만
key 값이 b의 c의 값을 바꾸면 a 변수의 값도 바뀌어 버린다.

1 depth 까지만 깊은 복사가 이루어 지는 것이다.

결과적으로 얕은 복사를 수행할 때, 복사 대상 객체의 최상위 속성은 값으로 복사되어 불변성을 유지하지만, 내부 객체나 배열은 동일한 참조를 공유하므로 복사본에서 해당 속성을 변경하면 원본 객체의 해당 속성도 동일하게 변경된다.

깊은 복사

const originalObject = { name: 'John', age: 30, hobbies: ['reading', 'running'] };

// 깊은 복사
const deepCopy = JSON.parse(JSON.stringify(originalObject));

deepCopy.name = 'Jane';
deepCopy.hobbies.push('cooking');

console.log(originalObject.name); // 'John'
console.log(originalObject.hobbies); // ['reading', 'running']

• 위의 코드에서 deepCopy는 originalObject의 깊은 복사본이다.
• deepCopy의 name 속성을 변경해도 원본 객체에는 영향을 주지 않았다.

정리

결과적으로 깊은 복사는 객체의 모든 속성과 하위 항목을 복사하여 완전한 독립성을 제공하는 반면, 얕은 복사는 최상위 수준의 속성만을 복사하고 내부 항목은 참조를 공유한다. 따라서, 객체 구조에 따라 적절한 복사 방식을 적절히 선택해서 사용하면 좋을 것 같다.