[FE] 📚 렉시컬 스코프(Lexical scope)란?

728x90

🤗 오늘의 위클리 페이퍼는

렉시컬 스코프(Lexical scope)에 대한 토픽입니다.

📝 스코프(Scope)란?

프로그래밍을 배우다 보면 '스코프(Scope)'라는 용어를 자주 접하게 됩니다. 스코프는 변수나 함수가 어디서 접근 가능한지를

정의하는 범위를 말합니다. 자바스크립트에서는 '렉시컬 스코프(Lexical Scope)'라는 개념을 사용합니다.

이번 글에서는 렉시컬 스코프가 무엇인지, 어떻게 작동하는지, 그리고 왜 중요한지에 대해 알아봅시다.

📗 렉시컬 스코프

스코프란 식별자(변수, 함수 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름) 접근 규칙에 따른 유효 범위를 뜻합니다.

렉시컬 스코프란 식별자 유효 범위가 함수를 호출할 때 결정되는 것이 아닌, 선언할 때 결정되는 것을 뜻합니다. 정적 스코프(Static scope)라고도 합니다. 자바스크립트는 렉시컬 스코프를 따릅니다.

즉, 코드가 작성된 위치에 따라 변수의 유효 범위가 정해집니다. 이때 유효 범위는 중괄호 {} 안에서 결정되며, 이러한 범위를 '블록 스코프'라고도 합니다.

렉시컬 스코프를 이해하기 위해 간단한 예제를 살펴보겠습니다.

function outerFunction() {
    const outerVariable = '나는 외부 함수의 변수입니다';

    function innerFunction() {
        const innerVariable = '나는 내부 함수의 변수입니다';
        console.log(outerVariable); // '나는 외부 함수의 변수입니다'
        console.log(innerVariable); // '나는 내부 함수의 변수입니다'
    }

    innerFunction();
    // console.log(innerVariable); // 오류: innerVariable은 정의되지 않았습니다
}

outerFunction();

위 코드에서 outerFunction 안에 innerFunction이 정의되어 있습니다.

중요한 점은 innerFunction이 outerFunction의 변수인 outerVariable에 접근할 수 있다는 것입니다.

이는 innerFunction이 정의된 위치가 outerVariable의 스코프 안에 있기 때문입니다.

하지만 outerFunction 밖에서는 innerFunction의 변수인 innerVariable에 접근할 수 없습니다.

📙 렉시컬 스코프의 작동 방식

렉시컬 스코프는 코드가 실행될 때가 아닌, 작성될 때 스코프가 결정됩니다. 이는 자바스크립트 엔진이 코드를 해석하고 실행할 때 각 변수와 함수의 스코프를 미리 파악한다는 의미입니다.

const globalVariable = '나는 전역 변수입니다';

function outerFunction() {
    const outerVariable = '나는 외부 함수의 변수입니다';

    function innerFunction() {
        console.log(globalVariable); // '나는 전역 변수입니다'
        console.log(outerVariable);  // '나는 외부 함수의 변수입니다'
    }

    innerFunction();
}

outerFunction();

이 예제에서 innerFunction은 전역 변수 globalVariable과 outerFunction의 변수 outerVariable 모두에 접근할 수 있습니다. 이는 innerFunction이 전역 스코프와 outerFunction의 스코프 모두에서 정의되었기 때문입니다.

📘 렉시컬 스코프가 중요한 이유

렉시컬 스코프를 이해하는 것은 함수형 프로그래밍, 클로저(Closure) 등 자바스크립트의 여러 중요한 개념을 이해하는 데 필수적입니다. 또한, 코드를 작성할 때 변수의 유효 범위를 명확히 이해하면 디버깅이 쉬워지고, 예기치 않은 오류를 방지할 수 있습니다.

✅ 요약

렉시컬 스코프는 코드가 작성된 위치에 따라 변수와 함수의 유효 범위가 결정되는 개념입니다. 이는 자바스크립트 엔진이 코드를 해석할 때 스코프를 미리 파악하기 때문에 가능한 일입니다. 렉시컬 스코프를 잘 이해하면 자바스크립트 코드를 보다 효율적으로 작성하고 관리할 수 있습니다.