Nested Object 및 고차원 배열 Deep Copy

얕은 복사(참조)

const a = [1, {a: 'a'}, 2];
const b = a;

b[1].a = 'b';


console.log(a)
//[1, {a: 'b'}, 2];

JS 엔진의 구동원리를 공부했다면, 위의 상황이 조금은 이상해보이더라도 a와 b의 값이 함께 바뀌는 것은 이해할만 하다.
하지만 아래의 상황은 조금 이상하다.

---

깊은 복사(spread 또는 map)

얕은 복사를 할 경우, 의도치 않게 원본값이 변할 수 있다. 따라서, 원본값의 안전을 보장하기 위해 spread 연산자 및 map을 이용한 깊은 복사를 선호한다.

하지만, 아래의 결과는 우리의 예측에서 벗어난다.

const a = [1, {a: 'a'}, 2];
const b = [...a]; //또는 const b = a.map((v) => v);

b[1].a = 'b';

console.log(a)
//[1, {a: 'b'}, 2];

spread operator나 Array의 map은 depth 1까지 깊은 복사를 진행한다.
따라서, 고차원 배열이나 중첩 객체(Nested Object)를 Deep copy하고 싶은 경우, 다른 방법을 사용해야 한다.

---

structuredClone을 이용한 해결책

고차원 배열 Deep Copy

const a = [1, {a: 'a'}, 2];
const b = structuredClone(a);

b[1].a = 'b';

console.log(a)
//[1, {a: 'a'}, 2];

Nested Object Deep Copy

사례

Solution

const user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

const clone = structuredClone(user)
clone.sizes.width++

console.log(clone.sizes.width) // 51
console.log(user.sizes.width) // 50

> MDN
> JavaScript Info