왜 원시타입은 변경불가하고, 객체는 가능할까?

원시타입: string, number, boolean, null, undefined, symbol
객체: object, array, function…

원시타입의 값은 변경불가의 값이다. 따라서 원래 할당되어 있던 값을 변경하는 것이 아니라 재할당이 이루어진다.

let a = 5; // a = 5
let b = a; // b = 5;
a = 6; // a = 6;

처음 5라는 값을 a라는 변수에 할당하고, 다음으로 5라는 값을 담고 있는 a의 값을 b에 할당하였을 때,
b의 값 5는 a의 값 5가 들어있는 메모리 공간을 차지하는 것이 아니라 새로운 공간을 차지하여 값을 할당한다. 그리고 a를 6이라고 재할당하면 이 역시 새로운 공간을 차지한다.

객체의 경우는 어떨까?

객체는 변경가능한 값이기 때문에 새로운 공간에 값을 재할당하는 것이 아니라 원래 할당된 공간의 값을 변경한다.

let a = {
  word: "hello"
};
//a  -> {word:"hello"}
let b = a;
//b  -> {word:"hello"}
a.word = "world";
//a  -> {word:"world"}

{word: "hello"}라는 객체를 a라는 변수에 할당하였고, 그 다음 b에 a의 값을 할당하였을 때,
b는 새로운 메모리 공간을 차지하는 대신 처음 a가 만들어 둔 {word: "hello"}라는 값이 든 공간을 바라보게 된다. 즉, a와 b라는 서로 다른 식별자가 {word: "hello"}라는 값이 들어 있는 하나의 공간을 공유하는 것이다.
따라서 a의 word라는 프로퍼티를 world로 변경하면 새로운 공간에 {word: "world"}라는 값을 담는 것이 아니라 원래 {word: "hello"}가 있던 공간의 프로퍼티를 {word: "world"}로 변경한다. b.word를 해도 같은 결과가 나온다.

---

그렇다면 변수를 할당할 때 재할당이 불가능한 키워드 const를 사용한다면 어떻게 될까?

const a = 5;라고 할당한 후, a = 6;이라고 재할당하면 const는 재할당이 되지 않기 때문에 오류가 발생한다. 하지만 객체의 경우라면 어떻게 될까?

const a = {
  num: 3
};
//a = {num: 3}
a.num = 5;
//a = {num: 5}

const는 재할당을 할 수 없지만 다음과 같이 객체가 할당되면 객체의 프로퍼티는 변경할 수 있다.
처음 const a라는 변수에 {num : 3}를 할당한다. 그러면 이 값은 하나의 메모리 공간을 차지하게 된다.
이때 a의 num라는 프로퍼티에 접근하여 a.num = 5;라고 값을 할당한 후 a를 참조하면 값이 5로 바뀌어 있다.

하지만 다음과 같이 코드를 사용하면 const는 재할당을 할 수 없기 때문에 오류가 발생한다.

const a = {
  num: 3
};
a = {
  num: 5
};