[JS] 자바스크립트의 깊은 복사와 얕은 복사

컴퓨터 프로그래밍에서 깊은 복사는 새 메모리 주소로 새 객체를 만들고 원래 객체의 속성 값을 새 객체에 복사하는 객체의 복사본이다. 반면 얕은 복사는 새 메모리 주소로 새 객체를 생성하지만 해당 속성에 대해 원본 객체와 동일한 객체(주소)를 참조하는 객체의 복사본이다.

다음은 자바스크립트를 사용하여 깊은 복사와 얕은 복사를 구현한 예제다.

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

// original 객체의 얕은 복사본
const shallowCopy = { ...original };

// original 객체의 깊은 복사본
const deepCopy = JSON.parse(JSON.stringify(original));

// original 객체의 속성 수정
original.a = 10;

console.log(original); // { a: 10, b: { c: 2 } }
console.log(shallowCopy); // { a: 1, b: { c: 2 } }
console.log(deepCopy); // { a: 1, b: { c: 2 } }

// original 객체의 중첩된 속성 수정
original.b.c = 20;

console.log(original); // { a: 10, b: { c: 20 } }
console.log(shallowCopy); // { a: 1, b: { c: 20 } }
console.log(deepCopy); // { a: 1, b: { c: 2 } }

위 예제에서 `original`은 `a`와 `b`라는 두 가지 속성이 있는 객체다. `b` 속성은 그 자체로 속성 `c`를 가진 객체다.

 

`shallowCopy`는 `original` 객체에 확산(Spread) 연산자(`...`)를 사용하여 만든 얕은 복사본으로 `original`과 동일한 속성 및 값을 가진 새 객체를 포함하지만 속성 `b`에 대한 객체는 `original`과 같은 주소를 참조하는 동일한 객체이다.

 

예제에서 `deepCopy`는 `original` 객체의 깊은 복사본으로 `original`과 동일한 속성 및 값을 가진 새 객체를 포함하고 있으며, 속성 `b`에 대한 객체도 `original`과 동일한 속성 및 값을 가진 새 객체이다. 깊은 복사는 해당 속성이 다른 객체에 대한 참조인 경우에도 모든 속성에 대해 새 객체를 만드는 객체의 복사본이다. 즉, 깊은 복사본은 `original` 객체와 완전히 독립적이며 복사본을 변경해도 `original`에 영향을 미치지 않는다.

`JSON.parse(JSON.stringify(original))` 메서드는 객체의 깊은 복사본을 만드는 편리한 방법이지만 몇 가지 제한 사항이 있다는 점에 유의해야 한다. 이 방식은 단순한 객체에만 작동하며 깊은 복사 함수나 RegExps, Maps, Sets 및 기타 일부 객체 유형에 대해서는 올바르게 작동하지 않는다. 보다 강력한 솔루션을 위해 Lodash(아래 링크 참고)와 같은 라이브러리 또는 이러한 엣지 케이스를 처리할 수 있는 커스텀 함수를 사용해야 할 수도 있다.

 

https://lodash.com

Lodash