실행 컨텍스트란?

🌐 자바스크립트가 코드를 실행할 때 필요한 모든 정보를 담고 있는 공간

자바스크립트 엔진은 코드 한 줄 한 줄을 실행하기 전에 "코드 실행 준비 완료" 라는 의미로 실행 컨텍스트를 만들고 그 안에 변수, 함수, this, 외부 정보 등을 전부 정리해 둔다.

 

⚙️ 실행 컨텍스트가 만들어 질때

1. 자바스크립트 코드 시작할 때 -> 전역 실행 컨텍스트
2. 함수가 호출될 때마다 -> 새 함수 실행 컨텍스트

# 함수가 중첩되어 있으면 실행 컨텍스트도 쌓이고 끝나면 빠진다.

 

🛖 실행 컨텍스트 내부 구조

구성 요소	설명
VariableEnvironment	변수와 함수 선언 정보 저장 (var , function)
LexicalEnvironment	let , const 같은 블록스코프 변수 저장
thisBinding	현재 컨텍스트에서의 this가 가리키는 값
Outer Environment Reference	바깥 스코프와 연결된 참조 (스코프 체인)

 

---

📌 실행 컨텍스트 생성 과정 (3단계)

1. 호이스팅 준비 단계 (변수 등록)

• var -> undefined로 등록
• function 선언 -> 함수 전체 등록
• let / const -> 이름만 등록 (TDZ 상태), 초기화는 아직 X

function test() {
 console.log(x); // undefined
 var x = 1;
 let y = 2;
}

 

    ➡️ 위 코드 실행 전에 test 함수가 실행되면 엔진이 x는 undefined로 y는 TDZ에 넣어둔다.

 

2. TDZ 할당 단계 (초기화 전 잠금)

• let 과 const는 초기화되기 전까지 TDZ 에 갇혀 있다.
• 이 상태에선 변수에 접근만 해도 ReferenceError 발생

3. 코드 실행 (초기화 및 값 할당)

• 코드가 위에서 아래로 실행되며
• 각 변수에 실제 값 할당 (초기화)
• TDZ 상태의 변수는 이 시점에 활성화 된다.

---

🌐 실행 컨텍스트 스택(Stack)

자바스크립트는 스택 구조로 실행 컨텍스트를 관리한다.

➡ 전역 → 함수 → 중첩 함수 식으로 쌓이고

➡ 실행이 끝나면 가장 위에 있는 실행 컨텍스트부터 스택에서 제거된다.

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

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

 

순서

1. 전역 실행 컨텍스트 생성
2. a() 호출 -> a 함수 실행 컨텍스트가 실행 컨텍스트 스택에 추가됨
3. b() 호출 -> b 함수 실행 컨텍스트가 스택에 추가됨
4. b 함수 실행 완료 -> b 컨텍스트가 스택에서 제거됨
5. a 함수 실행 완료 -> a 컨텍스트가 스택에서 제거됨
6. 전역 실행 컨텍스트만 남아 계속 유지됨

 

예제

let x = 1;

function khj() {
	let y = 2;
    function nice() {
    	let k = 3;
        console.log(x,y,k);
    }
    nice();
}
khj();

 

예제 흐름 :

1. 전역 컨텍스트 생성 -> 변수 x에 1 할당
2. khj() 함수 호출 -> khj 함수의 실행 컨텍스트가 스택에 추가됨
3. nice() 함수 호출 -> nice 함수의 실행 컨텍스트가 스택에 추가됨
4. 로그 실행 -> x , y , k 값 출력
5. nice 함수 실행 완료 -> nice 컨텍스트가 스택에서 제거됨
6. khj 함수 실행 완료 -> khj 컨텍스트가 스택에서 제거됨
7. 전역 실행 컨텍스트만 남아 유지됨

---

🌐 실행 컨텍스트 정리

구분	설명
생성 시점	전역 실행 / 함수 호출할 때
구조	변수, 함수, this, 외부 환경 등 저장
관리 방식	스택처럼 쌓이고 끝나면 제거
중요한 이유	호이스팅, TDZ, 클로저, this 등 모든 핵심 개념과 연결