Object.assign과 스프레드를 이용한 복사 주의사항

깊은 복제에 대해서는 대안적인 방법을 사용할 필요가 있습니다. 왜냐하면, Object,assign()는 타겟 오브젝트에 할당을 할 때, 프로퍼티의 참조를 복사하기 때문입니다. (MDN 펌)

객체의 복사

자바스크립트에서 = 를 이용하여 객체를 복사하려고 하면 복사는 되지않고 참조가 된다.

나같은 경우에도 default data를 복사하여 화면에 출력하다가 뷰에서 화면에 보여지는 데이터들이 변경된 후 다시 초기화를 할 떄 default data가 변경이 되어 있었다.

const defaultData = { user: 1, layer: 3 };
let viewData = defaultData;
viewData.user++;
console.log(defaultData.user);    // print 2

이를 해결하게 위해 shallow copy, deep copy 등으로 검색을 해보면 객체를 복사하기 위해 많은 방법이 존재하는 것 같다.

1. 스프레드
2. Object.assign({}, obj)
3. string으로 변환해서 eval()

4. let cloneObj = eval('(' + JSON.stringify(obj) + ')');
   

   기타 등등

나중을 위해 다른 방법을 알아낼 때마다 여기에 추가해볼까

Object.assign(target, source) 는 IE 에서 실행이 되지않음

[참조]

<script>
function break_copy(){
    var t = 'console_c'; // id of container for output of w()
    w( t, 'Setting obj (with a reference to itself), and then attempting to copy...' );

    try {
        var obj = { name: 'Thomas'  };
            obj.me = obj; // reference to self

        var obj_copy = JSON.parse(JSON.stringify( obj )); // this copy will fail

        w( t, 'Copy successful! \n' + JSON.stringify( obj_copy, null, 4) );
    } catch( e ) {
        w( t, 'In the catch block with the following error: \n' + e );
    }
}
</script>