[Java Script] shallow Copy(얕은 복사) vs Deep Copy(깊은 복사)

Deep Copy

자바 스크립트에서 기본자료형은 깊은 복사가 된다.
만약 변수에 담긴 값을 =을 통해 다른 변수에 넣어줄 경우 해당 값은 완전히 복사되어 사용할 수 있다.

var original = 100;
var copy = original;

original = 500;

console.log(original); // 500 출력
console.log(copy) // 100 출력

처음 선언된 original 에는 100이 들어있고, 그 값을 복사해서 넣어준 copy에도 100이 들어있게 된다.
이후 copy는 완전히 복사되었기 때문에 original의 값이 500으로 변경되어도 영향을 받지 않고 100이라는 값을 가지고 있게 된다.

Shallow Copy

하지만 객체(배열 포함)의 경우에는 값을 복사해주는 것이 아니라 링크되었다고 보는게 옳다.

변수는 작지만 배열은 넣을 수 있는 값이 무제한이기 때문에 모두 복사하는 것은 무리가 있다.
그렇기 때문에 복사가 아닌 연결을 시켜주는 것이다.

var a = [1,2,3,4,5];
var b = a;

a[0] = 50;
b[4] = 100;

console.log(a.valueOf()); // 50,2,3,4,100 출력
console.log(b.valueOf()); // 50,2,3,4,100 출력

a배열의 0번 인덱스에 값을 바꾸고, b배열의 4번 인덱스의 값을 수정하였지만 a, b 배열 모두 수정된 것을 확인할 수 있다.

이는 서로 같은 주소값에 연결되어 있기 때문이다.
(a의 소유인 집에 b가 열쇠를 받아 거주하고 있는 상태)

만약 b 배열을 독립적으로 사용하고 싶다면 =으로 값을 넘기는 것이 아닌 배열의 값을 하나씩 꺼내서 넣어줘야 한다.

var src = [1,2,3,4,5];
var dest = [];

for(var i = 0; i < src.length; i++){
	dest.push(src[i]);
};