얕은 복사와 깊은 복사란 무엇인가요?

객체는 참조 타입이라 단순히 =로 대입하면 같은 객체를 공유합니다(객체 참고). 그래서 “원본과 독립된 사본”을 만들려면 복사를 해야 하는데, 어디까지 복사하느냐에 따라 얕은 복사와 깊은 복사로 나뉩니다.

얕은 복사 (shallow copy)

객체의 최상위 프로퍼티만 복사합니다. 값이 원시값이면 복사되지만, 값이 객체(중첩 객체)면 그 참조만 복사되어 원본과 사본이 같은 중첩 객체를 공유합니다.

const original = { name: '단북', info: { age: 3 } };
 
const copy = { ...original }; // spread — 얕은 복사
// const copy = Object.assign({}, original); // 동일하게 얕은 복사
 
copy.name = '복제';
console.log(original.name); // '단북' — 최상위는 독립적
 
copy.info.age = 99;
console.log(original.info.age); // 99 — 중첩 객체는 공유됨!

{ ...obj }, Object.assign, Array.prototype.slice, [...arr]는 모두 얕은 복사입니다.

깊은 복사 (deep copy)

중첩된 모든 단계까지 새로 복사해, 원본과 완전히 분리된 사본을 만듭니다. 표준 API인 structuredClone을 쓰면 됩니다.

const original = { name: '단북', info: { age: 3 } };
const copy = structuredClone(original);
 
copy.info.age = 99;
console.log(original.info.age); // 3 — 중첩 객체도 독립적

structuredClone은 깊은 복사를 수행하고 순환 참조도 처리합니다. 다만 함수나 DOM 노드처럼 직렬화할 수 없는 값이 포함되면 DataCloneError가 발생하며, 프로토타입 체인이나 getter/setter는 복제되지 않습니다(평범한 데이터로 복사됨).

JSON.parse(JSON.stringify(obj))도 깊은 복사에 흔히 쓰이지만, undefined·함수·Symbol은 사라지고 Date는 문자열로 바뀌며 순환 참조에서 에러가 나는 한계가 있어 structuredClone이 더 안전합니다.

const a = { list: [1, 2] };
const b = { ...a };
b.list.push(3);