[Javascript] - 얕은 복사와 깊은 복사

 

 

 

 

* 얕은 복사 

- 얕은 복사는 참조 복사라고도 하는데 이는 참조 값의 복사를 나타내기 때문이다 

 

 

위 예제를 보면 obj 객체를 새로운 newObj 객체에 할당하였으며 이를 참조 할당이라고 부른다 

복사 후 newObj 객체의 value 값을 변경하였더니 기존의 obj.value 값도 같이 변경된 것을 확인할 수 있다 

두 객체를 비교해도 true가 나온다.

 

이렇게 자바스크립트의 참조 타입은 얕은 복사가 된다고 볼 수 있으며 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값을 전달하여 결국 한 데이터를 공유하는 것이다.

 

깊은 복사 

 

깊은 복사는 값 복사라고도 한다 이는 값 자체를 복사하기 때문이다.

 

 

변수 a를 새로운 변수 b에 할당하였고 b값을 변경하여도 기존의 a값은 변경되지 않는다.

두 값을 비교하면 false가 출력되며 서로의  값은 단독으로 존재한다는 것을 알 수 있다.

이렇게 자바스크립트의 원시 타입은 깊은 복사가 되며 이는 독립적인 메모리에 값 자체를 할당하여 생성하는 것이라고 볼 수 있다 .

 

 

객체의 깊은 복사 (불완전)

 

  1 Object.assign()

  

  생성할 객체 복사할 객체 메서드의 첫 번째 파라미터로 빈 객체를 넣어주며 두번째 파라미터로 할당할 객체를 넣어주면    된다.

 

 

새로운 newObj 객체를 Object.assign()  메서드를 사용하여 생성하였으며 newObj.a 값을 변경하여도 기존의 Obj는 변하지 않는다 서로의 객체를 비교해도 false가 뜨며 서로 참조값이 다르다는 것을 알 수 있다.

 

 

하지만 Object.assign() 메서드는 깊이가 2이상인 객체에서는 깊은 복사가 이루어지지 않는다.

위 예제처럼 2차원 객체 obj 를 newObj 에 복사하고 newObj.b.c 의 값을 변경하였다 기존의 obj 객체를 출력해보면 newObj.b.c의 값처럼 3으로 변경된 것을 확인 할 수 있다.

복사된 하위 객체도 결국 객체이기 때문에 얕은 복사가 이루어진 것이다 이는 Object.assign() 메서드의 한계이며 전개 연산자를 이용한 객체 복사에도 같은 문제가 발생한다.

 

 

하지만 Object.assign() 메서드는 깊이가 2 이상인 객체에서는 깊은 복사가 이루어지지 않는다.

- 위 예제처럼 2차원 객체 obj를 new Obj 에 복사하고 newObj.b.c 의 값을 변경하였다 기존의 obj 객체를 출력해보면 NewBbj.b.c 의 값처럼 3으로 변경된 것을 확인 할 수 있다.

 

복사된 하위 객체 도 결국 객체이기 때문에 얕은 복사가 이루어진 것이다 이는 Object.assign() 메서드의 한계이며 전개 연산자를 이용한 객체 복사에도 같은 문제가 발생한다.

 

2 전개 연산자

 

-  Object.assign() 과 마찬가지로 전개 연산자를 활용하면 객체의 깊은 복사가 가능하다.

 

 하지만 Object.assign() 메서드와 마찬가지로 깊이가 2 이상인 객체는 얕은 복사가 되는 것을 확인 할 수 있다.

 

객체의 깊은 복사 (완벽)

 

1 커스텀 재귀 함수 

 

 

 

위 예제처럼 재귀 함수를 통해 객체의 완벽한 깊은 복사를 구현 할 수 있다.

 

2 lodash 모듈의 cloneDeep()

 

 

 

 

위 예제처럼 라이브러리를 이용하면 손쉽게 깊은 복사를 구현할 수 있다.