실행 컨텍스트(Execution Context) 완벽 이해

자바스크립트를 조금 깊게 공부하다 보면
“실행 컨텍스트(Execution Context)” 라는 용어가 꼭 등장합니다.

이 개념은 스코프(Scope), 클로저(Closure), this 바인딩 같은
자바스크립트의 핵심 원리를 이해하기 위한 기초 중의 기초예요.

---

💡 실행 컨텍스트란?

“자바스크립트 코드가 실행되는 환경”

조금 더 구체적으로 말하자면,
자바스크립트 엔진이 코드를 실행할 때
변수, 함수, this, 스코프 정보 등을 관리하기 위한 객체입니다.

즉, 어떤 코드가 “어디서, 어떤 환경에서, 어떤 변수들을 가지고 실행되는가”
를 결정하는 일종의 실행 박스라고 보면 됩니다.

---

⚙️ 실행 컨텍스트의 종류

종류	설명
전역 컨텍스트 (Global Context)	코드가 처음 실행될 때 단 한 번 생성. 전역 변수, 함수 선언이 등록됨.
함수 컨텍스트 (Function Context)	함수가 호출될 때마다 새로 생성. 함수 내 지역 변수, 매개변수, 내부 함수 등이 등록됨.
Eval 컨텍스트 (Eval Context)	eval() 실행 시 만들어지지만, 실제 코드에서는 거의 사용하지 않음.

---

🧩 실행 컨텍스트의 내부 구성

하나의 실행 컨텍스트는 다음 세 가지로 이루어져 있습니다 👇

1. Variable Environment (변수 환경)
   • var로 선언된 변수와 함수 선언을 저장합니다.
   • 코드가 실행되기 전에 미리 메모리에 등록됩니다. (👉 호이스팅)
2. Lexical Environment (렉시컬 환경)
   • let, const로 선언된 변수나 함수 표현식이 저장됩니다.
   • 외부 환경 참조(Outer Environment Reference)를 포함하고 있어
     스코프 체인을 형성합니다.
3. This Binding (this 바인딩)
   • 실행 컨텍스트가 “어떤 객체를 this로 바라볼지” 결정합니다.
     • 전역 실행 시: window(브라우저) or global(Node.js)
     • 함수 호출 시: 호출한 주체(객체)에 따라 다름
     • 생성자 함수 실행 시: 새로 만들어진 인스턴스

---

🔄 실행 컨텍스트의 생성과 동작 과정

함수가 호출될 때 실행 컨텍스트는 아래 순서로 동작합니다 👇

1️⃣ 생성 단계 (Creation Phase)

• 새 실행 컨텍스트가 만들어짐
• 변수와 함수 선언이 메모리에 등록 (호이스팅)
• this 바인딩 결정

이 단계에서는 변수들이 초기화는 되어 있지만 값은 undefined 상태예요.

2️⃣ 실행 단계 (Execution Phase)

• 코드가 한 줄씩 실행되며 실제 값이 할당되고 로직이 수행됩니다.

---

🧱 실행 컨텍스트 스택 (Call Stack)

자바스크립트 엔진은 실행 컨텍스트를 스택(Stack) 구조로 관리합니다.
가장 위에 있는 컨텍스트가 “현재 실행 중인 코드”입니다.

function a() {
  console.log('A');
  b();
}
function b() {
  console.log('B');
}
a();

실행 순서:

1. 전역 컨텍스트 생성 (Global)
2. a() 호출 → a 컨텍스트 push
3. b() 호출 → b 컨텍스트 push
4. b() 종료 → pop
5. a() 종료 → pop
6. 프로그램 종료 → Global 컨텍스트 pop

이런 구조 덕분에
자바스크립트는 함수 실행 순서를 추적하고,
비동기 처리나 에러 스택 트레이스 등을 효율적으로 관리할 수 있습니다.

---

🧩 예시로 이해하기

 

const x = 1;

function foo() {
  let y = 2;

  function bar() {
    console.log(x + y);
  }

  bar();
}

foo(); // 3

🔍 실행 흐름 살펴보기

1️⃣ 전역 실행 컨텍스트 생성

• 전역 변수 x와 함수 foo가 등록됩니다.
• x는 const로 선언되었기 때문에 TDZ(Temporal Dead Zone) 를 거쳐
  실제 코드 실행 시 값이 할당됩니다.
• 함수 foo는 선언 자체가 호이스팅되어 메모리에 등록됩니다.

2️⃣ foo() 호출 → 새로운 함수 실행 컨텍스트 생성

• foo의 렉시컬 환경이 만들어지고, 지역 변수 y와 내부 함수 bar가 등록됩니다.
• y는 let으로 선언되었기 때문에 블록 스코프 내에서만 유효합니다.

3️⃣ bar() 호출 → 또 하나의 실행 컨텍스트 생성

• bar 내부에서는 x와 y를 찾습니다.
• x는 전역 스코프(outer environment reference)에서,
  y는 foo의 렉시컬 환경에서 발견됩니다.

4️⃣ console.log(x + y) 실행

• 탐색 순서: bar → foo → 전역(Global)
• 최종 결과: 1 + 2 = 3

---

✨ 마무리 요약

구분내용

정의	코드 실행에 필요한 정보를 담은 환경
종류	전역, 함수, eval
구성 요소	Variable Env, Lexical Env, this
동작 순서	생성(호이스팅) → 실행(코드 수행)
관리 방식	스택(Call Stack) 구조로 관리

---

🧭 결국, 실행 컨텍스트를 이해하면
자바스크립트의 스코프, 호이스팅, 클로저, this가 한눈에 연결됩니다.

즉, 실행 컨텍스트는 자바스크립트 엔진의 “두뇌”라고 할 수 있습니다.