const와 let은 ES2015(ES6)에서 새롭게 도입된 블록 스코프(block scope) 변수 선언 키워드입니다. 두 키워드의 가장 큰 차이점은 재할당 가능 여부입니다. let으로 선언한 변수는 언제든지 값을 다시 할당할 수 있지만, const로 선언한 변수는 한 번 값이 할당되면 재할당이 불가능합니다.
const와 let의 핵심 차이점
- let: 블록 스코프를 가지며, 선언 후 값을 자유롭게 재할당할 수 있습니다.
- const: 블록 스코프를 가지며, 선언 시 반드시 초기값을 할당해야 하고 이후 재할당하려고 하면 에러(TypeError)가 발생합니다.
- 두 키워드 모두
var와 달리 호이스팅 시 초기화되지 않아, 선언 전에 접근하면 참조 에러가 발생하는 TDZ(Temporal Dead Zone) 특성을 공유합니다.
다음은 JavaScript에서 let과 const의 동작을 보여주는 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Const and let in JavaScript</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to reassign const and let value</h3>
<script>
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let a = 22;
const b = 44;
sampleEle.innerHTML = "let a = " + a + " ";
sampleEle.innerHTML += "const b = " + b;
document.querySelector(".Btn").addEventListener("click", () => {
a = 99;
resEle.innerHTML = "Reassigning a = " + a + " ";
try {
changeB();
}
catch (err) {
resEle.innerHTML += "Reassigning b = " + err;
}
});
function changeB() {
b = 22;
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭하면 아래와 같은 결과를 확인할 수 있습니다.
결과 분석
버튼을 클릭하면 let으로 선언된 변수 a는 문제없이 99로 재할당됩니다. 반면 const로 선언된 변수 b에 값을 재할당하려는 순간 TypeError: Assignment to constant variable 오류가 발생하며, 이 오류 메시지가 화면에 출력되는 것을 확인할 수 있습니다.
어떤 것을 사용해야 할까?
일반적으로 JavaScript 개발 커뮤니티에서 권장하는 방식은 다음과 같습니다.
- 기본적으로는
const를 사용하여 의도치 않은 값 변경을 방지합니다. - 반복문 카운터나 상태값처럼 재할당이 필요한 경우에만
let을 사용합니다. - 레거시 코드 유지보수가 아니라면
var사용은 지양하는 것이 좋습니다.
단, const는 객체나 배열의 참조 재할당만 막을 뿐, 객체 내부 속성 변경까지 막지는 않는다는 점도 함께 기억해두세요.