[JS] 실행컨텍스트

1. 실행 컨텍스트(Execution Context): 자바스크립트 코드가 실행되는 환경/문맥(Context)

실행 컨텍스트는 자바스크립트 엔진이 코드를 해석하고 실행하기 위해 필요한 정보들을 담고 있는 객체

: 이걸 무슨 말인지 구체적으로 풀어보면..

자바스크립트 엔진이 코드를 실행하려면, 그 코드가 무엇을 참조해야 하고, 어떤 값을 사용해야 하며, 누가 호출했고, this가 뭔지, 이런 정보들을 전부 기억하고 있어야함 그래서 엔진은 코드를 실행하기 전에,

“지금 이 함수 안에서 어떤 변수들이 있지?”
“외부에서 참조할 수 있는 건 뭐지?”
“this는 뭘 가리키지?”
이런 걸 담아두는 일종의 정보 묶음을 만들어 놓는데, 이게 바로 실행 컨텍스트

---

실행 컨텍스트 = 함수의 작업 가방

함수를 호출하면 자바스크립트는 그 함수를 실행하기 위한 가방(=컨텍스트)을 하나 꺼냄

가방 안 물건들

📄 변수 목록	선언된 변수들 (let, var, const)
🧭 함수 목록	선언된 내부 함수들
🗺 스코프	이 함수가 어떤 외부 변수에 접근 가능한지
🔑 this	this가 누구를 가리키는지
🎟 arguments	함수에 전달된 실제 인자들

 

가방 안에 있는 걸 기반으로 코드를 한 줄씩 실행함

예시로 보기

function greet(name) {
  const message = "Hello, " + name;
  console.log(message);
}
greet("Alice");

 

함수 greet("Alice")를 실행하면

1. 자바스크립트는 이 함수만의 실행 컨텍스트를 만듦
2. 그 안에는 이런 정보들이 들어감
   • name = "Alice"
   • message = 아직 할당 전
   • this = window 

즉, 자바스크립트는 이 함수가 실행되는 동안 필요한 모든 정보를 하나의 묶음으로 보관하면서 실행을 진행

---

사실 이것도 추상적으로 표현한 거라 좀 더 구체적으로 보자.

실제 가방 안엔 이런 것들이 있다. 

Variable Environment	VE: 변수 선언, 초기화 등을 저장 LE: 스코프 체인, 참조 대상 추적 이라고 GPT 가 하는데, 이부분은 설명이 잘못된 것 같아 수정이 필요함 아래 설명으로 보는 게 나을듯
Lexical Environment
This Binding

GPT 왈: 실제 자바스크립트 엔진은 Lexical Environment 하나로 거의 다 처리하고, Variable Environment는 과거 개념이라고한다.

최신 설명에서는 Lexical Environment만 강조하기도 한다함

GPT 한테 물어봄

 

+ environmentRecord, outerEnvironmentReference

Variable Environment, Lexical Environment 에는 각각 environmentRecord, outerEnvironmentReference 가 담겨있다

Environment Record	현재 컨텍스트에서 선언된 변수, 함수 등을 저장 (식별자 정보)
Outer Environment Reference	상위 컨텍스트를 참조하기 위한 링크 (스코프 체인의 핵심)
Lexical Environment	위 둘을 합친 구조. 현재 스코프와 스코프 체인 정보 전체

요약 정리

• 실행 컨텍스트는 코드를 실행할 때 필요한 모든 정보들을 묶어둔 공간
• 자바스크립트는 전역 코드, 함수, eval 등 각각에 대해 실행 컨텍스트를 따로 만든다
• 이 컨텍스트 안에는 변수, 스코프, this, arguments 같은 실행에 필요한 정보들이 다 들어 있다

---

2. 실행 컨텍스트의 생성과정

1) 생성 단계 (Creation Phase)

• 변수, 함수 선언 등을 먼저 처리 (호이스팅 발생)
• 변수는 undefined로 초기화되고, 함수 선언은 메모리에 전체가 저장됨
• 스코프 체인 및 this, arguments 등 환경 정보 설정

2) 실행 단계 (Execution Phase)

• 실제 코드가 한 줄씩 실행되며 변수에 값이 할당되고, 함수가 호출됨

---

3. 실행 컨텍스트의 구성

실행 컨텍스트는 내부적으로 다음 세 가지 주요 구성 요소를 가짐 (위에꺼 복습)

Variable Environment

Lexical Environment

This Binding

 

---

4. 실행 컨텍스트 스택 (콜 스택)

자바스크립트는 싱글 스레드

실행되는 모든 컨텍스트는 스택(Stack) 구조로 관리됨

• Global Execution Context (GEC): 프로그램이 시작되면 가장 먼저 생성되는 컨텍스트
• Function Execution Context (FEC): 함수가 호출될 때마다 새 컨텍스트가 쌓임

function foo() {
  console.log("foo");
}
function bar() {
  foo();
}
bar();

실행 순서:

1. Global Context 생성 → bar() 호출
2. bar() 컨텍스트 생성 → foo() 호출
3. foo() 컨텍스트 생성
4. foo() 실행 완료 → 컨텍스트 제거
5. bar() 실행 완료 → 제거
6. Global Context는 프로그램 종료 시 제거

---

5. 실행 컨텍스트와 this

this는 컨텍스트에 따라 참조 대상이 다름

전역 컨텍스트	window 또는 global
함수 내부	엄격 모드: undefined, 일반 모드: window
객체 메서드	해당 객체
생성자 함수	새로 생성될 인스턴스

---

6. 실행 컨텍스트와 클로저의 관계

클로저: 외부 함수의 실행 컨텍스트가 사라진 이후에도, 내부 함수가 해당 컨텍스트의 변수에 접근할 수 있는 현상

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}
const fn = outer();
fn(); // 1
fn(); // 2

outer()의 컨텍스트는 사라졌지만 inner() 함수는 count에 접근할 수 있다.

=> Lexical Environment에 count의 정보가 유지되기 때문

---

마무리 정리

실행 컨텍스트	코드가 실행될 때 필요한 모든 환경 정보
생성 → 실행	컨텍스트는 2단계로 처리됨
콜 스택	실행 흐름은 스택 구조로 관리
클로저, this	모두 실행 컨텍스트 구조로 설명 가능

 

실행컨텍스트 배울 때 클로저, 호이스팅, 스코프 체인, this 등 아주 많은 개념들이 나온다..