[모던 JS Deep Dive] 23장 - 실행 컨텍스트

23.1 소스코드의 타입

  - 전역 코드

    - 전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등 내부 코드는 포함 X

    - 소스코드; 실행 가능한 코드, 소스코드 타입에 따라 실행 컨텍스트 생성 과정과 관리 내용 다름

    - 전역 변수 관리 위한 최상위 스코프인 전역 스코프 생성

    - 전역 코드 평가 시 전역 실행 컨텍스트 생성됨

  - 함수 코드

    - 함수 내부에 존재하는 소스코드, 함수 내부에 중첩된 함수, 클래스 등 내부 코드는 포함 X

    - 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체 관리

    - 함수 코드 평가 시 함수 실행 컨텍스트 생성됨

  - eval 코드

    - 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드

    - strict mode에서 자신만의 독자적인 스코프 생성

    - eval 코드 평가 시 eval 실행 컨텍스트 생성됨

  - 모듈 코드

    - 모듈 내부에 존재하는 소스코드, 모듈 내부의 함수, 클래스 등 내부 코드는 포함 X

    - 모듈별로 독립적인 모듈 스코프 생성

    - 모듈 코드 평가 시 모듈 실행 컨텍스트 생성됨

23.2 소스코드의 평가와 실행

  - JS 엔진은 소스코드의 평가와 실행 과정으로 나누어 처리함

  - 소스코드 평가 과정

    - 실행 컨텍스트 생성

    - 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로

      실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록

  - 소스코드 실행 과정

    - 런타임

    - 소스코드 실행에 필요한 정보,

      즉 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득

    - 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록됨

23.3 실행 컨텍스트의 역할

// 전역 코드와 함수 코드 예제

// 전역 변수 선언
const x = 1;
const y = 2;

// 함수 정의
function foo(a) {
    // 지역 변수 선언
    const x = 10;
    const y = 20;
    
    // 메서드 호출
    console.log(a + x + y);  // 130
}

// 함수 호출
foo(100);

// 메서드 호출
console.log(x + y);  // 3

 

  - 전역 코드 평가

    - 선언문만 먼저 실행됨

    - 전역 변수와 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록됨

    - var 키워드로 선언한 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 객체의 프로퍼티와 메서드가 됨

  - 전역 코드 실행

    - 런타임 시작, 전역 코드 순차적으로 실행됨

    - 함수 호출되면 코드 실행 순서 변경하여 함수 내부로 진입

  - 함수 코드 평가

    - 매개변수와 지역 변수 선언문이 먼저 실행됨

    - 매개변수와 지역 변수가 실행 컨텍스트가 관리하는 지역 스코프에 등록됨

    - 함수 내부에서 지역 변수처럼 사용할 수 있는 arguments 객체가 생성되어 지역 스코프에 등록되고,

      this 바인딩도 결정됨

  - 함수 코드 실행

    - 런타임 시작, 함수 코드 순차적으로 실행됨

    - 식별자인 console을 스코프 체인을 통해 검색

      - 스코프 체인에 등록되어 있지 않고, 전역 객체의 프로퍼티로 존재

      - console 객체의 프로토타입 체인을 통해 log 프로퍼티 검색

      - a, x, y 식별자는 스코프 체인을 통해 검색

      - 함수 코드 실행 종료 후 함수 호출 이전으로 되돌아가 전역 코드 실행 계속

  - 코드가 실행되기 위해서는 스코프, 식별자, 코드 실행 순서 등의 관리 필요

    - 실행 컨텍스트 필요!

    - 실행 컨텍스트: 소스코드를 실행하는데 필요한 환경 제공, 코드의 실행 결과를 실제로 관리하는 영역,

      식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프,

      코드 실행 순서 관리를 구현한 내부 메커니즘으로 모든 코드는 실행 컨텍스트를 통해 실행되고 관리됨

    - 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리됨

    - 코드 실행 순서는 실행 컨텍스트 스택으로 관리됨

23.4 실행 컨텍스트 스택

const x = 1;

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

