블록 스코프란?

블록 스코프는 변수의 유효 범위를 말합니다. 간단히 말해서, 변수가 어디에서 접근 가능한지를 결정하는 규칙입니다.

자바스크립트에서는 기본적으로 함수 스코프를 가지고 있습니다. 이는 함수 내부에서 정의된 변수는 해당 함수 내에서만 접근할 수 있으며, 외부에서는 접근할 수 없다는 것을 의미합니다.

하지만 ES6부터는 블록 스코프를 가지는 let과 const 키워드가 도입되었습니다. 이를 이용하여 블록 내부에서 정의된 변수는 해당 블록 내에서만 접근할 수 있습니다.

함수 유효 범위와 블록 유효 범위의 차이점

함수 스코프에서 변수를 선언하면, 해당 변수는 함수 내에서만 접근할 수 있습니다. 예를 들어, 아래의 코드를 살펴보겠습니다.

function example() {
    var x = 10;
    console.log(x);
}

example(); // 10
console.log(x); // ReferenceError: x is not defined

위의 예제에서 var x = 10;은 example 함수 내에서만 유효한 변수입니다. 함수 외부에서는 x 변수를 참조할 수 없으므로 console.log(x);에서 ReferenceError가 발생합니다.

반면에 블록 스코프에서 변수를 선언하면, 해당 변수는 블록 내에서만 접근할 수 있습니다. 예를 들어, 아래의 코드를 살펴보겠습니다.

function example() {
    if (true) {
        let x = 10;
        console.log(x);
    }
}

example(); // 10
console.log(x); // ReferenceError: x is not defined

위의 예제에서 let x = 10;은 if 블록 내에서만 유효한 변수입니다. console.log(x);는 if 블록 밖에서 호출되므로 ReferenceError가 발생합니다.

함수의 블록 스코프

ES6 이전에는 자바스크립트에서 함수 스코프만 존재했기 때문에, 함수 내부에서 선언된 변수는 함수 내의 모든 블록에서 접근할 수 있었습니다. 그러나 ES6의 도입으로 인해 함수 내부에서 블록 스코프 변수를 사용할 수 있게 되었습니다. 이를 이해하기 위해서는 아래의 예제를 살펴보겠습니다.

function example() {
    if (true) {
        let x = 10;
        console.log(x); // 10
    }
    console.log(x); // ReferenceError: x is not defined
}

위의 예제에서 x 변수는 if 블록 내에서만 유효합니다. 따라서 console.log(x)를 if 블록 밖에서 호출하면 ReferenceError가 발생합니다.

결론

자바스크립트의 블록 스코프는 함수 스코프와는 다른 유효 범위를 가지고 있습니다. 함수 스코프는 함수 내에서 변수가 유효하며, 블록 스코프는 블록 내에서 변수가 유효합니다. 이를 이용하여 변수의 유효 범위를 정확하게 제어할 수 있으며, 코드의 가독성과 유지 보수성을 높일 수 있습니다.