JavaScript - 실행 컨텍스트와 렉시컬 환경

출처: 모던 자바스크립트 딥다이브 그림 23–5 실행컨텍스트 스택

 

호이스팅, 클로저, this 바인딩 등을 알려면 실행 컨텍스트와 렉시컬 환경을 알아야 한다. 

 

실행 컨텍스트 (Execution Context)

자바스크립트 코드가 실행될 때 생성되는 실행 정보의 환경이다. 어떤 코드가 실행될지, 변수와 함수가 어떻게 실행될지를 관리한다.

 

구성요소

1. 렉시컬 환경 (Lexical Environment)

• 변수를 저장하고 관리하며, 스코프 체인을 관리한다.
• 현재 실행 중인 코드 블록(함수, 전역, 블록)의 스코프를 나타낸다.

2. 변수 환경 (Variable Environment)

• 렉시컬 환경과 비슷하지만, var 키워드로 선언된 변수만 관리한다.
• 함수 실행 시 초기 상태를 보관한다.

3. this 바인딩 (This Binding)

• 현재 실행 중인 코드에서의 this 값을 가리킨다.

---

렉시컬 환경 (Lexical Environment)

실행 컨텍스트 내부의 구성 요소 중 하나로, 변수와 함수 선언을 기록하고 관리한다.

현재 코드 블록에서 사용할 스코프와 식발자(변수, 함수)를 저장한다.

즉 렉시컬 환경은 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할을 하는 렉시컬 스코프의 실체이다.

구성요소

1. 환경 레코드 (Environment Record)

현재 스코프 내에서 선언된 변수와 함수의 정보를 저장하는 객체이다.

 

2. 외부 환경 참조 (Outer Environment Reference)

상위 스코프에 대한 참조를 저장하여, 스코프 체인을 구현한다.

---

예제 코드

function outer() {
  let x = 10;
 
  function inner() {
    let y = 20;
    console.log(x + y);
  }
 
  inner();
}
outer();
 

 

실행 컨텍스트

outer 함수 호출시 실행 컨텍스트 생성. → 렉시컬 환경에 x 저장.

inner 함수 호출 시 새로운 실행 컨텍스트 생성. →  렉시컬 환경에 y 저장, 외부 환경 참조로 outer의 렉시컬 환경 참조.

 

렉시컬 환경

outer의 렉시컬 환경 -  x와 outer 스코프 참조.

inner의 렉시컬 환경 -  y와 inner 스코프 참조.

요약 차이점

특징	실행 컨텍스트	렉시컬 환경
역할	실행 중인 코드의 실행 정보를 관리	스코프와 변수 관리를 위한 저장소
위치	런타임에 생성되어 자바스크립트의 실행 과정을 제어	실행 컨텍스트 내부의 구성 요소
포함 내용	렉시컬 환경, 변수 환경, this 바인딩	환경 레코드와 외부 환경 참조
예제 포함 여부	this와 var의 초기 상태 포함	let, const, 함수 선언 등 현재 스코프에서 유효한 식별자
생성 시점	함수 호출, 전역 코드 실행, eval 실행 시	함수 호출, 블록 실행 등 스코프가 생성될 때