foo();  // 6

 

  - 전역 코드의 평가와 실행

    - JS 엔진은 먼저 전역 코드를 평가하여 전역 실행 컨텍스트를 생성하고 실행 컨텍스트 스택 (콜 스택)에 Push

    - 전역 변수와 전역 함수는 실행 컨텍스트에 등록됨

  - foo 함수 코드의 평가와 실행

    - 전역 함수 호출 시 전역 코드의 실행은 일시 중단, 코드의 제어권은 전역 함수 내부로 이동

    - JS 엔진은 foo 함수 내부의 함수 코드 평가하여 foo 함수 실행 컨텍스트 생성하고 실행 컨텍스트 스택에 Push

    - foo 함수의 지역 변수 y와 중첩 함수 bar가 foo 함수 실행 컨텍스트에 등록됨

  - bar 함수 코드의 평가와 실행

    - 중첩 함수 bar가 호출되면 foo 함수 코드의 실행은 일시 중단, 코드의 제어권이 bar 함수 내부로 이동

    - JS 엔진은 bar 함수 내부의 함수 코드 평가하여 bar 함수 실행 컨텍스트 생성하고 실행 컨텍스트 스택에 Push

    - bar 함수의 지역 변수 z가 bar 함수 실행 컨텍스트에 등록됨

    - console.log 메서드 호출하면 마찬가지로 이에 대한 실행 컨텍스트도 생기고 Push 작업 등 발생함

  - foo 함수 코드로 복귀

    - 앞에서 bar 함수 종료되면 코드 제어권은 foo 함수로 다시 이동

    - JS 엔진은 bar 함수 실행 컨텍스트를 실행 컨텍스트 스택에서 Pop하여 제거

  - 전역 코드로 복귀

    - foo 함수 종료되면 코드 제어권은 다시 전역 코드로 이동

    - JS 엔진은 foo 함수 실행 컨텍스트를 실행 컨텍스트 스택에서 Pop 하여 제거

  - 실행 컨텍스트 스택은 코드의 실행 순서를 관리함

    - 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트

    - 실행 중인 실행 컨텍스트 (Running Execution Context)

23.5 렉시컬 환경

  - Lexical Environment

    - 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조

    - 실행 컨텍스트 구성하는 컴포넌트

    - 렉시컬 환경은 스코프와 식별자 관리 (실행 컨텍스트 스택은 코드의 실행 순서 관리)

  - 실행 컨텍스트는 사실 LexicalEnvironment 컴포넌트와 VariableEnvironment 컴포넌트로 구성됨

  - 렉시컬 환경 (Lexical Environment)

    - 환경 레코드 (Environment Record)

      - 스코프에 포함된 식별자 등록, 등록된 식별자에 바인딩된 값 관리하는 저장소

      - 소스코드 타입에 따라 관리하는 내용 차이 존재

    - 외부 렉시컬 환경에 대한 참조 (LexicalEnvironmentOuterReference)

      - 상위 스코프 가리킴

      - 상위 스코프: 외부 렉시컬 환경,

                         즉 해당 실행 컨텍스트 생성한 소스코드 포함하는 상위 코드의 렉시컬 환경

      - 단방향 링크드 리스트인 스코프 체인 구현

23.6 실행 컨텍스트의 생성과 식별자 검색 과정

var x = 1;
const y = 2;

function foo (a) {
  var x = 3;
  const y = 4;
  
  function bar (b) {
    const z = 5;
    console.log(a + b + x + y + z);
  }
  bar(10);
}

