Execution context

실행 컨텍스트란?
자바스크립트 엔진에 의해 만들어지고 사용되는 코드 정보를 담은 객체의 집합

자바스크립트의 코드는 3가지 종류:

• 글로벌 스코프에서 실행하는 글로벌 코드
• 함수 스코프에서 실행하는 함수 코드
• eval() 로 실행되는 코드

이 각각의 코드는 자신만의 실행 컨텍스트를 생성한다 :

• 엔진이 스크립트 파일을 실행하기 전에 Global Execution Context(GEC) 생성
• 함수를 호출할 때마다 Function Execution Context(FEC) 생성

Execution Context Stack

실행 컨텍스트가 생성되면 Call Stack 실행 컨텍스트 스택에 쌓이게 된다. GEC는 코드를 실행하기 전에 쌓이고 모든 코드를 실행하면 제거된다. FEC는 호출할 때 쌓이고 호출이 끝나면 제거된다.

function func() {
  console.log('Function Execution Context');
}
console.log('Global Execution Context');
func();

// Global Execution Context
// Function Execution Context

1. 먼저, 코드를 실행하기 전에 GEC가 쌓이고 코드를 실행하면서 콘솔에 "Global Execution Context" 가 출력.
2. func()을 호출하고 그에 대한 FEC가 만들어져 쌓이고 FEC를 실행하며 콘솔에 "Function Execution Context" 가 출력.
3. func()이 종료되고 FEC가 스택에서 제거된 후, 모든 코드의 실행이 끝나면서 GEC가 스택에서 제거.

Structure of Execution Context

구성요소 :

• Lexical Environment
• Variable Environment
• this binding

Lexical environment

Lexical Environment는 변수 및 함수 등의 식별자(Identifier) 및 외부 참조에 관한 정보를 가지고 있는 컴포넌트 이다. 이 컴포넌트는 2개의 구성요소를 갖는다.

• Environment Record
• outer 참조

Environment Record가 식별자에 관한 정보를 가지고 있으며 outer 참조는 외부 Lexical Environment를 참조하는 포인터이다. 정보를 현재 Environment Record에 찾아보고 없으면 outer 참조를 사용하여 외부의 Lexical Environment에 속해 있는 Environment Record를 찾아본다.

Variable environment

Variable Environment는 Lexical Environment와 동일한 성격을 띠지만 var 로 선언된 변수만 저장한다는 점에서 다르다. 즉, Lexical Environment는 var 로 선언된 변수를 제외하고 나머지(let 으로 선언되었거나 함수 선언문)를 저장한다

this biding

this의 바인딩은 실행 컨텍스트가 생성될 때마다 this 객체에 어떻게 바인딩이 되는지를 보여준다.

• GEC의 경우 : strict mode라면 undefined 로 바인딩된다. 아니라면 글로벌 객체로 바인딩된다. (브라우저에선 window, 노드에선 global)
• FEC의 경우 : 해당 함수가 어떻게 호출되었는지에 따라 바인딩된다.

0:  function do_something() {
1:     var a = 1;
2:     let b = 2;
3:     while (true) {
4:         var c = 3;
5:         let d = 4;
6:         console.log(b);
7:         break;
8:     }
9:  }
10:
11: do_something();

do_something()의 execution context

ExecutionContext:
    LexicalEnvironment:
        b -> nothing
        outer: VariableEnvironment
    VariableEnvironment:
        a -> undefined, c -> undefined
        outer: global
    ...

while문의 execution context

ExecutionContext:
    LexicalEnvironment:
        d -> nothing
        outer:
            LexicalEnvironment
                b -> 2
                outer: global
    VariableEnvironment:
        a -> 1, c -> undefined
        outer: global
    ...

while문이 끝나고

ExecutionContext:
    LexicalEnvironment
        b -> 2
        outer: global
    VariableEnvironment:
        a -> 1, c -> 3
        outer: global

d는 조회가 불가능하고, 함수가 끝나면 ExecutionContext는 없어진다.