05. 불변 객체 / 얕은 복사(shadow copy)와 깊은 복사(deep copy)

아래 내용은 '코어 자바스크립트' 정재남 저 | 위키북스의 내용을 발췌한 것으로

 자세한 내용은 해당 서적을 확인 바랍니다.

 

어떤 객체를 복사할 때 객체 내부의 모든 값을 복사해서 완전히 새로운 데이터를 만들고자 할 때,

객체의 프로퍼티 중에서 그 값이 기본형 데이터 혹은 참조형 데이터냐에 따라 복사 깊이를 달리해야 한다.

 

1. 기본형 데이터: 그대로 복사

2. 참조형 데이터: 객체의 내부의 프로퍼티를 다시 복사

 

이 과정을 참조형 데이터가 있을때마다 재귀적으로 수행해야만 비로소 Deep Copy가 되는 것이다.

 

3번째 줄에서 target이 객체인 경우에는 내부 프로퍼티들을 순회하며 copyObjectDeep 함수를 재귀적으로 호출하고,

객체가 아닌 경우에는 8번째 줄에서 target을 그대로 지정하게 했다. 

 

객체를 복사한 다음에 원본과 사본이 서로 완전히 다른 객체를 참조하게 하여 어느 쪽의 프로퍼티를 변경하더라도 다른 쪽에 영향을 주지 않게 하는것이 핵심이다.

 

ES5 의 getter/setter를 복사하는 방법은 ES6의 object.getOwnPropertyDescriptor 또는 ES2017의 Object.getOwnPropertyDescriptors 외에는 마땅한 방법이 없다.

 

추가로 간단하게 깊은 복사를 처리할 수 있는 다른 방법이 있다.

객체를 JSON 문법으로 표현된 문자열로 전환했다가 다시 JSON 객체로 바꾸는 방법이다.

 

이 방법은 단순함에도 불구하고 잘 동작한다. 단, Method나 숨겨진 프로퍼티인 __proto__ 그리고 getter/setter 등과 같이

JSON으로 변경할 수 없는 프로퍼티들은 모두 무시한다. httpRequest로 받은 데이터를 저장한 객체를 복사할 때 등 순수한 정보만 다룰 때 활용하기 좋은 방법이다.