---
id: execution-context
title: "Execution Context"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["실행 컨텍스트", "JS Execution Context", "자바스크립트 실행 컨텍스트"]
duplicate_of: ""
source_trust_level: "A"
confidence_score: 0.95
created_at: 2026-07-11
updated_at: 2026-07-11
review_reason: ""
merge_history: []
tags: ["research", "context 이해 규칙"]
raw_sources: ["Execution Context 실행 컨텍스트를 알아야하는 이유? - 넥스트리", "JavaScript Execution Context – How JS Works Behind the Scenes - freeCodeCamp"]
applied_in: []
github_commit: ""
---

# [[Execution Context]]

## 🎯 한 줄 통찰 (One-line insight)
실행 컨텍스트(Execution Context)는 자바스크립트 엔진이 코드를 평가하고 실행하기 위해 필요한 모든 식별자, 스코프, 환경 정보를 담고 관리하는 핵심 구동 환경이다.

## 🧠 핵심 개념 (Core concepts)
* **생성 단계(Creation Phase)와 실행 단계(Execution Phase):** 코드를 실행하기 전 메모리를 할당하고 스코프 체인을 설정하는 단계와, 실제로 코드를 위에서부터 아래로 읽으며 값을 할당하고 실행하는 단계로 나뉜다.
* **전역 및 함수 실행 컨텍스트:** 스크립트가 처음 실행될 때 생성되는 전역 실행 컨텍스트(Global Execution Context)와 함수가 호출될 때마다 생성되는 함수 실행 컨텍스트(Function Execution Context)가 있다.
* **Variable Environment & Lexical Environment:** 실행 컨텍스트 내에서 식별자와 함수 선언을 저장하는 `environmentRecord`와 상위 스코프를 참조하는 `outerEnvironmentReference`로 구성되는 환경 정보이다.
* **콜 스택(Call Stack):** 활성화된 모든 실행 컨텍스트의 순서와 흐름을 추적 및 제어하기 위해 자바스크립트 엔진이 사용하는 자료 구조이다.

## 🧩 추출된 패턴 (Extracted patterns)
* **호이스팅(Hoisting) 패턴:** 함수 내 코드가 실행되기 전(생성 단계)에 현재 컨텍스트에 관련된 모든 식별자 정보(변수명, 함수 선언 등)를 수집하여 메모리에 먼저 저장함으로써, 선언 이전에 접근 시 오류 대신 `undefined`나 함수 자체를 반환하게 되는 메커니즘.
* **스코프 체인(Scope Chain) 탐색 패턴:** 현재 컨텍스트의 Lexical Environment에서 변수를 찾지 못하면 `outerEnvironmentReference`를 통해 상위 스코프의 Lexical Environment를 재귀적으로 탐색하여 변수를 찾는 구조적 패턴.

## 📖 세부 내용 (Details)
* **자바스크립트 엔진의 코드 실행 준비:** 자바스크립트는 싱글 스레드 인터프리터 언어이며, 엔진이 스크립트 파일을 스캔한 뒤 코드 변환과 실행을 관리하기 위해 '실행 컨텍스트'라는 환경을 생성한다 [S1], [S2]. 
* **컨텍스트의 두 가지 생애 주기:** 
  * **생성 단계(Creation Phase):** 브라우저의 `window`나 Node.js의 `global` 같은 전역 객체를 생성하고, 변수와 함수를 위한 메모리를 설정한다 [S1], [S2]. 이때 변수는 기본적으로 `undefined`로 초기화된다 [S2].
  * **실행 단계(Execution Phase):** 코드를 위에서 아래로 한 줄씩 순차적으로 실행하며, 변수에 실제 값을 할당하고 함수 호출을 평가한다 [S2].
* **실행 컨텍스트의 내부 구조:** 
  * **Variable Environment:** 초기화 시점의 상태를 스냅샷으로 유지하며 변수 및 외부 환경에 대한 정보를 포함한다 [S1].
  * **Lexical Environment:** 변수 할당 등 코드 실행 중에 발생하는 동적인 변화를 실시간으로 반영한다 [S1]. 
  * 두 환경 모두 식별자 정보를 저장하는 `environmentRecord`와 상위 스코프를 추적하는 `outerEnvironmentReference`를 포함한다 [S1].
* **콜 스택(Call Stack)을 통한 관리:** 실행 컨텍스트들은 콜 스택에 푸시(Push)되어 관리된다 [S1], [S2]. 전역 컨텍스트가 가장 먼저 깔리고, 함수가 호출될 때마다 새로운 함수 실행 컨텍스트가 최상단에 쌓인다 [S1], [S2]. 함수 실행이 종료되면 해당 컨텍스트는 팝(Pop)되어 삭제되며, 재귀 함수 등에 의해 콜 스택의 고정된 크기 한도를 초과하면 스택 오버플로우(Stack overflow) 에러가 발생한다 [S2].
* **this 바인딩:** 실행 컨텍스트 활성화 시점에 함수가 어떻게 호출되었는지(일반 호출, 메서드 호출, 생성자 호출, 명시적 바인딩)에 따라 `this` 식별자가 가리키는 객체가 연결된다 [S1].

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
* 기본적으로 전역 실행 컨텍스트에서 일반 함수 호출 시 `this`는 전역 객체를 가리키지만, '엄격 모드(strict mode)'가 활성화된 환경에서는 `this` 바인딩이 `undefined`로 설정된다 [S1].

