실행 컨텍스트 (Execution Context)

JavaScript에서 실행 컨텍스트는 코드를 실행하기 위한 환경을 구성하고, 변수나 함수 등의 식별자를 추적하며 실행 흐름을 관리함

코드 타입에 따른 실행 컨텍스트

ECMAScript 사양은 JavaScript 소스코드를 아래 4가지 타입으로 구분함.

전역 코드 (Global Code)
- 전역 스코프를 생성
- var, 함수 선언문으로 정의된 식별자는 전역 객체에 프로퍼티로 등록
함수 코드 (Function Code)
- 지역 스코프 생성
- 매개변수, 지역 변수, arguments 객체를 관리
eval 코드
- strict 모드에서 독립적 스코프 생성
모듈 코드
- 파일 단위로 독립적인 모듈 스코프 구성

실행 컨텍스트란?

실행 컨텍스트는 JavaScript 코드 실행을 위한 환경 정보를 담고 있는 일종의 내부 레코드

구성 요소:

렉시컬 환경 (Lexical Environment):
식별자를 등록하고 검색하는 구조이며, 내부적으로 환경 레코드와 외부 렉시컬 참조로 나뉨
실행 컨텍스트 스택 (EC Stack):
실행 순서를 제어하는 스택 구조로, 현재 실행 중인 컨텍스트는 항상 스택의 최상단에 존재

전역 코드 평가 과정

1. 전역 실행 컨텍스트 생성

최초 실행 시, 전역 실행 컨텍스트 생성 → 스택에 push

2. 전역 렉시컬 환경 생성

환경 레코드
- var, 함수 선언은 객체 환경 레코드에 등록 → 전역 객체에 프로퍼티로 바인딩
- let, const는 선언적 환경 레코드에 등록 → TDZ(Temporal Dead Zone) 존재 <uninitialized>, 레퍼런스 오류 발생
this 바인딩
- 전역 컨텍스트의 this는 전역 객체(window, global, globalThis)를 참조
외부 렉시컬 환경 참조
- 최상위 스코프이므로 참조는 null

식별자 결정 (Identifier Resolution)

변수, 함수 등을 사용할 때 해당 식별자를 어디서 정의했는지 탐색하는 과정

현재 컨텍스트의 렉시컬 환경 → 외부 참조 순으로 탐색
끝까지 찾지 못하면 ReferenceError 발생

함수 코드 실행 컨텍스트

함수 호출 시, 아래 순서로 진행

1. 함수 실행 컨텍스트 생성

호출 시 기존 실행 중인 컨텍스트는 일시 중단됨
새로운 함수 실행 컨텍스트가 스택에 push

2. 함수 렉시컬 환경 구성

함수 환경 레코드 생성
- 매개변수, arguments 객체, 지역 변수, 내부 함수 등 저장
this 바인딩
- 호출 방식에 따라 바인딩 대상이 달라짐
  - 일반 호출: 전역 객체
  - 생성자 호출: 새 인스턴스 객체
외부 렉시컬 참조
- 함수 정의 당시의 상위 스코프를 기억 ([[Environment]])

3. 함수 실행

인자 할당 → 내부 코드 실행 → return 처리

4. 함수 종료

실행 완료되면 함수 컨텍스트는 스택에서 pop
제어권이 이전 컨텍스트로 복귀

식별자 결정 예시

var globalVar = 1;

function testFunc() {
    var localVar = 2;
    console.log(globalVar + localVar);
}
testFunc(); // 출력: 3

현재 함수 스코프부터 검색하여 최상위 스코프까지 탐색함. 이 때, 검색에 실패하면 참조 오류가 발생함. 예를 들어 console.log(전역 변수 + 함수 내부 지역 변수) 일 경우 console에 대한 식별자 결정을 위해 스코프 참조를 타고 전역 객체까지 올라가서 결정 후 프로퍼티, 메서드에서 log를 찾고 전역 변수 식별자 결정을 위해 전역 스코프를 검색하는 방식

console → 전역 객체 탐색
globalVar → 전역 스코프에서 발견
localVar → 함수 렉시컬 환경에서 발견