본문 바로가기

Front-End/JavaScript

[JavaScript] 렉시컬환경

렉시컬환경 (Lexical Environment)

: 실행할 스코프 범위 안에 있는 모든 변수와 함수를 프로퍼티로 저장한 객체
: 스크립트 전체, 실행 중인 함수, 코드블록 등 자신만의 렉시컬 환경을 가진다.
: 사용하고자 하는 변수, 함수 등이 어떤 렉시컬 환경에 속해 있는지에 따라서 이용 가능한 변수가 달라진다.

 

렉시컬 환경의 구성

1) 환경 레코드
: 스크립트 전체, 실행중인 함수, 코드블록 등 자신만의 렉시컬 환경에서 선언된 변수와 함수가 저장되는 곳
2) 외부 렉시컬 환경
: 부모 환경의 렉시컬 환경 참조값을 가지는 곳
: 함수 실행 시점이 아닌 선언 시점의 외부 환경

 

 

렉시컬 환경 예제
<script>
    // (A)

    let name1 = 'kwang'; // (B)
    var name2 = 'sunny';

    function test(){
        let msg = 'Hi~';
        console.log(`${msg} ${name1} ${name2}`); // (C)
    }
    
    test(); // (D)
</script>


위 코드에서 존재하는 렉시컬 환경은 스크립트 전체와 test함수의 렉시컬 환경 2가지로 아래 그림과 같다.



함수 내의 변수를 마주하면 해당 함수의 렉시컬 환경 내 환경레코드에서 변수를 찾고 존재하지 않으면 외부 렉시컬 환경의 참조값에서 찾는 과정을 진행한다. 외부 렉시컬 환경에도 존재하지 않으면 ReferenceError가 발생하게 된다.



참고
: https://kwangsunny.tistory.com/m/37