원시(Primitive) 타입이란?
In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods. There are 7 primitive data types: string, number, bigint, boolean, undefined, symbol, and null.
mdn 공식 문서에 따르면 "원시 타입이란 객체가 아니며 메소드를 갖지 않는 데이터" 를 의미합니다. 경우에 따라서 null 을 가짓수에 포함시키지 않거나 6 (+1) 의 형태로 표현하기도 하더라구요.
객체가 아니라는 점, 메소드를 갖지 않는다는 점 이 두 표현을 통해 객체 타입과 원시 타입이 서로 구분된다는 점을 유추할 수 있을 텐데요. 모던 자바스크립트 Deep Dive 에서는 이 두 타입이 크게 3 가지 측면에서 다르다고 말합니다. 이를 나름대로 정리하면 다음과 같습니다.
-
immutable vs. mutable
원시 타입 : immutable(변경 불가능) 한 값
객체 타입 : mutable(변경 가능) 한 값 -
변수에 할당할 때 저장되는 것은?
원시 타입 : 실제 값이 저장됨
객체 타입 : 참조 값이 저장됨 -
원시/객체 값이 할당된 변수를 다른 변수에 할당할 때는?
원시 타입 : 원본의 원시 값을 복사해 전달
객체 타입 : 원본의 참조 값을 복사해 전달
immutable
immutable 이라는 개념 자체는 프로그래밍에서 자주 접하게 되는 개념인 것 같습니다. 무언가가 한 번 생성되고 나서 변하지 않는다면 그것을 immutable 하다고 말하는 것이죠.
앞서 원시 타입과 객체 타입이 크게 3 가지 측면에서 다르다는 내용을 언급했지만, 이 내용을 다시 압축하면 결국 immutable 이라는 개념으로 정리할 수 있다고 생각합니다. 변경이 불가능하다는 것입니다. 이 때 변경이 불가능하다는 것은 변수를 말하는 것이 아니라 값 그 자체를 의미합니다.
let age = 24;
age = 30;
let copy = age;
copy = 100;age 라는 변수를 선언하고 24로 초기화합니다. 그 다음 위에서처럼 age 라는 변수에 30 이라는 숫자 타입의 원시 값을 재할당하면 어떻게 될까요? 변수를 놓고 보자면 age 라는 변수의 값이 24 에서 30 으로 바뀐 것처럼 보입니다.
그러나 메모리 공간에서는 조금 다르게 동작합니다. 기존의 24 라는 원시 값이 저장된 메모리 공간의 주소로 가서 그 값을 30 으로 변경하는 대신에, 새로운 메모리 공간에 30이라는 값을 저장한 후 변수가 참조하는 주소를 변경합니다.
어떠한 원시 값을 저장한 변수를 다른 변수에 할당할 때도 마찬가지입니다. 새로운 메모리 공간을 확보해 그 값을 저장한 후 그 주소를 참조하게끔 하죠. 따라서 위의 예시에서처럼 copy 에 100 이라는 값을 재할당하더라도 age 에는 아무런 영향이 없습니다.
주소 값을 참조한다는 것?
2번 항목에서 원시 타입은 변수에 실제 값을 할당하고 객체 타입은 변수에 참조 값을 저장한다고 정리했었습니다. 근데 아래에서는 변수가 주소를 참조한다고 설명하고 있죠. 두 가지의 개념이 섞여있는 것 같아 이를 명확히 할 필요가 있어 보입니다.
모든 변수는 어떠한 메모리 공간을 참조하게 되어있습니다. 그리고 그 공간에 무언가 데이터를 저장하게 되죠. 원시 타입이 변수에 실제 값을 할당한다고 하는 것은 변수가 참조하고 있는 메모리 공간에 실제 값이 저장된다는 의미입니다.
이와 달리 객체 타입이 변수에 참조 값을 저장한다고 하는 것은 변수가 참조하고 있는 메모리 공간에 다시 참조 값, 즉 메모리 공간의 주소를 저장한다는 의미입니다. 실제 객체의 정보는 참조 값의 주소를 따라간 공간에 따로 저장이 되어있죠. 객체를 이렇게 생성하고 관리하는 이유는 객체라는 데이터는 크기가 정해져있지 않고 내부의 자료가 동적으로 추가되기도 또 삭제되기도 하기 때문입니다. 메모리를 효율적으로 사용하기 위해 설계 자체를 달리한 것이죠.
변수가 메모리 공간을 참조한다는 것이 어떤 의미인지를 다음의 레퍼런스에서 이미지 자료를 참고하시면 보다 쉽게 이해가 가능할 것 같습니다. 모던 자바스크립트 Deep Dive 책에도 자세하게 정리되어 있습니다.
