[JavaScript] 얕은 복사(Shallow copy)와 깊은 복사(Deep copy)

얕은 복사 vs 깊은 복사

한마디로 정리하면 얕은 복사는 객체의 참조값(메모리 주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사한다.

얕은 복사와 깊은 복사를 이해하기에 앞서 데이터 타입에 대한 이해가 필요하다.

 

데이터 타입

원시형의 변수 할당 (이미지 출처: https://choar816.tistory.com/154)

자바스크립트에서 모든 데이터는 원시형과 참조형으로 두 가지 데이터 타입이 존재하는데, 원시형(기본형, Primitive type)은 기본 자료형(단순한 데이터)를 의미한다. number, string, boolean, null, undefined 등이 해당한다. 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장된다. 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작된다.

객체의 변수 할당 (이미지 출처: https://choar816.tistory.com/154)

참조형(Reference type)은 여러 자료형으로 구성되는 메모리에 저장된 객체를 의미한다. object(array, function, date, RegExp, ...), symbol 등이 해당한다. 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조 값(위치 값)을 저장하게 된다. 그래서 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체의 참조를 조작하는 것이다.

 

얕은 복사와 깊은 복사 비교 (이미지 출처: https://choar816.tistory.com/154)

얕은 복사와 깊은 복사 비교

얕은 복사	깊은 복사
객체의 참조값을 메모리 주소에 저장한다.	객체 값의 복사본을 저장한다.
원본 객체의 새로운 & 복사된 객체에 대한 변경 사항을 반영한다.	원본 객체의 새로운 & 복사된 객체에 대한 변경사항을 반영하지 않는다.
원본 객체의 복사본을 저장하고, 객체에 대한 참조를 가리킨다.	원본 객체의 복사본을 저장하고, 객체도 재귀적으로 복사한다.
속도가 더 빠르다.	속도가 비교적 느리다.