[JavaScript] 얕은 복사와 깊은 복사

copyUser객체에 user객체를 바로 할당하게 되면 객체가 가리키는 메모리 주소가 같기 때문에

두 객체의 age가 동일하게 변경되는 것을 볼 수 있다.

 

얕은 복사와 깊은 복사로 해결하자!

 

 

📌 얕은 복사(Shallow copy)

빈 객체를 만들어 user객체를 넣거나, 빈 객체에 전개 연산자를 사용하여 값을 넣어준다.

 

그러나 여기서 user.emails는 배열 데이터고, 참조형 데이터이다.

따로 복사 처리를 한 적이 없고, 복사 처리한 것은 user 객체 데이터 하나이기 때문에

새로운 참조형 데이터인 user.emails 배열 데이터는 같은 메모리 주소를 공유하고 있다.

 

이처럼 얕은 복사는 표면만 복사하는 것이기 때문에

내부에 참조형 데이터가 있다면 복사되지 않는 것을 볼 수 있다.

이것을 해결하기 위한 것이 깊은 복사이다!

 

 

📌 깊은 복사(Deep copy)

깊은 복사는 자바스크립트로 직접 구현하기가 매우 복잡하다.

그래서 lodash 패키지를 활용하여 구현하기로 했다!

 

1. lodash 패키지를 설치해준다.

npm i lodash

 

2. lodash 패키지를 import 해준다.

_ 언더바 기호를 하나의 객체 데이터라고 보면 된다.

import _ from 'lodash'

 

3. cloneDeep이라는 메서드를 사용해 깊은 복사를 해준다.

참조 데이터 내부에 참조형 데이터가 있어도 깊게 복사되는 것을 것을 볼 수 있다.

 

 

📌 lodash cloneDeep 공식문서 참고

Lodash Documentation