JS execution context

werthers·2025년 3월 27일

JavaScript

목록 보기
2/3
post-thumbnail

실행 컨텍스트 (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 → 함수 렉시컬 환경에서 발견

✅ 실행 컨텍스트 요약

항목설명
실행 컨텍스트코드 실행을 위한 환경 객체로, 변수, 함수, this 등을 관리함
전역 컨텍스트JS 코드 실행 시 최초로 생성되며, 전역 스코프와 전역 객체를 연결함
함수 컨텍스트함수 호출 시 생성되며, 지역 변수, 매개변수, arguments 객체 등을 관리함
렉시컬 환경식별자를 저장하고 참조하는 구조. 내부에 환경 레코드와 외부 참조를 포함
환경 레코드변수, 함수 선언 등의 실제 정보를 저장하는 객체
스코프 체인렉시컬 환경의 외부 참조들이 연결된 단방향 리스트 형태
this 바인딩실행 컨텍스트의 종류와 호출 방식에 따라 결정되는 객체 참조
Execution Stack실행 중인 실행 컨텍스트를 순서대로 저장하는 스택. 제어 흐름을 결정함
TDZlet, const 변수는 초기화 전까지 참조할 수 없는 영역
클로저함수가 정의될 때의 외부 렉시컬 환경을 기억하여 함수 외부에서도 참조 가능하게 함
profile
Hello World !

0개의 댓글