[JavaScript] 깊은복사와 얕은복사

깊은복사(deep Copy) 와 얕은복사(Shallow Copy)

 

var num1 =10;
var num2 = num1;
var num2 = 20;
console.log(num1) // 10
console.log(num2) // 20

• 위와 같이 immutable 한 변수(기본형 데이터) 를 copy하면 나타는게 깊은 복사이다. 깊은 복사는 내부의 값(기본형 데이터)까지 복사하는 것이다. 물론 여기서 num2=num1을 했을 때, num2와 num1은 같은 주소 (정수 10이 담겨있는 메모리)를 가리키게 되지만 num2가 다른 주소를 가리킨다고 해서 num1도 덩달아 다른 주소를 가리키게 되지 않는다. 왜냐하면 당연하다! 기본형 데이터는 불변하기 때문이다.

 

var obj1 ={
    a:1,
    b:2
}

var obj2 = obj1;
obj2.a=3;

console.log(obj1.a) // 3
console.log(obj2.a) // 3

• 하지만 객체, 즉 참조형 데이터와 같이 mutable한 변수를 copy하고, obj2의 프로퍼티 값을 바꾸면 기존 값의 프로퍼티 역시 바뀐다. 이게 바로 얕은 복사이다. 얕은 복사는 복사 대상의 내부의 값(기본형 데이터)을 복사하는게 아니라, 참조형 데이터 즉, 기본형 데이터를 가리키고 있는 주소만 복사한다. 따라서 obj2.a 의 값을 바꾸는 것은 obj2.a의 기본형 데이터 자체를 바꾸는게 아니라, obj2.a가 가리키고 있는 기본형 데이터의 주소를 바꾸는 것으로, 당연히 obj1.a 값도 바뀌게 된다.
• 따라서 obj2와 obj1은 하나를 바꾸면 나머지도 바뀌게 된다. 왜냐! 참조형 데이터는 가변하기 때문이다.

 

 

참조형에 대해 깊은 복사를 하는 법 ?

간단히 말해서 해당 데이터를 복사하되, 참조형 데이터 각각을 '내부 값'까지 완전히 복사하면 된다. 쉽게 떠올릴 수 있는 방법은 재귀 함수를 통한 복사 방법이다.

1. 재귀함수를 통한 참조형 데이터 깊은 복사

var deepCopy =function(target){
    var result={}
    if (typeof target === 'object' && target !== null){
        for(var prop in target){
            result[prop]=deepCopy(target[prop]);
        }
    }else{ // 기본형 데이터까지 내려가면 그제서야 복사를 한다. 
        result = target;
    }
    return target;
}

 

 

또 다른 방법은 JSON을사용하는 것이다. 객체를 JSON 문법으로 표현된 문자열로 전환하고, 다시 JSON 객체로 바꾸는 것이다. 다만 해당 방법은 메서드나 숨겨진 프로퍼티는 모두 무시한다.

 

2. JSON을 활용한 깊은 복사 ( - 코어 자바스크립트 p.28 참조)

var deepCopyViaJSON=function(target){
    return JSON.parse(JSON.stringify(target));
};

var obj = {
    a:1,
    b:[1,2]
}

var obj2=deepCopyViaJSON(obj);