[240108] const로 선언한 배열, 객체의 요소 또는 속성을 변경할 수 있는 이유는 무엇일까

자바스크립트의 원시타입과 참조타입

원시타입

• String
• Number
• Bigint
• Boolean
• null
• undefined
• Symbol (ES6)

참조타입

• Object
• Array
• function

 

자바스크립트의 작동원리

아래는 JS 엔진을 추상화한 그림이다.

• 콜스택 - 함수의 호출과 관계되는 지역변수, 매개변수 저장
• 메모리힙 - 사용자에 의해 직접 동적으로 할당되고 해제

 

원시타입의 데이터 할당

변수에 할당될 때

let foo = 10; // 변수 foo에는 10이 저장된 콜스택 메모리의 주소값이 저장

• 변수의 값은 콜스택 영역에 저장
• 변수에는 해당 콜스택 영역의 주소가 저장

재할당될 때

let foo = 10;
foo = 20;

• 변수의 값은 새로운 콜스택 영역에 저장
• 변수에는 해당 콜스택 영역의 주소가 저장
• 더 이상 사용하지 않는 이전의 영역은 garbage collection동작 (참조되지 않는 영역 삭제)

const의 경우는 어떨까?

const란, 변수에 저장된 콜스택의 "메모리 주소" 변경이 불가능하다는 것이다.

즉 값이 콜스택에 저장되는 원시타입이 const로 선언되었을 경우 값 변경이 불가능하다.

 

참조타입의 데이터 할당

변수에 할당될 때

const foo = []; // 변수 foo에는 []이 저장된 메모리힙의 주소값이 저장된 콜스택 메모리의 주소값이 저장

• 변수의 값은 메모리 힙에 저장
• 메모리 힙의 주소값을 콜스택 영역에 저장
  
• 변수에는 해당 메모리힙 영역의 주소를 저장하는 콜스택 영역의 주소가 저장

재할당될 때

const foo = [];
foo.push(1);

• 메모리 힙에 저장된 변수의 값 변경
• 변수가 가리키는 메모리 주소는 변경 X (그대로 주소 a)
  

 

결론

• const란, 변수가 가리키는 콜스택의 "메모리 주소" 변경이 불가능하다는 것이다.
• const로 선언한 배열의 값을 변경할 수 있는 이유는 참조타입(배열, 객체, 함수)의 경우 값 자체가 아니라 주소가 콜스택에 할당되기 때문이다.
• 콜스택과 달리 메모리힙은 동적이기 때문에 메모리 주소의 변경 없이 값 변경이 가능하다.