[JS] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

2가지 복사에 대해 알아보기 전에 변수가 할당되는 과정을 메모리관점에서 한번 볼 필요가 있다

우선 흔히 사용되는 var x = 5;라는 할당식은 그냥 단순히 메모리에 x의 자리가 할당되고 그 안에 5라는 값이 추가된 것으로 볼 수있지만

사실은 그렇지 않다

- 메모리 공간 확보 후 식별자 x를 부여

- 다른메모리 공간 확보 후 5라는 값을 부여

- 5라는 값이 들어있는 주소를 x의 값으로 부여

 

이러한 과정을 통해 할당된다 이를 기본형데이터라 하고 참조형 데이터(객체)는 여기서

참조형 데이터 안에 있는 기본형 데이터를 저장하기 위해 기본형 데이터의 주소를 담은 공간을 새로 생성한다는 차이가 있다

 

얕은 복사와 깊은 복사가 존재하게 된 배경지식에 대한 설명이였고 이제 이 2가지 복사에 대해 간단하게 알아보겠다

 

- 얕은 복사

원본 객체의 최상위 수준의 속성을 복사하여 새로운 객체를 생성하고, 내부에 있는 객체나 배열은 참조(주소)를 공유한다. 따라서 내부 객체나 배열이 변경되면 복사본에도 영향을 미친다.

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

const shallowCopy = { ...originalObject };

// 내부 객체는 참조를 공유하므로 영향을 미침
shallowCopy.b.c = 3;

console.log(originalObject.b.c); // 3

- 깊은 복사

원본 객체 및 그 내부의 모든 객체를 재귀적으로 새로운 객체로 복사한다. 즉, 새로운 객체는 완전히 독립적인 복사본이 되며, 원본 객체의 내부 구조 변경이 복사본에 영향을 미치지 않는다

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

const deepCopy = JSON.parse(JSON.stringify(originalObject));

// 내부 객체를 완전히 복사하므로 영향 없음
deepCopy.b.c = 3;

console.log(originalObject.b.c); // 2

JSON.parse(JSON.stringify())는 깊은복사 방법중 1가지이고 간편하게 사용가능하다

JSON.stringify()는 javascript값이나 객체를 JSON문자열로 변환하고 JSON.parse()는 JSON문자열의 구문을 분석하고 그 결과에서 javascript값이나 객체를 생성한다. 즉, 객체를 문자열로 변환 후 다시 객체 형태로 만든다. 문자열로 변환 후 다시 객체로 만들면 원본 객체와의 참조가 모두 끊어진다.

정리

얕은 복사는 최상위 한 단계까지만 복사하고, 깊은 복사는 객체에 중첩된 객체까지 모두 복사한다. 얕은 복사와 깊은 복사 모두 복사한 대상에 대해서 새로운 객체를 생성하여 기존 객체에는 영향을 주지 않는다. 하지만 얕은 복사와 깊은 복사는 어느 수준까지 복사하느냐의 차이를 가진다. 얕은 복사를 하면 한 단계만 복사하기 때문에 중첩된 객체에 대해서는 서로 영향을 주고, 깊은 복사는 중첩된 객체 역시 별개의 값으로서 서로 영향을 주지 않는다.

 

주의 사항

깊은 복사는 재귀적으로 내부 구조를 탐색하며 복사해서, 성능면에서 얕은 복사보다 느리다

또한 JSON.stringify나 JSON.parse를 활용한 방법은 모든 데이터 타입을 다 처리하지는 못하고 함수나 특별한 객체 등은 처리하지 못할 수있기때문에 외부 라이브러리를 사용하는것이 더 나은 방법일 수도 있다