자바스크립트 객체 복제 방법

Object.assign(target, ...sources) 메서드를 사용하면 첫번째 인자로 두번째 인자의 속성들을 복사할 수 있음.

따라서 위와 같이 언뜻 보면 원본과 복사본이 서로 영향을 주지 않고 변경이 가능한 것 처럼 보인다.

하지만 단순 속성이 아닌 객체나 배열 속성을 변경해보면 아래와 같이 여전히 서로 영향을 준다는 것을 알 수 있음.

 

객체를 하나의 트리 구조로 봤을 때 최상위 레벨의 속성만 복사를 하는 

Object.assign(target, ...sources) 메서드의 동작 방식에 있다.

객체 트리의 최말단 노드까지 복사되지 않기 때문에 이러한 복제 방식을 얕은 복제(Shallow Clone)라고 일컽는다.

 

56번 line을 보면 의도적으로 깊은 복제 대신에 얕은 복제를 하는 경우도 있을 수 있다.

얕은 복제는 아래와 같이 ...(Spread Operator)를 활용해서 더 간결하게 처리할 수 있습니다.

 

주의해야 할 부분은

json에는 함수 데이터 타입이 없기 때문에 함수 속성들은 누락된다는 것과

또 객체 트리 내에 순환 참조가 있는 경우, stringify() 메서드에서 TypeError: Converting circular structure to JSON이라는 오류가 발생한다는 문제도 있다.

 

자바스크립트 객체를 완벽하게 복제하는게 쉽지 않다.

결국 깊은 복제를 하려면 재귀적으로 객체 트리를 따라서 말단 노드까지 모두 복사를 해주는 함수가 필요하다.

직접 코드를 짜보면 대략 90번 line에서부터 시작해서 114번 line까지 비슷하게 나옴.

 

( lodash라는 외부 라이브러리의 cloneDeep(obj)이라는 메서드를 사용할 수 도 있음.)

참고 : https://www.daleseo.com/js-objects-clone/

자바스크립트 객체 복제 방법