자바스크립트의 실행 컨텍스트 (Execution Context) 란?

실행 컨텍스트란?

• 함수 실행 내에서 환경을 가리키는 추상적인 개념이다.
• 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

실행 컨텍스트의 생성 시점

• 실행 컨텍스트는 일반적으로 매 함수 호출 시에 생성된다.
• 함수 호출만큼 자주 일어나진 않지만, 함수 호출 외에도 전역 공간, eval() 함수 실행에도 실행 컨텍스트가 구성된다.

화살표 함수의 실행 컨텍스트

• 화살표 함수도 일반 함수처럼 실행 컨텍스트가 생긴다.
• 단, 화살표 함수의 this 는 lexically scoped 된다.
  • 그래서 화살표 함수는 어떻게 호출되냐보다 어떤 블럭에서 정의되었냐가 중요하다.

실행 컨텍스트가 하는 일

• 호이스팅을 수행한다.
• this 의 값을 결정한다.
• 현재의 스코프에서 어떤 변수에 접근할 수 있는지를 결정한다.
• 인자(arguments)를 관리한다.
• 변수의 생성과 메모리의 할당에도 관여한다.

실행 컨텍스트와 콜스택

• 매 함수 호출시 생성되는 실행 컨텍스트는 스택 구조로 콜스택에 쌓이게 된다.

function outerFunction() {
  function innerFunction() {
    console.log("inner function");
  }

  console.log("outer function");
}

outerFunction();

• 위의 예제 코드를 실행하면 콜 스택에는 다음과 같은 순서로 컨텍스트가 쌓인다.
  • 전역 컨텍스트 -> outerFunction -> innerFunction
• 스택 구조의 특성을 그대로 받아 다음의 순서로 콜스택에서 제거된다.
  • innerFunction -> outerFunction -> 전역 컨텍스트
• 콜 스택의 맨 위에 있는 컨텍스트가 현재 실행 중인 컨텍스트이다.
• 실행 컨텍스트 활성화 시에 엔진은 환경 정보를 실행 컨텍스트 객체에 저장한다.

실행 컨텍스트에 담기는 정보

• 실행 컨텍스트는 개발자가 코드로 확인할 수는 없지만 몇가지 정보가 담긴다.

Variable Environment

• 자바스크립트 엔진이 변수 참조를 참조하거나 변수의 스코프를 결정하는데 사용된다.
• 컨텍스트 내의 식별자 정보를 가지고 있다.
• 외부 환경 정보를 가지고 있다.
  • Outer Environment Reference (snapshot)
    • 바로 직전 컨텍스트의 Lexical Environment
• 선언 시점의 Lexical Environment 의 스냅샷을 가지고 있다. (스냅샷이므로 변경사항이 반영되지 않는다.)
  • Environment Record (snapshot)
    • Declarative Environment Records: 매개변수명, 변수의 식별자, 선언한 함수의 함수명
    • Object Environment records: 객체 내부의 환경 레코드

Lexical Environment

• 자료구조로 함수나 코드 블럭의 정적인 스코핑을 나타낸다.
• 처음엔 Variable Environment 와 같은 정보를 가지고 있다.
  • 처음에는 Variable Environment 와 같지만, 변경 사항이 실시간으로 반영된다.
  • ex) while 이나 for 같은 블록 구문을 사용하는 순간 변경된다.

This Binding

• 이름처럼 this 식별자가 바라봐야 할 대상 객체가 들어있다.

코드로 살펴보기

function do_something() {
  var a = 1;
  let b = 2;
  while (true) {
    var c = 3;
    let d = 4;
    console.log(b);
    break;
  }
}

do_something();

• do_something() 을 실행한 순간 실행 컨텍스트는 아래처럼 구성된다.

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

• 아직 내부 블럭이 해석되지 않아 LexicalEnvironment 는 변수 d 와 같은 정보를 가지고 있지 않다.
  • 다만 c 는 var 로 선언되어 이미 호이스팅되어 있다.
• while(true) 에 들어가는 순간 실행 컨텍스트는 아래처럼 변한다.

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

• while 블록 내부로 들어와 d 에 대한 정보를 환경에 넣었다.

실행 컨텍스트의 메인 컴포넌트

• 실행 컨텍스트는 두가지 메인 컴포넌트로 이루어져 있다.

Variable Object (VO)

• 위에서 언급했던 Variable Environment 내부에 Environment Record 에 존재하는 한 컴포넌트이다.
• Variable Object 는 자료구조로 컨텍스트 내부에서 선언된 모든 변수, 함수, 인자들의 집합을 가지고 있다.
• 전역 컨텍스트에서 Variable Object 는 window (브라우저의 경우) 와 같은 전역 객체 그 자체이다.
  • 실행 컨텍스트에 따라 가리키는 객체가 달라지게 된다.
  • 전역 코드와 함수 코드의 구성 요소가 다르기 때문이다.
    • 함수 코드에는 인자가 있지만, 전역 코드엔 없다.

Scope Chain

• 스코프 체인은 객체의 링크드 리스트로 현재 컨텍스트의 VO 에서 시작하여, 외부 컨텍스트의 VO, 글로벌 컨텍스트까지 이어진다.
• 엔진은 스코프 체인을 통해 렉시컬 스코프를 파악한다.
• Variable Lookup 에 활용된다.
  • 검색에 실패하는 경우 Reference Error 가 발생한다.

[[Scopes]] 프로퍼티

• 함수는 내부에 [[Scopes]] 라는 프로퍼티를 가지고 있다.
  • 자바스크립트 코드에서는 직접 접근할 수 없다.
• 함수의 생성 시점에 생겨난다.
• Lexical Environment 로의 참조를 가지고 있다.
• Environment Records 의 배열이다.
  • [Lexical Environment, 외부함수의 실행 환경, 전역 객체] 등을 갖고 있다.
• 함수 내부에서 어떤 변수를 이용할 때 이 프로퍼티를 이용하여 해석한다.
  • 스코프 체인처럼 차례차례 Environment Records 의 배열을 뒤져본다.
• 외부 함수의 실행 컨텍스트가 소멸하여도 [[Scopes]] 는 여전히 외부 함수의 실행 환경을 참조할 수 있다.
  • 이를 클로저 (Closure) 라고 한다.

레퍼런스

https://stackoverflow.com/questions/23948198/variable-environment-vs-lexical-environment