자바스크립트 Shallow copy vs Deep copy

자바스크립트에서 기존에 존재하는 객체를 복사해서 새로운 무언가를 만들고 싶을 때가 있다.

하지만 그냥 새로운 변수를 선언해서 기존의 객체를 대입하면..

새로운 변수를 변형했을 때 기존의 값까지 영향을 받아 상황에 따라 골치아파질 수 있다..

이건 후술할 shallow copy가 된다.

 

Shallow copy는 원본의 값을 '참조'하는 형태로 복사한다. 따라서 복사한 값의 형태가 바뀌면 그 원본의 값도 영향을 받는다.

Deep copy는 원본의 값을 정말 그 값만 복사해오고, 원본과는 완전히 별개의 객체가 된다. 이를 수정하거나 해도 원본의 값은 영향을 전혀 받지 않는다.

ex)

//JavaScript 환경에서..

obj = {a: 1, b: 2};

new_obj = obj;

new_obj.a = 3;

console.log(obj.a);    //3

 

JavaScript에서는 객체를 deep copy하기 위해 lodash의 ._clone()이나 ._cloneDeep()을 많이 이용한다.

clone()은 객체를 deep copy하지만, 내부 객체까지는 deep copy하지 못한다.

ex)

obj = {a: 1, b: 2,  c: {2, 4}};

clone_obj= ._clone(obj);

clone_obj.c === obj.c;    //true

 

때문에 내부 객체가 포함되어있다면 ._cloneDeep()을 쓴다.

obj = {a: 1, b: 2,  c: {2, 4}};

clone_obj= ._cloneDeep(obj);

clone_obj.c === obj.c;   //false

 

추가로 shallow copy는 deep copy에 비해 상대적으로 속도가 빠르다.

 

Shallow copy와 Deep copy를 상황에 따라 적절히 섞어서 쓰도록 하자.