자바스크립트에서 상수를 선언하려면 const 키워드를 사용합니다. const로 선언된 변수는 최초 할당 이후 값을 다시 재할당할 수 없으며, 재할당을 시도하면 TypeError가 발생합니다. 아래 예제를 통해 실제 동작 과정을 확인해 보겠습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Const example</h1>
<button class="Btn">CLICK HERE</button>
<p class="sample"></p>
<h3>Click the above button to try changing const value</h3>
<script>
let sampleEle = document.querySelector(".sample");
const a = 33;
sampleEle.innerHTML = "a = " + a + "<br>";
document.querySelector(".Btn").addEventListener("click", () => {
try {
a = 44;
}
catch (err) {
sampleEle.innerHTML += "Error : " + err;
}
});
</script>
</body>
</html>
코드 설명
const a = 33;으로 상수 a를 선언하고 초기값 33을 할당한 뒤 화면에 출력합니다. 이후 버튼을 클릭하면 a = 44; 구문으로 상수 값을 변경하려고 시도하는데, 이때 try-catch 문이 에러를 잡아 화면에 오류 메시지를 표시합니다.
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'CLICK HERE' 버튼을 클릭하여 상수 값을 변경하려고 하면, 재할당이 금지되어 있기 때문에 아래와 같이 에러 메시지가 화면에 표시됩니다.
const 사용 시 알아두면 좋은 점
- const로 선언된 변수는 반드시 선언과 동시에 초기화해야 합니다.
- const의 '상수'는 값 자체가 아니라 변수와 값의 바인딩(참조)을 고정하는 개념입니다. 따라서 객체나 배열을 const로 선언하더라도 내부 속성이나 요소는 변경할 수 있습니다.
- const는 블록 스코프(block scope)를 가지므로 중괄호 {} 내부에서만 유효합니다.