minstudio

얕은 복사와 깊은 복사 (Shallow vs Deep Copy)

객체와 배열은 참조 타입(Reference Type)이므로 단순히 =로 할당하면 원본이 같이 변경되는 대참사가 일어납니다. 이를 막기 위한 복사 기술을 알아봅니다.

const original = {
  name: "Minsu",
  hobbies: ["독서", "게임"]
};

// ❌ 1. 참조 할당 (위험!)
const refCopy = original;
refCopy.name = "Chulsoo"; 
console.log(original.name); // "Chulsoo" (원본도 바뀜!)

// ⚠️ 2. 얕은 복사 (Shallow Copy - 1단계만 복사)
const shallowCopy = { ...original };
shallowCopy.name = "Alice";
console.log(original.name); // "Chulsoo" (원본 안 바뀜)
shallowCopy.hobbies.push("영화");
console.log(original.hobbies); // ["독서", "게임", "영화"] (내부 배열은 여전히 참조됨!)

// ✅ 3. 깊은 복사 (Deep Copy - 완벽한 복제)
// 모던 브라우저에서는 structuredClone() 사용 가능
const deepCopy = structuredClone(original);
// 구형 브라우저 대안: JSON.parse(JSON.stringify(original))
deepCopy.hobbies.push("코딩");
console.log(original.hobbies.includes("코딩")); // false (원본 완전 보호됨)
실행 결과
얕은 복사와 깊은 복사 (Shallow vs Deep Copy) | Minstudio