## 🛠️ 적용 사례 (Applied in summary)
현재 발견된 실제 적용 사례(구체적인 프로젝트 파일 경로나 Git 커밋 해시 등)가 없습니다.

## 💻 코드 패턴 (Code patterns)
```javascript
// 자바스크립트 실행 컨텍스트와 호이스팅 및 스코프 체인을 보여주는 예시
let greeting = "Hello"; // 전역 컨텍스트에 기록됨

function petInfo() {
  // petInfo 함수 실행 컨텍스트 생성 (생성 단계 -> 실행 단계)
  let cat = "cat";
  let dog = "dog";
  
  // 자신의 LexicalEnvironment에서 cat, dog를 찾고, 
  // outerEnvironmentReference를 통해 상위(전역) 스코프에서 greeting을 찾음
  console.log(greeting, cat, dog); 
}

petInfo(); // Call Stack에 petInfo 실행 컨텍스트 푸시, 완료 후 팝
```
*(언어: JavaScript, 버전: ES6+ 기준)*

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** A
- **신뢰 점수:** 0.95
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 관련 문서 링크 (Related document links)

### 상위/유사 개념
- [[Call Stack]] — 실행 컨텍스트의 순서와 생명주기를 물리적으로 관리하는 메모리 구조.
- [[Lexical Environment]] — 실행 컨텍스트 내부에서 식별자와 스코프를 실시간으로 저장/관리하는 핵심 객체.
- [[Hoisting]] — 생성 단계에서 environmentRecord에 식별자가 미리 저장되면서 발생하는 언어적 특징.
- [[Scope Chain]] — outerEnvironmentReference를 통해 상위 컨텍스트의 변수에 접근하는 논리적 탐색 메커니즘.

### 심층 후속 질문 (Deeper Research Questions)
- 자바스크립트 엔진의 이벤트 루프(Event Loop)는 콜 스택 및 실행 컨텍스트와 어떻게 상호작용하며 비동기 처리를 수행하는가?
- Variable Environment와 Lexical Environment는 구체적으로 어떤 기준에 의해 분리되어 동작하는가?
- 'strict mode' 도입 외에 현대 자바스크립트(ES6+) 모듈 환경에서 전역 실행 컨텍스트의 `this` 바인딩은 어떻게 달라지는가?
- 클로저(Closure)는 파괴된 상위 함수 실행 컨텍스트의 Lexical Environment를 어떻게 메모리에 유지시키는가?
- 운영체제 수준의 'Context Switching'과 자바스크립트의 'Execution Context' 전환은 성능 및 오버헤드 측면에서 어떤 차이가 있는가?

### 실무 적용 맥락 (Practical Application Contexts)
- **Implementation:** 비동기 콜백이나 프로미스 체이닝 작성 시, 스코프와 `this` 바인딩 유지를 위한 화살표 함수(Arrow Function) 활용.
- **System Design:** 전역 변수 오염을 최소화하고 메모리 누수(Memory Leak)를 방지하기 위한 모듈 및 클로저 기반의 상태 관리 설계.
- **Operation / Maintenance:** 콜 스택 오버플로우 추적 및 디버깅 시, 브라우저 개발자 도구의 Call Stack 패널을 통한 실행 컨텍스트 계층 분석.
- **Learning Path:** 자바스크립트의 비동기 메커니즘, 스코프, 클로저, 호이스팅을 심도 있게 이해하기 위한 필수 선행 개념으로 학습.

### 인접 주변 주제 (Adjacent Topics)
- [[Context Switching (OS)]] — 자원을 공유하는 OS 관점에서 프로세스/스레드의 상태를 저장하고 복원하는 메커니즘적 비교.
- [[Closure]] — 상위 실행 컨텍스트가 종료되었음에도 해당 환경의 변수에 계속 접근할 수 있게 해주는 기능.
- [[Event Loop]] — 싱글 스레드 환경에서 실행 컨텍스트 처리가 완료된 후 비동기 콜백을 콜 스택으로 푸시하는 메커니즘.

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[context 이해 규칙]]
- **관련 개념:** [[Call Stack]], [[Lexical Environment]], [[Hoisting]]
- **참조 맥락:** 프론트엔드 자바스크립트 환경에서 비동기 코드, 스코프, 클로저 관련 디버깅 및 설계 원칙을 수립할 때 참조됨.

## 📚 출처 (Sources)
- [1] Execution Context 실행 컨텍스트를 알아야하는 이유? - 넥스트리
- [2] JavaScript Execution Context – How JS Works Behind the Scenes - freeCodeCamp

## 📝 변경 이력 (Change history)
- 2026-07-11: Initial draft generated via Datacollector_MAC P-Reinforce engine.