배열, 객체를 const로 선언후 요소나 속성을 추가할 수 있는 이유

Q.  배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유?

const 로 선언한 변수 는 상수로서 재할당이 불가능하지만 배열이나 객체는 참조자료형(Reference Date type)이기 때문 에 데이터를 heap이라는 다른 공간에 저장해두고 해당 주소값을 참조해 사용하는 것이지 배열이나 객체에 속성을 추가한다고 재할당이나 재선언하는 것이 아닙니다.

Q.  참조자료형(Reference Data Type)은 무엇이며 힙(heap)에 저장된다는 것은 무슨 말 인가요?

데이터 값을 그대로 저장하는 기본 자료형(원시 타입)과는 다르게 참조 자료형은 메모리 상에서 데이터가 저장된 주소, 즉 참조값을 저장하기에 참조 자료형이라 불립니다.
원시 타입의 데이터는 stack 영역에 저장이 되지만 하나의 데이터만 들어갈 수 있습니다. 그래서 배열이나 객체처럼 여러개의 값을 저장하려 할 때에는 heap이라는 메모리상의 대량의 데이터를 동적으로 저장하는 공간에 저장해두고 해당 heap 주소값을 stack 영역에 연결해 값을 찾을 때마다 반환합니다.

Q.  변수 선언시 let, var  있는데 const를 사용하는 경우?

ES6 이전 변수선언 방법은 var를 이용하는 방법밖에 없었지만 호이스팅 등 var의 여러 가지 문제로 ES6에서 var과 다르게 블록레벨 스코프를 갖는 let, const가 나왔습니다. 재할당이 필요한 경우 let, 재할당이 필요 없는 경우 const를 사용합니다.
기본적으로 변수의 스코프는 최대한 좁게 만드는 것을 권장합니다. 따라서, var 키워드보다는 let과 const 키워드를 사용하며, 변경하지 않는 값(상수)이라면 let보다는 const 키워드를 사용하는 것이 안전합니다.

---

const와 let, var의 차이

* 스코프 : 변수에 접근할 수 있는 범위.
var: 함수 스코프
let, const: 블록 스코프
화살표함수는 블록 스코프를 가진다.
 
호이스팅
var: 함수 스코프의 최상단으로 호이스팅되고 선언과 동시에 undefined로 초기화된다.
let const: 블록 스코프의 최상단으로 호이스팅되고 할당 전까지는 초기화되지 않는다.
선언 전에 호이스팅이 되긴 하지만 값을 가지지 않기때문에 선언 전에 호출하면 Reference Error가 발생한다.( 선언은 되었지만 참조는 할 수 없는 사각지대가 생긴다)
 
글로벌에서 선언했을 때(strict mode가 아닌경우)
- var는 window에 바인딩된다.
- let const는 바인딩되지 않는다.

재선언
- var는 재선언이 가능하다.
- let const는 재선언이 불가능하다.

let vs const
- var let은 재할당이 가능하다.
- const는 선언과 초기화가 반드시 동시에 일어나야 한다. 재할당이 불가능하다.

---

참고

const
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

stack과 heap영역
https://velog.io/@bining/javascript-%EC%9B%90%EC%8B%9C%ED%83%80%EC%9E%85primitive-type-VS-%EC%B0%B8%EC%A1%B0%ED%83%80%EC%9E%85reference-typefeat.-stack%EA%B3%BC-heap-%EC%98%81%EC%97%AD

var, let, const 차이 
https://www.howdy-mj.me/javascript/var-let-const
모던 자바스크립트 Deep Dive, 이웅모 (2020)