자바스크립트 Value & Reference

자바스크립트는 두 가지의 데이터 타입이 있으며 원시 타입은 값으로 전달되며, 그 외의 객체는 참조로 전달되는 형태입니다.

오늘은 두 타입의 차이를 공부해보겠습니다.

 

Value

let a = 10;
let b = a; // b = 10

a = 20;

console.log(b); // 10

 

자바스크립트의 원시 타입은 불변성을 가지고 있으며 교체할 수는 있지만 변경할 수 없습니다. 위 예제를 보면 a는 10이라는 값을 초기화했고 b는 a로 초기화를 했습니다. a는 10이기 때문에 b 또한 10을 가지게 됩니다. 그리고 a를 20으로 재할당해도 b의 값은 바뀌지 않습니다.

 

b는 a의 값을 복사했기 때문입니다. 이것을 값에 의한 전달이라고 합니다. 값에 의한 전달은 원시 타입에서 일어나게 되며 값을 그대로 복사하기 때문에 하나를 바꿔도 다른 쪽에 영향을 주지 않습니다.

 

더 자세히 살펴보자면 각각의 변수는 메모리의 주소를 갖고 있습니다. a의 메모리 주소를 0x01라고 임의로 지정하겠습니다. b에 a를 할당함으로써 b의 메모리 주소 또한 0x01를 가리키게 됩니다. 0x01은 값으로 10을 가지고 있으며 a와 b는 둘 다 10의 값을 갖게 됩니다. 여기서 a에 20을 할당하게 되면 0x02라는 새로운 메모리 주소에 20이라는 값을 저장하고 이 메모리를 가리키게 되며 a와 b는 각 다른 메모리 주소를 가리키므로 서로 다른 값을 가지게 됩니다.

 

Reference

const x = ["apple", "banana", "kiwi"];
const y = x;

x.push("melon");
console.log(x); // ['apple', 'banana', 'kiwi', 'melon']
console.log(y); // ['apple', 'banana', 'kiwi', 'melon']

x라는 배열을 참조하는 y 변수를 선언하고 x 배열에 새로운 데이터를 넣었습니다. x와 y를 콘솔로 찍으면 둘 다 동일하게 나오는 것을 확인할 수 있습니다.

 

참조에 의한 전달은 이와 같이 서로에게 영향을 주게 됩니다. 객체는 Heap 영역에 생성되며 객체를 할당한 변수는 값으로 객체를 저장하는 것이 아니라 Heap 영역에 생성된 객체의 메모리 주소를 저장하기 때문입니다. 

 

이미지와 같이 x와 y는 같은 객체의 메모리 주소를 가리키게 됩니다. 때문에 x의 데이터를 변경하면 y도 똑같이 영향을 받게 됩니다.

 

정리

• Value
  • 값에 의한 전달
  • 원시 타입
  • 값을 그대로 복사하며 데이터를 바꿔도 다른 데이터에 영향을 미치지 않음
• Reference
  • 참조에 의한 전달
  • 원시 타입을 제외한 모든 참조 타입
  • 객체의 메모리 주소를 복사하며 데이터를 바꾸면 참조하는 모두에게 영향을 미침

 

참고링크
https://gist.github.com/branneman/7fb06d8a74d7e6d4cbcf75c50fec599c