[Javascript] Object 객체 복사 방법 (얕은 복사, 깊은 복사)

@ 설명

var data = {a:1}

 

var test1 = data;

var test2 = data;

 

이렇게 복사를 하려고 한다면 주소참조로 복사되어

 

test1.a = 2 로 변경하여도

 

console.log(test1.a);   // 2

console.log(test2.a);   // 2

 

실제 주소인 data 변수가 수정이되어 변수를 나눠서 사용하지 못한다.

 

그래서 값을 복사하는 방법은 두가지 있다

 

@ 얕은 복사

ES6에선 Object.assign() 함수를 사용할 수 있다.

 

var data = {a:1,b:{c:2}};

 

var test1 = Object.assign({},data);

 

test1.a = 2

 

console.log(data.a);   // 2

console.log(test1.a);   // 1

 

이렇게하면 복사는 되지만, 그 하위에 있는 변수들이 참조되어 완전한 복사가 아니다

test1.b.c = 3

console.log(data.b.c);   // 3

console.log(test1.b.c);   // 3

 

@ 깊은 복사

JSON.parse(JSON.stringify(Obj)) 을 사용할 수 있다.

 

var data = {a:1,b:{c:2}};

 

var test1 = JSON.parse(JSON.stringify(data));

test1.b.c = 3

console.log(data.b.c);   // 2

console.log(test1.b.c);   // 3

 

이렇게하면 깊은 복사가되어 원하는 결과를 얻을 수 있다

 

 

참고사이트

https://brunch.co.kr/@kd4/87

https://junwoo45.github.io/2019-09-23-deep_clone/