[JS Deep Dive] 실행 컨텍스트

실행 컨텍스트

식별자(변수, 함수, 클래스, 매개변수, 내장함수, this, etc.)를 등록하고 관리하는 스코프(렉시컬 환경)와 코드 실행 순서 관리(실행컨텍스트 스택)를 구현한 내부 메커니즘

모든 코드는 실행 컨텍스트를 통해 실행되고 관리됨.

JS 엔진은 코드를 평가, 실행하는 과정으로 나누어 처리하는데
실행 컨텍스트는 평가 + 실행 단계로 만들어진다.

평가과정: 실행 컨텍스트를 생성, 렉시컬 스코프에 등록
실행과정: 평가가 끝나면 소스코드를 순차적으로 실행 (런타임)

실행 컨텍스트 스택

코드 실행 순서를 관리

자바스크립트는 싱글 스레드 언어로 하나의 스택(a.k.a. 콜 스택)에 함수가 쌓여서 실행됨

ex)

const x = 1;

function foo() {
  const y = 2;
  
  function bar() {
    const z = 3;
    console.log(x + y + z);
  }
  bar();
}

foo();

global() -> foo() -> bar() ... 스택에 쌓여서 실행

1) 전역코드의 평가와 실행
전역코드를 평가하고 실행 컨텍스트를 생성, 스택에 push.
전역 변수 x와 전역변수 foo가 전역 실행 컨텍스트에 등록.
전역코드를 실행하고 x에 값을 할당, foo를 호출함.

2) 내부함수 평가와 실행
foo가 호출되면 전역코드의 실행을 중단하고 foo로 이동.
foo함수를 평가하고 실행 컨텍스트를 생성, 스택에 push.
지역 변수 y와 중첩함수 bar가 foo의 실행 컨텍스트에 등록.
foo함수를 실행하고 y에 값을 할당, bar를 호출함.

3) 중첩함수 평가와 실행
bar가 호출되면 foo의 실행을 중단하고 bar로 이동.
bar함수를 평가하고 실행 컨텍스트를 생성, 스택에 push.
지역 변수 z가 bar의 실행 컨텍스트에 등록.
bar함수를 실행하고 z에 값을 할당.
bar함수가 종료되면 스택에서 pop.

4) 내부함수 실행 후 종료
foo함수를 실행하고 종료되면 스택에서 pop

5) 전역코드 실행 후 종료
전역코드를 실행하고 종료되면 스택에서 pop

즉, 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 항상 현재 실행 중인 코드의 실행 컨텍스트이다.

렉시컬 환경

식별자와 스코프를 관리
삭별자와 식별자에 바인딩 된 값, 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트

실행컨텍스트 = Lexical Environment 컴포넌트 + Variable Environment 컴포넌트

Lexical 환경 = 환경레코드 + 외부 렉시컬 환경에 대한 참조

1) 환경 레코드(Environment Record)
스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩 된 값을 관리하는 저장소.

2) 외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)
상위스코프를 가리킴.
상위스코프는 상위 코드의 렉시컬 환경을 말함.
이때 단방향 참조방식인 스코프 체인을 구현함.
(스코프 체인 = 실행 컨텍스트 체인)