JavaScript - Lexical Environment ( 렉시컬 환경 )

렉시컬 환경 (Lexcial Environment)

 

 

특정 코드가 작성, 선언된 환경(장소)을 의미한다.

 

코드 block, function, script를 실행하기 앞서 생성되는 특별한 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체이다.

 

---

 

렉시컬 환경을 알기 위해 우선 자바스크립트 엔진이 코드를 실행하는 순서를 알아보자

 

자바스크립트 엔진은 코드 실행을 위해 생성 단계와 실행 단계를 거칩니다.

 

생성 단계에서 자바스크립트 엔진은 Execution Context를 생성하고 Call Stack에 쌓아둡니다.

 

그리고 선언문만 실행해서 Environment Record에 변수명, 함수명등과 같은 식별자와 식별자에 바인딩된(연결된) 값을 기록해둡니다.

 

이 Environment Record가 Lexical Environment에 포함되어 있습니다.

 

 

Execution Context

 

 

 

렉시컬 환경은 크게 두 가지로 구성되어 있습니다. 하나는 Environment Record, 나머지 하나는 Outer Environment Reference

 

 

1. Environment Record

 

환경 레코드로 식별자 결정을 빠르게 하기 위해 식별자와 식별자에 바인딩된 값을 기록해두는 저장소입니다.

 

 

환경 레코드의 역할을 알기 위해 자바스크립트 엔진이 코드를 실행하는 순서를 알아봅시다.

 

1. 자바스크립트 엔진은 코드 실행을 위해 생성 단계와 실행 단계를 거칩니다.

 

2. 생성 단계에서 자바스크립트 엔진은 Global Execution Context를 생성하고 Call Stack에 쌓아둡니다.

 

3. 그리고 선언문만 실행해서 Environment Record에 변수명, 함수명등과 같은 식별자와 식별자에 바인딩된(연결된) 값을 기록해둡니다.

 

4. 이 Environment Record가 Lexical Environment에 포함되어 있습니다.

 

5. 즉, Environment Record는 생성 단계에서 식별자와 식별자에 바인딩된 값을 기록해두는 저장소입니다.

 

 

2. Outer

Outer Environment Reference - 외부 환경 참조

-> 바깥 Lexical Environment를 가리킴

 

Outer의 역할은 식별자 결정을 할때 Call Stack 맨 위의 Execution Context만 보고서 식별자 결정이 되지 않을 경우 상위 Execution Context의 Lexical Environment의 Record를 참조해야하는 경우가 있습니다.(Call Stack 아래쪽에 있는 실행 컨텍스트)

 

이때 상위(바깥) Lexical Environment를 가리키는것이 Outer입니다.

 

<예시 코드>

 

function sample() {
  var number = 10;

  function depth1() {
    console.log(number);
  }
  depth1()
}

sample()

 

위 코드를 실행하면?

 

 

 

위 코드 실행 직전의 Call Stack을 그림으로 나타내면 아래와 같이 표현할 수 있습니다.

 

 

실행 단계에서 자바스크립트 엔진은 가장 먼저 depth1의 실행 컨텍스트를 볼것입니다. 하지만 depth1의 Record에는 number 식별자가 있지 않으므로 Outer를 통해 sample 함수 Execution Context의 Record에서 sample 식별자와 해당 식별자에 바인딩된 값을 참조할 것입니다.

 

 

 

출처

https://www.youtube.com/watch?v=EWfujNzSUmw&t=99s 

https://bbeeyaks-moment.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%A0%89%EC%8B%9C%EC%BB%AC-%ED%99%98%EA%B2%BD%EC%9D%B4%EB%9E%80