얕은 복사 (shallow copy) vs 깊은 복사 (deep copy)

글쓴이는 자바스크립트로 코딩을 하던 도중, 논리적으로는 옳지만 배열에 중복되는 값이 꾸준히 들어가는

에러를 마주했다. 꾸준한 삽질을 통해 얕은 복사와 깊은 복사에 대해 알게되었다. 왜 이걸 이제 알았을까?

나는 지금이라도 까먹지 않도록 얕은 복사와 깊은 복사에 대해 공부하고 기록하기로 했다.

 

 

객체의 복사는 얕은 복사(swallow copy)와 깊은 복사 (deep copy)로 나뉜다.

 

 

 

 

1. 얕은 복사란?

 

얕은 복사는 배열을 복사하지만 복사한 객체가 바뀌면서 참조되고 있는 배열 또한 변하는 것이다.

 

var array = [1,2,3,4];
var shallowCopy = array;
 
shallowCopy [0] = 5;
 
console.log(shallowCopy); // 결과값: [5,2,3,4]
console.log(array); // 결과값: [5,2,3,4]

 

이런 식으로 shallowCopy가 array를 참조하고 변형시켰을 때 array에게도 영향이 가는 것을

얕은 복사의 예시이다.

 

 

2. 깊은 복사란?

 

복사한 객체가 변한다고 참조되고 있는 배열이 영향받지 않는 것이다.

 

깊은 복사를 하려면 새 객체를 만들어서 원본 객체에 반복문을 돌려 값을 복사해야한다.

 

var array = [1,2,3,4];
var deepCopy = newObj(array);
 
function newObj(param){
    var result = [];
        
    $.each(param, function(idx, item){
            result[idx] = param[idx];
    });
 
    result[0] = 5;
    return result;
};
 
console.log(JSON.stringify(deepCopyArray)); // 결과값: [5,2,3,4]
console.log(JSON.stringify(firstValue)); // 결과값: [1,2,3,4]
 

 

 

간단 요약 :  얕은 복사와 깊은 복사의 차이는 참조되는 값과 참조되는 값 사이에 단절의 차이다.