JavaScript 얕은 복사와 깊은 복사 차이

javascript · 7월 23일 · 15 min read

JavaScript의 객체를 다른 변수에 대입한다고 복사본이 생기지는 않는다.
얕은 복사는 최상위 구조만 새로 만들고 중첩 객체의 참조는 공유한다.
깊은 복사는 중첩된 값까지 독립적인 구조로 만든다.
어떤 방식이 필요한지는 중첩 객체를 공유해도 되는지에 따라 달라진다.

대입과 복사의 차이

객체를 대입하면 새 객체가 아니라 기존 객체를 가리키는 별칭이 생긴다.
두 변수는 같은 객체를 참조하므로 어느 쪽에서 속성을 바꾸든 동일한 결과를 본다.

const original = {
  profile: { name: 'Kim' },
}

const alias = original

alias.profile.name = 'Lee'

console.log(original.profile.name) // 'Lee'
console.log(alias === original) // true

복사 여부를 확인할 때는 최상위 객체와 중첩 객체의 일치 비교를 따로 보는 편이 좋다.

얕은 복사의 참조 구조

객체 spread와 Object.assign()은 새 최상위 객체를 만든다.
배열 spread, slice(), concat(), Array.from()도 새 배열을 만들지만 중첩 객체는 공유한다.

const original = {
  active: true,
  profile: { name: 'Kim' },
}

const copy = { ...original }

copy.active = false
copy.profile.name = 'Lee'

console.log(original.active) // true
console.log(original.profile.name) // 'Lee'
console.log(copy !== original) // true
console.log(copy.profile === original.profile) // true

최상위 속성을 재할당하는 작업은 원본에 영향을 주지 않는다.
공유된 중첩 객체의 속성을 바꾸면 원본에도 변경이 보인다.

깊은 복사와 structuredClone

structuredClone()은 구조화 복제 알고리즘으로 값의 깊은 복사본을 만든다.
일반 객체와 배열 외에도 Date, Map, Set, 순환 참조 같은 여러 값을 처리할 수 있다.

const original = {
  settings: { theme: 'dark' },
  visitedAt: new Date('2026-07-23T00:00:00Z'),
  tags: new Set(['javascript']),
}

original.self = original

const copy = structuredClone(original)

console.log(copy.settings === original.settings) // false
console.log(copy.visitedAt instanceof Date) // true
console.log(copy.tags instanceof Set) // true
console.log(copy.self === copy) // true

복사본의 중첩 객체를 변경해도 원본의 동일한 중첩 객체에는 영향을 주지 않는다.
그러나 structuredClone()이 모든 JavaScript 값의 의미를 그대로 재현하는 범용 복제 함수는 아니다.

JSON 복사 방식의 한계

JSON.stringify() 결과를 JSON.parse()하는 패턴도 중첩된 일반 객체의 참조를 분리할 수 있다.
하지만 이 방식은 JavaScript 객체 복사가 아니라 JSON으로 직렬화했다가 다시 읽는 과정이다.

const original = {
  createdAt: new Date('2026-07-23T00:00:00Z'),
  tags: new Set(['javascript']),
  note: undefined,
}

const copy = JSON.parse(JSON.stringify(original))

console.log(copy)
// { createdAt: '2026-07-23T00:00:00.000Z', tags: {} }

Date는 문자열로 바뀌고 Set과 Map의 항목은 기본 설정에서 보존되지 않는다.
객체의 undefined, 함수, Symbol 값은 생략되며 BigInt와 순환 참조는 오류를 발생시킨다.
JSON으로 표현할 수 있는 데이터라는 제약이 확실할 때만 사용해야 한다.