자바스크립트에는 8가지 기본 자료형이 있다 :
Number, BigInt, String, Boolean, Symbol, Undefined, Null, Object.

객체(Obejct)는 참조값(Reference Value)으로, 그 외의 자료형은 원시값(Primitive Value)이라고 말할 수 있다.

📍 원시 값과 참조 값 자체가 자료형은 아니다!

원시값과 참조값을 나누는 가장 큰 특징은 값이 변할 수 있는지(mutable), 값이 변할 수 없는지(immutable) 여부라고 할 수 있다.

여기서 '값이 변한다' 라는 표현은, 동일한 메모리 주소 상에서 값이 변할 수 있는지를 뜻한다.

---

원시 값 (Primitive Value)

원시값의 가장 중요한 특징은 변할 수 없다는 것이다(immutable value).

아래의 그림은 다음 코드가 실행되었을 때, 메모리에서 데이터가 어떻게 저장되어 있는지를 나타낸다.

let score;
score = 80;
score = 90;

다음 그림을 보면, 원시 값은 변경 불가능한 값이기 때문에 값을 재할당 하면 새로운 메모리 공간을 확보하여 재할당 한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시 값을 가리킨다.

---

참조값 (Reference Value)

그렇다면 참조값은 대체 뭐길래 변할 수 있는 값(mutable value)이라고 하는 걸까?

다음과 같은 코드가 있을 때, 컴퓨터 메모리는 다음과 같이 보이게 된다:

var person = {
  name: 'Lee'
};

console.log(person);

원시 값은 변수의 값을 변경하려면 재할당 외에는 방법이 없다.
그러나 객체는 원시값과는 달리 변경 가능한 값이다.
재할당 없이 객체의 값을 직접 변경이 가능하기 때문에, 재할당이 아니므로 변수의 참조 값은 변경되지 않는다.

var person = {
  name: 'Lee'
};

// 참조 값을 복사 (얕은 복사)
var copy = person;

// 프로퍼티 값 갱신
person.name = 'Kim';

// 프로퍼티 동적 생성
person.address = 'Seoul';

console.log(person); // { name : 'Kim', address: 'Seoul' }

📚 참고자료
모던 자바스크립트 딥 다이브