해당 포스팅은 위키북스의 "모던 자바스크립트 Deep Dive"라는 책을 독학하며 기록하는 글입니다.
결론부터 얘기하면 원시 값과 객체 사이에는 크게 세 가지 차이점이 있다.
- 원시 값은 변경 불가능한 값인 반면, 객체는 변경 가능한 값이다.
- 변수에 할당 시, 원시 값은 실제 값이 메모리 공간에 저장되는 반면, 객체는 참조 값이 저장된다.
- 각 값이 할당된 변수를 다른 변수에 할당하면 2번과 같은 맥락으로 원시 값은 값에 의한 전달, 객체는 참조에 의한 전달이 일어난다.
원시 값
원시 값은 변경 불가능한 값이다. 앞에서 살펴 보았듯이 변수에 할당된 값을 변경하면 변수가 가리키는 메모리 공간 안에 저장된 값이 변경되는 것이 아니라 새로운 메모리 공간에 재할당한 값이 들어간 뒤, 변수가 해당 공간을 가리키도록 변경된다. 이렇듯 원시 값은 메모리 공간에 한 번 저장되면 값을 변경할 수 없다.(불변성)
값에 의한 전달이란 무엇을 말하는 것일까?
var num1 = 100;
var num2 = num1;
console.log(num1); //100
console.log(num2); //이렇게 100이 할당된 num1을 num2에 할당하면 num2에는 num1이 가리키고 있는 메모리 공간에 실제 저장된 값인 100(물론 2진수로 변환된)을 그대로 복사하여 가지게 된다. 이러한 전달을 값에 의한 전달이라 한다. 즉, 위의 코드에서 num1의 값을 변경하더라도 이미 num2에는 100이라는 값이 복사전달 할당되었기 때문에 영향을 받지 않는다.
객체
객체는 변경 가능한 값이다. 이게 가능한 이유를 살펴보자. 먼저 객체를 생성할 때, 객체를 가리키는 변수(식별자)에는 무엇이 저장될까??
당연히 객체를 가리키는 변수이니까 객체가 저장되어 있다고 생각할 수 있지만 답은 아니다. 객체는 해당 변수가 가리키는 공간과는 별개의 공간에 자바스크립트 엔진에 의해 생성되서 관리되며, 변수가 가리키는 공간에는 객체가 저장되어 관리되는 메모리의 주소가 들어 있다.
예를 들어 다음의 코드를 보자.
var person = { age:20 };이렇게 person이라는 객체가 만들어졌을 때, 실제 객체가 1000번 메모리 공간에 만들어져 관리되어 있다고 하면, person이라는 식별자는 1000번을 가리키고 있는 것이 아니고, 800이라는 따로 변수에게 할당된 메모리 공간을 가리키고 있으며, 이 공간에 저장된 값이 객체가 저장된 곳의 주소인 1000이라는 말이다.
그럼 윈시 값과 다르다는 참조에 대한 전달은 뭘까? 사실 원시 값과 동일하게 객체가 할당된 변수를 다른 변수에 할당하게 되면, 객체가 할당된 변수가 가리키고 있는 메모리 공간에 들어있는 값이 동일하게 전달된다.
하지만 그 곳에는 무엇이 저장되어 있는지 생각해보자. 바로 객체가 저장되고 관리되는 실제 공간의 메모리 주소가 저장되어 있다.
그럼 결국 새로운 변수도 객체가 저장된 실제 공간의 메모리 주소를 복사하여 저장하게 되고 이를 참조하면 실제로 객체에 접근할 수 있다. 이러한 전달을 참조에 대한 전달이라고 한다.
따라서 어느 한 쪽에서 객체에 접근하여 값을 바꾸게 되면 다른 한 쪽에서 접근했을 때도 동일하게 값이 변경되어 영향을 주는 것을 확인할 수 있다. (둘은 같은 공간을 가리키는 메모리 주소를 저장하고 있기 때문에)
