JavaScript에서 객체를 복사할 때 참조 공유 여부에 따라 얕은 복사와 깊은 복사로 나뉩니다.
Spread와 Object.assign은 1단계만 복사하는 얕은 복사를 수행합니다. 중첩 객체의 완전한 독립을 위해서는 structuredClone이나 JSON.parse(JSON.stringify())를 사용합니다. 원시 타입은 값이 복제되지만, 참조 타입은 메모리 주소가 공유됩니다.
각 복사 방식을 선택하고 원시값/참조값 변경 시 원본에 미치는 영향을 확인하세요.
const original = {
name: 'Kim',
address: { city: 'Seoul' }
};
// Spread 연산자 (얕은 복사)
const copy1 = { ...original };
// Object.assign (얕은 복사)
const copy2 = Object.assign({}, original);
copy1.name = 'Lee'; // 원본 영향 없음 ✓
copy1.address.city = 'Busan'; // 원본도 변경됨 ✗
console.log(original.address.city); // 'Busan' ← 문제!실제 코드로 동작 원리를 확인하세요.
// Spread 연산자 (얕은 복사)
const original = { a: 1, b: { c: 2 } };
const copy = { ...original };
copy.a = 10; // 원본 영향 없음 (원시값)
copy.b.c = 20; // 원본도 변경됨! (참조 공유)
console.log(original.b.c); // 20
// Object.assign (얕은 복사)
const copy2 = Object.assign({}, original);
// 동일한 동작: 1단계만 복사
// 배열도 동일
const arr = [1, [2, 3]];
const arrCopy = [...arr];
arrCopy[1].push(4);
console.log(arr[1]); // [2, 3, 4] ← 원본 변경!JSON.parse(JSON.stringify())는 Date, RegExp, 함수, undefined, Map, Set 등의 타입을 올바르게 처리하지 못하며, 순환 참조 시 에러가 발생합니다.structuredClone은 Date, Map, Set, ArrayBuffer 등을 올바르게 복사하고, 순환 참조도 처리합니다. 단, 함수와 DOM 노드는 복사할 수 없습니다. 모던 브라우저에서 지원되며, 깊은 복사의 권장 방식입니다.