객체 얕은 복사(shallow copy)와 깊은 복사(deep copy)

tring형태의 데이터, Boolean형태의 데이터, Number 데이터는 순수한 값이기 때문에 복사를 했을때 순수한 값이 복사가 되고 독립적인 값이 저장이 된다.

 

// Number와 Boolean형태도 동일하게 순수한 값이 복사가 된다.
var original = '원본';
var copy = original;
console.log('copy의 값은?', copy); // 원본
    
copy = '복제품';
console.log('original의 값은?', original); // 원본
console.log('copy의 값은?', copy); // 복제품

 

객체는 조금 다르다. 위의 데이터 복사 방식대로 복사를 했을때 Js의 객체는 얕은복사(shallow copy)가 수행된다.

// 원본
var original = ['원본'];
console.log('original의 0번 인덱스의 값은?', original[0]); // 원본
 
// 복사
var copy = original;
console.log('copy의 0번 인덱스의 값은?', copy[0]); // 원본
 
// 복사의 값 변경시 원본도 영향을 받음
copy[0] = '복제품';
console.log('original의 0번 인덱스의 값은?', original[0]); // 복제품
console.log('copy의 0번 인덱스의 값은?', copy[0]); // 복제품

copy는 현재 original의 값을 바라보고 있을 뿐 실제 original의 값을 복사한것이 아니다.

값을 복사하는것이 아닌 지정한 값의 레퍼런스를 참조하는 복제를 얕은복사(shallow copy)라고 한다. (복사 하겠다! 보다는 참조하겠다!로 보면된다.)

 

 

String,Number,Boolean의 값을 복사할때처럼 순수 값을 복사하려면 깊은복사(deep copy)를 수행해야한다. deep copy를 수행하는 방법은 여러가지가 있지만 여기서는 JSON.parse와 JSON.stringify를 활용하는 방법을 소개하려고 한다. 우선 예제 코드를 보자

var original = ['원본'];
console.log('original의 0번 인덱스의 값은?', original[0]); // 원본
 
var copy = JSON.parse(JSON.stringify(original));
console.log('copy의 0번 인덱스의 값은?', copy[0]); // 원본
 
copy[0] = '복제품';
console.log('original의 0번 인덱스의 값은?', original[0]); // 원본
console.log('copy의 0번 인덱스의 값은?', copy[0]); // 복제품

위의 예제와 달라진점은 copy를 복사하는 과정에서 original의 값을 JSON.parse(JSON.stringify(original))의 형태로 받아왔다.

 

deep copy를 수행하면 레퍼런스의 데이터 자체를 복사하기 때문에 copy 객체를 수정하더라도 원본 객체와는 별도의 값이 수정이된다. 참조 레퍼런스의 순수한 값을 복사하는것을 깊은복사(deep copy)라고 한다.

 

2018.06.08 추가
JSON방식으로 Deep copy를 수행했을때 Date형식의 데이터는 JSON 형태로 변환되어 값으로써 복사되는 현상을 발견하였음 date 형태로 deep copy를 수행할때는 다른 방법을 사용하자 

 

출처 :

http://hong.adfeel.info/frontend/javascript-%EA%B0%9D%EC%B2%B4-deep-copy/