JavaScript에서 블록 스코프 변수를 선언하는 방법

JavaScript에서 블록 스코프(block scope) 변수를 선언하려면 ES2015(ES6)에서 도입된 let과 const 키워드를 사용합니다.

var 키워드는 함수 스코프를 가지기 때문에 블록 밖에서도 접근할 수 있지만, 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,.sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>블록 스코프 변수 선언하기</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 블록 스코프 변수가 선언되고 결과가 표시됩니다.</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");{
        let a = 22;
        const b = 44;
        sampleEle.innerHTML = "let a = " + a + "<br>";
        sampleEle.innerHTML += "const b = " + b + "<br>";
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        try {
            a + b;
        }
        catch (err) {
            resEle.innerHTML = "a+b = " + err;
        }
    });
</script>
</body>
</html>

코드 설명

중괄호 { }로 묶인 블록 안에서 let a = 22;와 const b = 44;로 변수를 선언했습니다.
이 변수들은 블록 내부에서만 존재하며, 블록이 끝나면 소멸됩니다.
버튼을 클릭하면 블록 외부에서 a + b를 실행하려고 시도하고, 이때 try...catch 문으로 ReferenceError를 잡아 화면에 에러 메시지를 출력합니다.

`실행 결과`

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

'CLICK HERE' 버튼을 클릭한 후의 결과입니다.

버튼 클릭 시 블록 외부에서 a와 b에 접근할 수 없어 ReferenceError: a is not defined와 같은 에러가 발생하는 것을 확인할 수 있습니다. 이것이 바로 let과 const가 블록 스코프를 가진다는 것을 증명하는 결과입니다.