foo(20);  // 42

 

  - 전역 객체 생성

    - 전역 코드 평가 이전에 전역 객체가 생성됨

    - 전역 객체에는 빌트인 전역 프로퍼티/함수, 표준 빌트인 객체, 클라이언트/서버 사이드 호스트 객체 포함

    - Object.prototype 상속 받음 (전역 객체도 프로토타입 체인의 일원)

  - 전역 코드 평가

    - 전역 실행 컨텍스트 생성

      - 비어있는 전역 실행 컨텍스트 생성되어 실행 컨텍스트 스택에 Push

      - 실행 컨텍스트 스택의 최상위 => Running Execution Context

    - 전역 렉시컬 환경 생성 (전역 실행 컨텍스트에 바인딩됨)

      - 전역 환경 레코드 생성

        - 객체 환경 레코드 생성

          - BindingObject에 바인딩 되어 있는 전역 객체의 프로퍼티와 메서드

          - var 변수 선언문, 함수 선언문

        - 선언적 환경 레코드 생성

          - let. const 키워드로 선언한 전역 변수는 선언적 환경 레코드에 등록되고 관리됨

          - 전역 변수이지만 전역 객체의 프로퍼티로 참조는 불가

      - this 바인딩

        - 전역 환경 레코드의 [[GlobalThisValue]] 내부 슬롯에 this 바인딩됨 (전역 객체)

        - this 바인딩은 전역 환경 레코드와 함수 환경 레코드에만 존재 (객체 환경/선언적 환경 레코드 X)

      - 외부 렉시컬 환경에 대한 참조 결정

        - 현재 평가 중인 소스코드 포함하는 외부 소스코드의 렉시컬 환경, 즉 상위 스코프 가리킴

        - 단방향 링크드 리스트인 스코프 체인 구현

  - 전역 코드 실행

    - 변수 할당문 실행, 함수 호출

  - foo 함수 코드 평가

    - 함수 실행 컨텍스트 생성

      - foo 함수 실행 컨텍스트가 생성되고 함수 렉시컬 환경 완성된 다음에 실행 컨텍스트 스택에 Push

    - 함수 렉시컬 환경 생성

      - 함수 환경 레코드 생성

        - 매개변수, arguments 객체, 함수 내부에서 선언한 지역 변수와 중첩 함수 등록 및 관리

      - this 바인딩

        - 함수 환경 레코드의 [[ThisValue]] 내부 슬롯에 this 바인딩됨 (함수 호출 방식에 따라 동적 결정)

      - 외부 렉시컬 환경에 대한 참조 결정

        - 함수의 상위 스코프를 함수 객체의 내부 슬롯 [[Environment]]에 저장

  - foo 함수 코드 실행

    - 매개변수에 인수 할당, 변수 할당문 실행, 함수 호출

  - bar 함수 코드 평가

  - bar 함수 코드 실행

    - console 식별자 검색

      - console 식별자를 스코프 체인에서 검색

      - 전역 렉시컬 환경의 객체 환경 레코드의 BindingObject 통해 전역 객체에서 찾을 수 있음

    - log 메서드 검색

      - console 객체에서 log 메서드 검색 (프로토타입 체인 이용)

    - 표현식 a + b + x + y + 의 평가

      - 식별자는 스코프 체인을 통해 검색 (연속되는 렉시컬 환경)

    - console.log 메서드 호출

  - bar 함수 코드 실행 종료

    - 실행 컨텍스트 스택에서 Pop 되었다고 해서 함수 렉시컬 환경 즉시 소멸하는 것은 아님

    - 렉시컬 환경은 실행 컨텍스트에 의해 참조되기는 하지만 독립적인 객체임

  - foo 함수 코드 실행 종료

  - 전역 코드 실행 종료

    - 전역 실행 컨텍스트도 실행 컨텍스트 스택에서 Pop 됨

23.7 실행 컨텍스트와 블록 레벨 스코프

  - 선언적 환경 레코드 갖는 렉시컬 환경 새롭게 생성하여 기존의 전역 렉시컬 환경 교체

  - 외부 참조는 블록문 실행 전의 전역 렉시컬 환경 가리킴 (만약 상위 스코프가 전역인 경우)

  - for 문의 변수 선언문에 let을 사용한 경우는 코드 블록이 반복해서 실행될 때마다

    코드 블록을 위한 새로운 렉시컬 환경 생성하여 식별자의 값 유지

  - for 문 내에서 정의된 함수 있으면 함수 상위 스코프는 for 문의 코드 블록이 생성한 렉시컬 환경