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

자바스크립트에서는 해당 데이터를 완전히 복사하는 깊은복사와 데이터의 위치를 참조하는 얕은 복사가 있습니다.

 

String, Number, Boolean 타입의 자료형 값을 복사 할 때와 객체를 복사 할 때 각각 다르게 복사가 됩니다.

 

자료형의 복사

 

자바스크립트에서 자료형의 값을 복사 할 때는 독립적으로 해당 값을 완전히 복사하는 깊은 복사가 일어납니다.

 

예제입니다.

 

var value = 10;
var copyValue = value;

value = 20;

console.log(value); //20
console.log(copyValue); //10

 

각각 독립된 데이터로 다른 값을 출력합니다.

 

 

객체의 복사

객체를 복사 할 때는 해당 객체가 저장된 메모리의 위치값을 참조하게 되는 얕은 복사가 일어납니다.

 

예제입니다.

 

var array = [1, 2, 3, 4, 5];
var copyArray = array;

array[0] = 10;

console.log(array); //[10, 2, 3, 4, 5]
console.log(copyArray); //[10, 2, 3, 4, 5]

 

배열(배열도 객체)을 array 변수에 저장하고 copyArray에 그 배열을 복사 했습니다.

 

해당 배열의 첫번째 값을 10으로 재할당하고 각 변수를 출력 했을때 같은 값이 출력됩니다.

 

객체는 변수에 할당 했을 때, 객체 자체를 저장하는것이 아니라 메모리 어딘가에 만들어진 그 객체의 위치를 저장합니다.

 

이를 객체의 참조 또는 얕은 복사라고 표현 합니다.

 

객체를 깊은 복사 할 수 있는 다양한 방법도 있습니다.

 

함수를 활용한 객체의 복사 방법을 알아보겠습니다.

 

function clone(obj){
	var clone = {};
    for(var i in obj){
    	clone[i] = obj[i];
    }
    
    return clone;
}

var original = {a: 1, b: 2};
var copy = clone(original);

original.a = 10;

console.log(original) //{a: 10, b: 2}
console.log(copy) //{a: 1, b: 2}

 

각각의 변수를 출력 시 다른 값이 출력 됩니다.

 

for in문을 사용하여 객체의 값을 return 받아 다른 변수에 저장하여 그대로 복사하여 독립적인 객체를 만들 수 있습니다.