TypeScript 얕은 복사와 깊은 복사

복사 (Copying)

프로그래밍에서 복사에는 크게 두 가지 방식이 있다.

1. 깊은 복사(Deep Copy)
2. 얕은 복사(Shallow Copy)

깊은 복사 (Deep Copy)

• 깊은 복사는 복사한 값이 바뀌더라도 원본 값은 영향을 받지 않는 복사 방식이다
• TypeScript에서는 **원시 타입(primitive type)**인 number, boolean은 기본적으로 깊은 복사 방식으로 동작한다.

let original = 1;
let copied = original;
copied += 2;

console.log(original, copied); // 1 3

원본 original은 변하지 않고, copied만 변경된다.

얕은 복사 (Shallow Copy)

• 얕은 복사는 복사본과 원본이 같은 참조(reference)를 공유하는 복사 방식이다.
• TypeScript에서 **객체(Object)와 배열(Array)**는 기본적으로 얕은 복사 방식으로 동작한다.

const originalArray = [5, 3, 9, 7];
const shallowCopiedArray = originalArray;

shallowCopiedArray[0] = 0;

console.log(originalArray, shallowCopiedArray); 
// [0, 3, 9, 7] [0, 3, 9, 7]

배열 originalArray가 shallowCopiedArray와 같은 참조를 공유하기 때문에, 하나를 수정하면 다른 하나도 영향을 받는다.

전개 연산자(…)를 활용한 복사

• **전개 연산자(...)**를 사용하면 1차원 배열에 한해 깊은 복사처럼 사용할 수 있다.

const oArray = [1, 2, 3, 4];
const deepCopiedArray = [...oArray];

deepCopiedArray[0] = 0;

console.log(oArray, deepCopiedArray); 
// [1, 2, 3, 4] [0, 2, 3, 4]

원본 배열은 그대로 유지되고, 복사본만 변경된다.

주의: 객체가 중첩된 배열이나 중첩 객체까지 완전히 복사하려면 전개 연산자만으로는 깊은 복사가 되지 않다.
이 경우 JSON.parse(JSON.stringify(obj)) 등을 사용한다.

정리