코어자바스크립트 스터디 진행 도중 해당 개념에 대해 정리하게 되었다. 스터디 레포에 올려두었지만 여기에도 추가해둔다.
교재에서는 스프레드 오퍼레이터를 사용한 깊은 복사에 대해 다루지 않지만 스터디를 진행하면서 해당 기능을 사용한 깊은 복사에 대한 이야기가 나와서 이슈로 간단하게 정리했습니다.
스프레드 오퍼레이터를 사용하면 간단하게 깊은 복사를 구현할 수 있다고 알고 계신 분들이 많은데 사실 이 방법은 모든 참조형 데이터에 적용할 수 있는 완벽한 깊은 복사가 아닙니다.
depth가 1단계로 이루어진 참조형 데이터에서는 이 기능을 사용하여 깊은 복사가 가능하지만 depth가 2단계 이상인 데이터는 얕은 복사로 진행이 됩니다.
예시 코드도 같이 첨부합니다.
depth가 1단계인 경우에는 복사본의 데이터를 변경해도 데이터가 이미 완전히 다른 주소를 바라보기에 깊은 복사가 진행된 것을 확인할 수 있습니다.
반면 위와 같이 depth가 2단계 이상인 객체의 복사본 내부의 참조 데이터의 값을 변경하면 원본도 같이 변경됩니다.
예시에서는 복사본인 objDeep2의 data라는 프로퍼티에 접근하여 c 프로퍼티의 value를 newThing으로 변경했습니다. 이후 두 변수를 콘솔로 확인하면 원본인 objDeep1의 data속 c의 value도 newThing으로 변경된 것을 확인할 수 있습니다.
이처럼 스프레드 오퍼레이터를 사용한 깊은 복사는 1단계로 이루어진 객체에서 사용하시길 권장합니다.
물론 다음과 같이 내부 참조형 데이터를 한번 더 전개하는 로직을 추가해 깊은 복사를 구현하는 방법이 있지만 그 이상의 depth에서 같은 방법을 사용하여 완전히 새로운 데이터를 생성하는 방법은 권하지 않습니다.
repository issue: https://github.com/Coding-Village-Protector/core-js/issues/6
