JavaScript에서 변수를 정의하는 방법은 크게 세 가지가 있습니다. 각 키워드는 스코프(scope)와 호이스팅(hoisting) 동작에서 중요한 차이를 보이므로, 특성을 정확히 이해하고 상황에 맞게 사용하는 것이 좋습니다.
- let – 2015년(ES6)에 도입된 키워드로, 블록 스코프(block scope)를 갖는 변수를 선언할 수 있습니다. let으로 선언된 변수는 호이스팅되지 않으므로, 선언문 이전에 접근하면 참조 오류(ReferenceError)가 발생합니다.
- var – 함수 스코프(function scope)를 갖는 변수를 선언할 때 사용되는 키워드입니다. var로 선언된 변수는 호이스팅되어 코드 내 어디에서든 접근할 수 있지만, 이로 인해 의도치 않은 버그가 발생할 수 있습니다.
- const – 한 번 값을 할당하면 다른 값으로 재할당하거나 다시 선언할 수 없는 상수를 만드는 키워드입니다. ES2015에서 도입되었으며, const로 선언된 변수 역시 호이스팅되지 않습니다.
아래는 let, var, const로 변수를 선언하고 각 키워드의 동작 차이를 실제로 확인할 수 있는 예제 코드입니다.
예제
<!DOCTYPE html>
<html lang="ko">
<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 {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript에서 변수 정의하기</h1>
<div class="result"></div>
<button class="Btn">클릭</button>
<h3>
위의 버튼을 클릭하면 let, const, var로 변수를 선언하고 각 변수에 접근한 결과를 확인할 수 있습니다.
</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "a = " + a + "<br>";
try {
resEle.innerHTML += "b = " + b;
} catch (err) {
resEle.innerHTML += err + "<br>";
}
try {
resEle.innerHTML += "c = " + c;
} catch (err) {
resEle.innerHTML += err + "<br>";
}
var a = 22;
let b = 44;
const c = 99;
try {
c = 44;
} catch (err) {
resEle.innerHTML += err + "<br>";
}
});
</script>
</body>
</html>
출력 결과
'클릭' 버튼을 누르면 아래와 같은 결과가 화면에 표시됩니다.
실행 결과 해설
- a (var) – 호이스팅되어 값이 아직 할당되지 않은 상태로 undefined가 출력됩니다.
- b (let) – 선언 전에 접근하면 일시적 사각지대(TDZ)로 인해 ReferenceError가 발생합니다.
- c (const) – 역시 선언 전 접근 시 ReferenceError가 발생하며, 선언 후 값을 재할당하려고 하면 TypeError가 발생합니다.
이처럼 let과 const는 블록 스코프와 호이스팅 제한 덕분에 더 안전한 코드 작성을 돕습니다. 현대 JavaScript 개발에서는 기본적으로 const를 사용하고, 값의 재할당이 필요한 경우에만 let을 사용하는 것이 권장됩니다.