17. Execution context

함수의 호출 방식에 따라 this가 참조하는 값이 결정되는 this 바인딩

Index

소스코드의 타입

실행 컨텍스트 스택 & 렉시컬 환경

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



1. 소스코드의 타입

🧐 Q. 실행컨텍스트를 이해함에 있어 '’소스코드의 타입’’을 알아야 하는 이유는 무엇일까?

Anwer) 각 소스코드에 따라서 ⭐️실행컨텍스트🌟생성하고 🌟실행하는 방식이 다르다.

1.1 소스코드의 타입이란?

자바스크립트에서 소스코드는 다음과 같은 타입으로 분류된다.

  • Global code: 전역 컨텍스트에서 실행하는 코드
  • Function code: 함수 내부에서 실행되는 코드
  • Eval code: eval()함수로 실행되는 코드
  • Module code: 모듈 스코프에서 실행되는 코드
  • Script code: 일반 스크립트에서 일행되는 코드


1.2 소스코드 타입별 실행 컨텍스트 차이

a. Global code(전역 코드)

  • 역할: 프로그램 시작 시 최초로 실행되는 코드
  • 특징:
    • 전역 실행 컨텍스트 생성
    • 전역 객체(window 또는 global)와 전역 스코프로 초기화
    • var키워드로 선언된 변수는 전역 객체의 프로퍼티로 등록


b. Function code(함수 코드)

  • 역할: 함수가 호출될 때 실행되는 코드
  • 특징:
    • 호출 시 새로운 실행 컨텍스트 생성
    • 함수 내부 스코프를 초기화하고 매개변수, 지역변수, this바인딩을 관리
    • 스코프 체인을 생성하여 상위 스코프와 연결


c. Eval code(eval 코드)

  • 역할: 문자열로 전달된 코드를 동적으로 생성
  • 특징:
    • 독립적인 실행 컨텍스트 생성
    • 실행 시점에 동적으로 스코프를 결정하므로 보안 및 성능 문제가 발생할 수 있음


d. Module code(모듈 코드)

  • 역할: ES6 모듈 시스템을 기반으로 동작
  • 특징:
    • 모듈별로 독립된 실행 컨텍스트를 생성
    • 전역 객체에 접근하지 않고 모듈 스코프에서 실행
    • import / export를 통해 모듈 간 데이터를 주고받음



2. 실행 컨텍스트 스택 & 렉시컬 환경

실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.

실행컨텍스트는 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.

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

코드 실행 순서는 실행컨텍스트 스택으로 관리한다.



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

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


Photo of Creation of the Execution Context

Creation of the Execution Context

Ungmo Lee. (2020). Modern Javascript DeepDive. wikibooks. p.369.


3.1 전역 실행 컨텍스트 생성

3.2 전역 렉시컬 환경 생성

3.2.1 전역 환경 레코드 생성
3.2.1.1 객체 환경 레코드 생성
3.2.1.2 선언적 환경 레코드 생성

3.2.2this 바인딩

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

🧐 Q. 객체 환경레코드선언적 환경레코드의 차이는?

Answer)

  • 전역 코드 평가 과정에서 var 키워드로 선언한 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 환경 레코드의 객체 환경 레코드에 연결된 BindingObject를 통해 전역 객체의 프로퍼티와 메서드가 된다.

  • let, const 키워드로 선언한 전역변수는 선언적 환경레코드에 등록되어 “선언단계”와 “초기화 단계”가 분리되어 진행된다.


🧐 Q. 전역환경레코드 생성 시, 객체 환경레코드선언적 환경레코드this 바인딩은 별개로 형성되는지?

Answer)

  • 전역 환경 레코드와 this바인딩은 별개로 형성되지만, 전역 환경 레코드의 [[GlobalThisValue]]와 this바인딩은 같은 전역 객체를 참조합니다.
  • 전역 실행 컨텍스트를 구성할 때, 전역 환경 레코드(객체 환경레코드 & 선언적 환경레코드)와 this 바인딩은 각각 생성되며, 서로 연관된 값으로 설정된다.

4.1 함수 실행 컨텍스트 생성

4.2 함수 렉시컬 환경생성

4.2.1 함수 환경 레코드 생성

4.3 this바인딩

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

🧐 Q. 함수 환경 레코드 생성시 어떠한 정보가 내포되어 있나요?

Answer)

  • 함수 렉시컬 환경을 구성하는 컴포넌트 중 하나인 함수 환경 레코드는 매개변수, arguments 객체, 함수 내부에서 선언한 지역변수와 중첩함수를 등록하고 관리합니다.




reference: 모던자바스크립트 Deep Dive 23장. 실행 컨텍스트