자바스크립트에서 변수를 선언할 때 우리는 var, let, const를 사용합니다. var는 기존 자바스크립트에서 써오던 키워드이며, let과 const는 ES6부터 추가된 키워드입니다. var를 사용하면 hoisting으로 인해 ReferenceError에러가 나지 않고, 변수가 중복선언이 가능하여 예측하기 어려운 코드로 만들어질 가능성이 높습니다. 이에 반해 let과 const는 각각 재할당의 가능여부와 변수를 재선언을 할 수 없다는 점으로 인해 보다 이해하기 쉬운 코드로 제작이 가능합니다. 보다 자세한 내용은 다른 포스팅에서 정리하겠습니다.

본 주제로 넘어와서 const는 상수로 재할당되지 않는 값을 변수로 선언할 때 사용하는 키워드입니다.
하지만, 배열과 객체를 const로 선언할 때는 우리가 알고있는 것과 다르게 요소나 속성을 추가, 수정 그리고 삭제가 가능합니다.

const whatIsYourName = {
  name: "latada",
  age: "secret",
}

whatIsYourName.name = "jay"; // name의 값 변경
console.log(whatIsYourName); // {name: 'jay', age: 'secret'}

WHY?

이는 저번에 정리해보았던 원시자료형과 참조자료형의 차이점에서 알 수 있습니다.

참조 자료형이란?

참조 자료형에는 하나의 데이터가 아닌 여러 데이터가 담기게 된다.
그래서 참조 자료형은 원시 자료형이 보관되는 데이터 보관함이 아닌 특별한 데이터 보관함에 저장된다.
이 특별한 데이터 보관함을 heap이라고도 부르는데 이 곳을 찾아갈 수 있는 주소가 변수에 저장되며,
heap은 데이터의 크기에 따라 사이즈를 늘렸다 줄였다 할 수 있다.

배열/객체는 참조 자료형으로 const로 변수를 선언했을 때 heap으로 찾아가는 주소만 할당되어있습니다.
요소나 속성의 값은 heap 안에 들어있는 것이라 위의 예제와 같이 작성할 때 const 변수에 참조된 주소는 변경되지 않으므로 const 사용이 가능한 것입니다.