블록 스코프(Block Scope)는 두 개의 중괄호 { } 사이에 형성되는 영역을 의미합니다. 이 블록은 반복문(loop), if 조건문 또는 switch 문 내부 어디에서든 생성될 수 있습니다.
ES2015(ES6)에서 도입된 let과 const 키워드를 사용하면 해당 블록 내부에서만 접근할 수 있는 블록 범위 변수를 선언할 수 있습니다. 즉, 블록 밖에서는 이 변수들에 접근할 수 없으며, 접근을 시도하면 참조 오류(ReferenceError)가 발생합니다.
다음은 JavaScript에서 블록 스코핑이 어떻게 동작하는지 보여주는 코드입니다.
예제 코드
<!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: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript 블록 스코핑</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하여 블록 내부와 외부에서 변수에 접근해 보세요</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
let b = 44;{
let a = 22;
}
resEle.innerHTML = '블록 내부에서 변수 접근 b = ' + b + '<br>';
try{
a
}
catch(err){
resEle.innerHTML += '블록 외부에서 변수 접근 a = ' + err;
}
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭한 후의 결과는 다음과 같습니다.
결과 분석
버튼을 클릭하면 두 가지 결과를 확인할 수 있습니다.
1. 블록 내부 접근 성공: 변수 b는 블록 외부에서 let으로 선언되었기 때문에 블록 안팎 모두에서 정상적으로 값 44에 접근할 수 있습니다.
2. 블록 외부 접근 실패: 변수 a는 중괄호로 묶인 블록 내부에서 let으로 선언되었기 때문에, 블록 밖에서 접근하려고 하면 ReferenceError: a is not defined 오류가 발생합니다. 이것이 바로 블록 스코프가 작동하는 방식입니다.
만약 var 키워드를 사용했다면 함수 스코프(function scope)가 적용되어 블록 밖에서도 변수에 접근할 수 있었을 것입니다. 따라서 현대 JavaScript 개발에서는 의도치 않은 변수 노출을 막기 위해 let과 const 사용이 권장됩니다.