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

---

자바스크립트의 값 타입 구조

자바스크립트의 값은 크게 두 종류로 나뉜다.

원시값 (Primitive Value)

Number, String, Boolean, null, undefined 등

값 자체가 변수에 저장

복사 시 완전히 새로운 값이 생성됨

let a = 'a';
let b = a;
b = 'c';

console.log(a); // 'a'
console.log(b); // 'c'

• 서로 영향을 주지 않는다
• 원시값의 복사는 항상 깊은 복사

참조값 (Reference Value)

Object, Array, Function 등

실제 데이터는 별도의 메모리 공간에 저장

변수에는 그 메모리의 주소(참조) 가 저장됨

const a = { one: 1, two: 2 };
const b = a;

b.one = 3;

console.log(a); // { one: 3, two: 2 }
console.log(b); // { one: 3, two: 2 }

• a와 b는 같은 객체를 가리킴
• 이것이 얕은 복사

---

얕은 복사

얕은 복사란

객체를 복사했지만, 내부 객체는 여전히 같은 참조를 공유하는 상태

즉, 겉보기에는 복사된 것 같지만

내부를 수정하면 원본도 함께 변경됨

대표적인 얕은 복사 방법들

1. Array.prototype.slice()

const arr = [1, 2, 3];
const copy = arr.slice();

1차원 배열 + 원시값만 있을 경우
→ 깊은 복사처럼 보임

중첩 배열 / 객체가 있으면 얕은 복사

const original = [[1], [2]];
const copy = original.slice();

copy[0][0] = 99;

console.log(original); // [[99], [2]]

2. Object.assign()

const obj = {
  a: 1,
  b: { c: 2 }
};

const copy = Object.assign({}, obj);
copy.b.c = 99;

console.log(obj.b.c); // 99

객체 자체는 새로 만들어짐

내부 객체는 같은 참조 유지

3. Spread 연산자 (...)

const copy = { ...object };

Object.assign() 과 동일한 동작

내부 객체는 여전히 얕은 복사

---

깊은 복사

깊은 복사란, 객체 안에 객체가 있어도
모든 참조가 완전히 분리된 상태

즉, 복사본을 수정해도 원본은 절대 영향받지 않음

깊은 복사의 필요성

객체를 복사하는 목적은 보통 이거다:

“원본 데이터는 유지하면서 복사본을 자유롭게 가공하고 싶다”

따라서 필요에 따라 깊은 복사도 유용하게 쓰일 수 있다.

그리고 여기서 중요한 포인트를 짚어 보자면,
자바스크립트에서 객체를 복사했다면 기본값은 얕은 복사이며, 깊은 복사는 의도적으로 구현해야 한다.