참조 복사와 값 복사

자료형의 값 복사(깊은 복사)

자바스크립트는 기본 자료형(숫자, 문자열, boolean)의 값을 복사할 때 값을 완전히 복사한다.
따라서 '='을 사용하여 값 복사를 쉽게 할 수 있다.
다음은 깊은 복사의 예제이다.

let originalValue = 100;
let newValue = originalValue;

originalValue = 200;

alert(orginalValue);
alert(newValue);

위 소스코드에서 originalValue에 100의 값이 들어가고, newValue에 100이라는 값이 복사되어, 아래 그림과 같이 두 개의 변수 Original value, Newvalue 는 완전히 독립적인 상태가 된다.

이 상태에서 originalValue값을 200으로 변경하면, originalValue 값만 200이 된다. 이렇게 두 변수가 완전히 독립성을 갖는 것을 '값 복사' 또는 '깊은 복사' 라고 한다. 값을 복사하고 변경했을 때, 다른 값에 전혀 영향을 주지 않는다.

따라서 각각 200, 100이 출력된다.

객체의 참조 복사(얕은 복사)

객체에 변수를 저장하면, 실제 값을 저장하는 것이 아니라 객체를 메모리 어딘가에 만들고, 객체(배열도 포함)의 참조(위치 값)를 저장하게 된다. 따라서, 객체의 경우 '='을 이용하여 복사하면, 참조 복사만 가능하다.
아래의 소스코드를 보면,

let originalArray = [1,2,3,4];
let newArray = originalArray;

originalArray[0] = 200;

alert(originalArray);
alert(newArray);

배열 originalArray에 [1,2,3,4]를 저장하는 과정은 다음과 같다.
주소값 010에 [1,2,3,4]를 저장하고 , 객체 originalArray는 0 10 위치를 참조
이때 2열에 따라 참조되는 위치값 010 이 복사된다.

originalArray[0] = 200 을 실행하면, 참조되는 위치 0 10 의 값이 변경된다. originalArray와 newArray는 같은 메모리 위치를 참조하게 된다. 따라서 두 배열은 독립적이지 않다. 이런 것을 '참조 복사' 혹은 '얕은 복사'라고 한다.

따라서 newArray[0]을 출력하면 둘다 200을 출력하게 된다.