자바스크립트에서 const 키워드로 선언한 변수는 한 번 값이 할당되면 다른 값으로 재할당(reassign)할 수 없고, 이후에 다시 선언(redeclare)하는 것도 허용되지 않습니다. const는 ES2015(ES6)에서 새롭게 도입된 문법입니다.
const로 선언된 변수에 새로운 값을 할당하려고 하면 TypeError: Assignment to constant variable 오류가 발생합니다.
const의 주요 특징
- 재할당 불가: 초기화 이후에는 값을 변경할 수 없습니다.
- 재선언 불가: 동일한 스코프 안에서 같은 이름으로 다시 선언할 수 없습니다.
- 블록 스코프: 중괄호({}) 블록 단위로 유효 범위가 제한됩니다.
- 선언과 동시에 초기화 필수: 반드시 선언 시점에 값을 할당해야 합니다.
예제 코드
다음은 버튼을 클릭하여 const 변수의 값을 변경하려고 시도했을 때 어떤 일이 일어나는지 보여주는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Const 예제</h1>
<button class="Btn">CLICK HERE</button>
<p class="sample"></p>
<h3>위 버튼을 클릭하면 const 값 변경을 시도합니다</h3>
<script>
let sampleEle = document.querySelector(".sample");
const a = 33;
sampleEle.innerHTML = "a = " + a + "<br>";
document.querySelector(".Btn").addEventListener("click", () => {
try {
a = 44; // const 변수 재할당 시도 → 에러 발생
} catch (err) {
sampleEle.innerHTML += "Error : " + err;
}
});
</script>
</body>
</html>실행 결과
페이지가 로드되면 const로 선언된 변수 a의 초기값인 33이 화면에 출력됩니다.
'CLICK HERE' 버튼을 클릭해 상수 값을 변경하려고 하면, 재할당이 금지되어 있기 때문에 아래와 같이 TypeError가 발생하고 그 내용이 화면에 표시됩니다.
참고: 객체와 배열의 경우
const는 변수의 참조(reference)를 고정할 뿐, 객체나 배열의 내부 값까지 불변으로 만들어 주지 않습니다. 즉, const로 선언한 객체라도 속성을 추가·수정하는 것은 가능합니다. 내부 값까지 완전히 변경하지 못하게 하려면 Object.freeze()를 함께 사용해야 합니다.