JS deep copy(깊은 복사) vs shallow copy(얕은 복사)

시작하며

js에서의 deep copy와 shallow copy 차이와 발생하는 경우를 정리하겠다.

deep copy와 shallow copy의 차이점

deep copy는 변수 값을 복사해 새로운 메모리에 할당하는 복사이고, shallow copy는 변수의 메모리 주소를 복사해 같은 메모리를 가리키는 변수를 생성하는 복사이다.

그러므로 deep copy는 복사된 변수를 수정해도 원본 변수에는 영향이 없고, shallow copy는 복사된 변수를 수정 시 동일하게 원본 변수도 수정된다. shallow copy는 다른 변수명으로 결국 동일한 데이터를 참고하는 것이다.

	deep copy	shallow copy
복사 대상	값	메모리 주소
복사된 변수 수정 시	원본 변수 영향 x	원본 변수 영향 o

 

언제 deep copy, shallow copy가 일어나는지?

deep copy와 shallow copy가 일어나는 기준은 js의 자료형에 따라 나뉜다.

ECMAScript 기준으로 js는 크게 2가지 분류로, 총 7개의 자료형을 가진다.

1. 기본 자료형(Primitive) 타입
   • Boolean
   • Null
   • Undefined
   • Number
   • String
   • Symbol
2. 객체(Object) 타입

세부적인 타입은 다른 포스팅에서 정리하고, 여기서는 큰 분류인 기본 자료형 타입과 객체 타입의 차이점에만 신경써보자.

왜냐하면 기본 자료형 타입은 deep copy가 일어나고, 객체 타입은 shallow copy가 일어나기 때문이다.

숫자나 문자 등의 기본 자료형은 deep copy가 일어나고, 객체나 배열 등은 shallow copy가 일어난다.

 

그래서 deep copy와 shallow copy를 왜 구분해야 하나?

원본 객체와 다른 새로운 객체로 복사해 다루려고 의도한 상황에서 원본 객체를 참조하게 되어 의도치 않은 원본 객체가 변경되는 경우가 있을 수 있다. 또한 객체를 함수 인자로 전달하는 경우 원본 객체가 전달되는데, 이때 일반 할당 연산(=)으로는 항상 원본 객체를 참조하게 되어 새 객체를 참조하기 위해서는 다른 할당 방법이 필요하다.

 

다음은 deep copy로 다루어야 하는 예시 케이스이다.

 

ex) 한 객체의 정보가 변경됨에 따라 다른 배열에 push 해서 history를 기록하고 싶은 상황.

 

이러한 경우 shallow copy가 아닌 deep copy로 원본 객체와 별개로 객체들을 관리해야 한다. 변경되는 객체는 하나이고, 복사된 객체는 이를 참조하면 안 되는 상황이다.

그런데 js에서 객체 복사는 shallow copy라고 했는데 어떻게 deep copy를 할 수 있을까?

js에서 deep copy를 할 수 있는 여러 가지 방법은 js deep copy 방법 포스트에서 정리하였다.

 

마치며

객체를 제외한 모든 자료형은 기본적으로 deep copy로 할당된다. 그러므로 객체를 복사할 때 주의가 필요한데, 기본은 shallow copy가 되고 필요에 따라서 deep copy를 사용해야 한다.

객체를 deep copy 하는 방법은 js deep copy 방법 포스트에서 정리하였다.