렉시컬 스코프(Lexical Scope): 코드 유효 범위 이해하기

포스팅을 통해 렉시컬 스코프에 대해서 알아봅시다!

 

[목차]

1. 렉시컬 스코프란?

2. 렉시컬 스코프의 작동 방식

3. 렉시컬 스코프의 작동 예시

 

---

렉시컬 스코프란?

렉시컬 스코프를 알기 전에 스코프(scope)에 대해서 말하자면, 스코프는 변수가 어디에서 사용할 수 있는 지 결정하는 범위를 의미합니다.

그럼 Lexical 스코프는? 직역하면 어휘 범위...? 라고 말할 수 있습니다.

다시 말하면, 코드가 작성된 위치에 따라 변수의 유효 범위가 결정되는 방식입니다.

코드를 작성할 때 변수가 어디에서 선언되었는 지에 따라서 그 변수를 어디에서 접근할 수 있는지가 결정됩니다.

 

---

렉시컬 스코프의 작동 방식

위에서 말했다시피 함수가 어디에서 선언되었는 지에 따라 그 함수 내부에서 어떤 변수에 접근할 수 있는지가 결정되기 때문에 렉시컬 스코프가 작동합니다. 작성되는 시점에 이미 스코프가 고정되기 때문에 코드가 실행되는 시점이 아니라는 점을 주의해주시길 바랍니다!

 

---

렉시컬 스코프의 작동 예시

말로만 들으면 작동 방식이 어떻게 이루어지는 지 모르니까 예시를 통해 정확한 개념을 알아봅시다.

1) 예시

function outer() {
    let outerVar = 'Outer Variable';

    function inner() {
        console.log(outerVar); // 'Outer Variable'
    }

    inner();
}

outer();

 

inner 함수는 outer 함수 내부에서 정의가 되어있어, 변수인 outerVar에 접근이 가능합니다.

 

조금 더 복잡한 렉시컬 스코프 예시를 봅시다!

 

2) 예시

function grandparent() {
    let grandparentVar = 'Grandparent';

    function parent() {
        let parentVar = 'Parent';

        function child() {
            let childVar = 'Child';
            console.log(grandparentVar); // 'Grandparent'
            console.log(parentVar);     // 'Parent'
            console.log(childVar);      // 'Child'
        }

        child();
    }

    parent();
}

grandparent();

 

여기서 child 함수는 parent 함수 안에 정의되어 있으며, parent 함수는 다시 grandparent 함수 안에 정의되어 있습니다. 이로 인해 child 함수는 자신의 스코프뿐만 아니라, 상위 함수인 parent와 grandparent의 변수에도 접근할 수 있습니다.

 

3) 예시

 

function example() {
    if (true) {
        let blockVar = 'Block';
        console.log(blockVar); // 'Block'
    }

    // 블록 외부에서는 blockVar에 접근할 수 없습니다.
    console.log(blockVar); // ReferenceError: blockVar is not defined
}

example();

 

이전 포스팅 글에서 var, let, const 내용이 있는데, let과 const는 block scope를 가지고 있어서 외부에서는 접근이 안됩니다!

 

---

되게 당연하다고 생각했던 스코프 내용을 lexical scope라는 개념을 가지고 공부를 하니 조금 더 개념이 탄탄해진 것 같습니다! 이번 포스팅은 헷갈리는 게 별로 없었지만, 개념들을 확충할 수 있는 기회였습니다. 더더욱 웹을 향해서 나아갈 것입니다!