Const 키워드를 사용 해도 값의 재할당이 일어날 수 있을까?

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

 

 

자바스크립트엔 여덟 가지 자료형(숫자형, bigint형, 문자형, 불린형, 객체형, Null형, Undefined형, 심볼형)이 있다.
이 중 일곱 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'이라 부르며, 마지막 하나는 참조형(reference type)이라고 하는 객체가 있다. 객체형은 원시형과 달리 다양한 데이터를 담을 수 있고 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다. 그렇기에 객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로 자바스크립트를 잘 다루려면 객체를 잘 이해하고 있어야 한다.

 

 

...그렇다고 한다.

 

객체를 공부하기 전 나는 const 키워드하면, 변화하지 않는 변수(??)를 선언할 때 사용하는 키워드이며, 선언과 동시에 값을 할당해 줘야하고, 한번 선언 시 값을 재할당 할 수 없다라고 알고 있었다.

 

const myBirthday = '02.06.2021'; 
myBirthday = '01.01.2100'; // error, can't reassign the constant!

 

그렇기에 변수값이 절대 변경되지 않을 것이라 확신하며, 값이 변경되는 것을 방지하면서 다른 개발자들에게 "이 값은 상수입니다!"라는 것을 알리기 위해 const를 사용해 변수를 선언하도록 해야한다고 짧고 얇은 생각을 했었다.

그래서 아래 내용을 보고 큰 혼란에 휩싸였다.

 

 

상수 객체는 수정될 수 있습니다. 즉, const 키워드로 선언된 객체는 수정될 수 있습니다.

 

 

아래 예시 코드에 주석으로 (*)로 표시한 줄에서 오류를 일으키는 것처럼 보일 수 있지만 그렇지 않다. const는 user의 값을 고정하지만, 그 내용은 고정하지 않는다. 결국 const 키워드는 user=...를 전체적으로 설정하려고 할 때만 오류가 발생한다고 한다.

 

const user = { name: "John" }; 
user.name = "Jane";
console.log(user.name); // Jane

 

이렇게 동작되는 이유는 위에 소개해 놓은 자바스크립트의 자료형(원시형(primitive type),참조형(reference type))의 차이 때문이다.

원시형과 같은 문자형, 숫자형 등은 메모리에 할당될 때 어느정도의 메모리값이 필요할지가 정해져 있고 원시형별로 어느 정도의 메모리 크기에 할당하면 될지에 대해서 미리 정의 되어있다고 한다(원시형은 숫자형이면 숫자형, 불린형이면 불린형같이 한 종류만 넣을 수 있기 때문에 크기를 예측할 수 있음). 하지만 객체의 경우에는 그 안에 또 다른 객체가 들어갈 수도 있고, 숫자형, 문자형 등 다양한 원시형이 값으로 들어갈 수 있기 때문에 메모리 크기를 객체의 데이터값을 가리키는 참조값을 통해 관리되고 있어 객체의 속성 값이 재할당 되더라도 오류가 발생되지 않는다고 한다.

 

 

동적으로 할당되는 영역에서 데이터가 바뀌고 그 데이터 영역을 가리키는 메모리 주소값이 객체에 할당된다. 그렇기 때문에 객체의 값에 재할당을 통한 변경을 하더라도, 변수에 할당된 주소값은 변하지 않으므로 const 키워드로 선언한 후에도 데이터 변경이 가능하다.

 

 

const 키워드에 할당된 값은 절대로 바뀌지 않는다. 객체가 할당될 때는 객체 자체가 할당되는 게 아니라 객체가 있는 메모리 주소가 할당 되는데, {} === {}가 거짓이라는 예시가 이를 증명한다.

 

 

정리하면, const 키워드에 객체를 할당하면 당연히 객체를 가리키는 주소 값이 할당된다. 그리고 이 주소 값은 불변이고 내가 생각하는 상수의 역할을 한다. 그러나 그 객체에 프라퍼티(Key-문자형과 심볼형, Value-모든 자료형)를 추가하거나 변경하는 재할당이 가능하다. 그 값은 const 키워드에 직접적으로 바인딩(binding-묶인) 된 값이 아니기 때문에 당연한 것이라고 생각하면 된다.

 

 

재선언 No, 레퍼런스 타입의 값  재할당 OK

 

 

추가적으로 아래는 Google에서 Chrome DevTools와 V8 JavaScript 엔진 작업을 하는 Mathias란 분의 포스팅 내용의 일부이다. 관련 포스트 링크를 참고에 놔뒀기 때문에 자바스크립트가 익숙해 지면 다시 확인할 예정이다.

❗ const is not immutable
 ES6 const does not indicate that a value is ‘constant’ or immutable. A const value can definitely change.

 

참고

---

혼자 공부하는 자바스크립트(https://youtu.be/9tbjjZb65ng?t=582) -윤인성-
코어자바스크립트(핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍) -정재남-

ES2015 const is not about immutability · Mathias Bynens

객체

---