실행 컨텍스트 2

실행 컨텍스트 스택

실행 컨텍스트는 스택으로 관리되는데, 이를 실행 컨텐스트 스택(Execution Context Stack)

이라 부른다.

const x = 1;

function foo() {
  const y = 2;

  function bar() {
    const z = 3;

    console.log(x + y + z) 
  }

  bar()
}

foo() // 6

위와 같은 소스 코드가 존재한다면 실행 컨텍스트 스택에는 아래와 같이 실행 컨텍스트가 추가(push)되고 제거(pop)될 것이다.

• Stack : []
• Stack : [ Global_Context ] ← Global_Context Push
• Stack : [ Global_Context, foo_Context ] ← foo_Context Push
• Stack : [ Global_Context, foo_Context, bar_Context ] ← bar_Context Push
• Stack : [ Global_Context, foo_Context ] ← bar_Context Pop
• Stack : [ Global_Context ] ← foo_Context Pop
• Stack : [] ← Global_Context Pop

실행 컨텍스트는 위와 같이 현재 실행 중인 코드를 실행 컨텍스트 스택 최상위에서 관리하는데,

이 때 실행 컨텍스트 스택 최상위에 존재하는 실행 컨텍스트를 실행 중인 컨텍스트라 부른다.

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

소스 코드의 실행 순서를 실행 컨텍스트 스택이 관리한다면,

스코프 및 식별자는 렉시컬 환경이 관리한다.

실행 컨텍스트는 LexicalEnviroment 컴포넌트와 VariableEnviroment 컴포넌트로 구성되는데,

생성 초기에는 두 컴포넌트가 같은 렉시컬 환경을 참조한다.

이후 소스 코드 실행 중 몇 가지 상황을 만나는 경우 VariableEnviroment 컴포넌트를 위해

새로운 렉시컬 환경을 생성한다.

var x = 1;
const y = 2;

function foo(a: number) {
  var x = 3;
  const y = 4;
  
  function bar(b: number) {
    const z = 5;

    console.log(a + b + x + y + z);
  }

  bar(10);
}

foo(20); // 42

앞으로 차근차근 위 소스 코드가 어떻게 동작하는지 실행 컨텍스트와 렉시컬 환경 관점으로 살펴볼 예정이다.