얕은복사와 깊은복사

얕은 복사

object 속성이 다른 참조를 가지는 복사, 그러나 object 내의 속성중 object가 있을 경우 그 object는 같은 참조를 가진다. (객체 중첩)

const obj = { a: "a", b: { c: "c" } }
const shallowCopy = {...obj}
or
const shallowCopy = Object.assign({}, obj)

shallowCopy.a = "abc"
shallowCopy.b.c = "cba"

console.log(obj.a) // "a"
console.log(obj.b.c) // "cba"  

위처럼 얕은 복사로 인하여 같은 참조를 가지는 c 속성은 변경에 영향을 받는다

깊은 복사

위와 같은 참조 문제를 해결하려면 깊은 복사를 해야함. 가장 쉬운방법은 JSON.stringpy로 직렬화 한 이후에 parse로 다시 파싱하는 방법이 있다

const obj = { a: "a", b: { c: "c" } }
const deepCopy = JSON.parse(JSON.stringfy()obj)

deepCopy.a = "abc"
deepCopy.b.c = "cba"

console.log(obj.a) // "a"
console.log(obj.b.c) // "c"  

하지만 이 방식도 문제가 있는게 내부에 직렬화 불가한 속성(Symbol 같은)이 있을시 제대로된 처리가 이루어 지지 않는다.

최종 해결법은?

lodash 같은 라이브러리를 사용하는게 좋아보인다.