[JavaScript] Lexical Scope

안녕하세요. J4J입니다.

 

이번 포스팅은 Lexical Scope에 대해 적어보는 시간을 가져보려고 합니다.

 

 

Lexical Scope란?

 

lexical scope는 자바스크립트에서 변수를 찾아 사용할 수 있는 범위를 의미합니다.

 

예를 들어 다음과 같은 코드가 있다고 가정해보겠습니다.

 

<script>
    let name = 'name';

    function getName() {
        console.log(name); // name
    }

    getName();
</script>

 

 

getName이라는 함수 내부에서 name이라는 변수를 출력해보면 함수 내부에서 name이라는 변수를 선언한 적이 없지만 'name'이라는 값이 출력이 됩니다.

 

왜냐하면 getName이라는 함수에서는 자기 자신에게 name이라는 변수가 없다면 상위 실행 문맥에 존재하는 name변수를 탐색하여 찾은 변수값을 출력해주기 때문입니다.

 

그리고 이처럼 사용할 수 있는 변수값들의 범위를 lexical scope라고 합니다.

 

 

Lexical Scope 기준점

 

lexical scope에를 이용하여 사용되는 변수들의 기준점은 함수를 정의한 위치가 기준이 됩니다.

 

예를 들어 다음과 같은 코드가 있다고 가정해보겠습니다.

 

<script>
    let name = 'first';

    function getName() {
        return name;
    }

    function getLog() {
        name = 'second';

        console.log(getName()); // second
        console.log(name); // second
    }

    getLog();
</script>

 

 

반응형

 

 

그리고 이 코드를 살짝 변경하여 다음과 같은 코드로 만들어 보겠습니다.

 

<script>
    let name = 'first';

    function getName() {
        return name;
    }

    function getLog() {
        let name = 'second';

        console.log(getName()); // first
        console.log(name); // second
    }

    getLog();
</script>

 

 

위 두 코드에서 다른 점은 getLog함수의 name입니다.

 

첫 번째는 전역에 존재하던 name변수에 새로운 값을 할당해 준 것이고 두 번째는 getLog함수 내부에 새로운 name변수를 생성한 것입니다.

 

여기서 알아야 되는 부분은 getName함수가 실질적으로 사용되는 위치가 getLog함수 내부이지만 getName함수가 바라보고 있는 name은 전역에 존재하는 name변수라는 것입니다.

 

만약 실질적으로 사용되는 위치인 getLog함수에 존재하는 name을 getName에서 가져다 사용한다면 두 번째 예시에서도 모두 'second'라는 문자열이 출력돼야 합니다.

 

하지만 이런 생각과 달리 getName의 결괏값은 'first'가 나옴으로 써 전역에 존재하는 name변수를 바라보고 있다는 것을 확인할 수 있습니다.

 

실행되는 위치가 기준이 아니라 함수가 정의된 위치를 기준으로 변수를 가져와 사용한다는 것을 보여주는 대표적인 예시입니다.

 

 

 

 

이상으로 Lexical Scope에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.