JavaScript 실행 컨텍스트 학습 | 프론트엔드 인터랙티브 학습

🎯 핵심 개념 이해하기

📋 실행 컨텍스트란?

JavaScript가 코드를 실행하기 위해 만드는 환경입니다. 마치 요리사가 요리를 하기 위해 필요한 모든 도구와 재료를 준비하는 것과 같습니다.

🏗️ 실행 컨텍스트 구성 요소

📦 Variable Environment

특징:

•var 변수와 함수 선언 저장
•호이스팅 발생
•함수 스코프 적용

🌿 Lexical Environment

특징:

•let/const 변수 저장
•TDZ(Temporal Dead Zone) 관리
•블록 스코프 적용

🎯 this Binding

특징:

•함수 호출 방식에 따라 결정
•전역: window 객체
•메서드: 호출 객체

🏠 실생활 비유로 이해하기

🍽️ 식당 주방 비유

📋

주문서 (실행 컨텍스트)

요리에 필요한 모든 정보

↓

👨‍🍳

요리사 (JavaScript 엔진)

주문서에 따라 요리 실행

↓

🍽️

완성된 요리 (실행 결과)

최종 결과물

📚 도서관 비유

📖

책장 (스코프)

변수들이 저장된 공간

↓

👩‍🏫

사서 (스코프 체인)

책을 찾는 경로와 순서

↓

📚

책 찾기 (변수 검색)

가까운 책장부터 차례대로

📚 단계별 학습

학습 단계

코드 예제

// 전역 실행 컨텍스트 생성
var globalVar = 'I am global';
let globalLet = 'I am also global';
const globalConst = 'I am constant';

console.log(globalVar);
console.log(globalLet);
console.log(globalConst);

실행 결과

I am global
I am also global
I am constant

설명

전역 실행 컨텍스트는 JavaScript 실행 시 가장 먼저 생성되며, 전역 변수들을 관리합니다.

핵심 포인트

1전역 실행 컨텍스트는 프로그램 시작과 함께 생성됩니다

2var 변수는 생성 단계에서 undefined로 초기화됩니다

3let/const는 생성 단계에서 TDZ(Temporal Dead Zone)에 배치됩니다

4실행 단계에서 실제 값이 할당됩니다

⚡ 실행 컨텍스트 생성과 실행 과정

🏗️ 생성 단계 (Creation Phase)

1️⃣

Variable Environment 생성

var 변수와 함수 선언을 undefined로 초기화

2️⃣

Lexical Environment 생성

let/const 변수를 TDZ에 배치

3️⃣

this 바인딩 결정

호출 방식에 따라 this 값 설정

🚀 실행 단계 (Execution Phase)

1️⃣

코드 한 줄씩 실행

선언된 순서대로 코드 실행

2️⃣

변수에 실제 값 할당

let/const는 TDZ에서 해제

3️⃣

함수 호출 시 새 컨텍스트 생성

호출 스택에 새 컨텍스트 추가

🎯 핵심 포인트

⚠️ 주의할 점

❌

호이스팅 오해

var는 undefined로 초기화되지만 let/const는 TDZ에 있음

❌

스코프 체인 무시

변수 검색은 가장 가까운 스코프부터 시작

❌

this 바인딩 혼동

함수 호출 방식에 따라 this가 결정됨

💡 핵심 기억할 점

✅

실행 컨텍스트는 환경

코드 실행에 필요한 모든 정보를 담고 있음

✅

스택 구조 (LIFO)

나중에 들어온 것이 먼저 나가는 구조

✅

생성 → 실행 단계

변수 선언 → 코드 실행의 2단계 과정

🧠 JavaScript 실행 컨텍스트 완벽 이해하기