자바스크립트 let 키워드란?
2015년 ES6(ECMAScript 2015)에서 도입된 let 키워드는 자바스크립트에서 블록 스코프(block scope)를 가지는 변수를 선언할 수 있게 해주는 핵심 문법입니다. 기존의 var 키워드가 함수 단위 스코프를 따르는 것과 달리, let으로 선언한 변수는 중괄호({})로 묶인 코드 블록 안에서만 유효하며, 블록 외부에서는 접근할 수 없습니다.
let과 var의 주요 차이점
- 스코프 : var는 함수 스코프, let은 블록 스코프를 따릅니다.
- 호이스팅 : let은 TDZ(Temporal Dead Zone, 일시적 사각지대)의 영향을 받아 선언 전에 접근하면 참조 오류(ReferenceError)가 발생합니다.
- 재선언 : 동일한 블록 내에서 let 변수를 중복 선언하면 문법 오류(SyntaxError)가 발생합니다.
let 키워드 사용 예제
다음은 let 키워드로 변수를 선언한 뒤, 블록 내부와 외부에서 해당 변수에 접근했을 때의 동작 차이를 확인하는 예제 코드입니다.
<!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;
}
.sample{
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript Let</h1>
<div class="sample"></div>
<div style="font-weight: bold; color: black;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to access the varible
</h3>
<script>
let sampleEle = document.querySelector(".sample");
document.querySelector(".Btn").addEventListener("click", () => {
{
let a = 22;
sampleEle.innerHTML ="Accessing variable a inside block = " + a + "<br>";
}
try {
sampleEle.innerHTML = "Accessing variable a outside block = " + a;
} catch (err) {
sampleEle.innerHTML +="Accessing variable a outside the block = " + err;
}
});
</script>
</body>
</html>실행 결과
'CLICK HERE' 버튼을 클릭하면 아래와 같은 결과가 화면에 출력됩니다 −
결과 분석
블록 내부에서는 let으로 선언한 변수 a(값 22)에 정상적으로 접근할 수 있습니다. 반면 블록 외부에서 a에 접근하려고 하면 try-catch문에 의해 ReferenceError: a is not defined 오류 메시지가 출력되는 것을 확인할 수 있습니다. 이는 let 변수가 선언된 블록 안에서만 유효하다는 블록 스코프의 특성을 그대로 보여주는 결과입니다.