DAY 05 — 실행 컨텍스트 & 호이스팅 (Hoisting, TDZ)
🎯 목표
- JavaScript가 코드를 실행하기 전에 무엇을 준비하는지 이해한다.
- 호이스팅을 “코드 이동”이 아닌 실행 컨텍스트 생성 과정으로 설명한다.
var / let / const차이를 TDZ와 실행 컨텍스트 관점에서 이해한다.
실행 컨텍스트(Execution Context)란?
JavaScript 코드를 실행하기 위해
JS 엔진이 만드는 실행 환경
JS는 코드를 바로 실행하지 않는다.
먼저 준비 → 그 다음 실행한다.
실행 컨텍스트의 2단계
1️⃣ 생성 단계 (Creation Phase)
- 변수 이름 수집
- 함수 선언 등록
- 스코프 체인 구성
this결정
2️⃣ 실행 단계 (Execution Phase)
- 코드 한 줄씩 실행
- 값 할당 및 연산 수행
👉 호이스팅은 생성 단계에서 발생하는 현상
호이스팅(Hoisting)이란?
선언이 코드 위로 끌어올려진 것처럼 보이는 현상
실제로 이동하는 게 아니라
👉 실행 전에 선언을 미리 등록하는 것이다.
var의 호이스팅
console.log(a); // undefined
var a = 10;
내부 동작
// 생성 단계
var a = undefined;
// 실행 단계
console.log(a);
a = 10;선언 + 접근 허용
값만 나중에 할당
👉 에러 ❌, 대신 undefined
let / const의 호이스팅과 TDZ
console.log(b); // ReferenceError
let b = 10;특징
선언은 수집됨 ⭕
하지만 초기화 전까지 접근 금지
이 구간을 TDZ(Temporal Dead Zone) 라고 한다.
TDZ(Temporal Dead Zone)
선언은 되었지만
값이 할당되기 전까지 접근이 금지된 구간
{
console.log(x); // ReferenceError
let x = 10;
}존재는 알고 있음
접근하면 즉시 ReferenceError
👉 값이 undefined인 상태 ❌
👉 접근 자체가 불가능한 상태 ⭕
var vs let / const 차이 요약
구분 var let const
선언 수집 ⭕ ⭕ ⭕
초기화 즉시(undefined) ❌ ❌
TDZ ❌ ⭕ ⭕
재대입 ⭕ ⭕ ❌
블록 스코프 ❌ ⭕ ⭕
함수 호이스팅
함수 선언문
foo();
function foo() {
console.log("foo");
}생성 단계에서 함수 전체가 등록
선언 전 호출 가능
함수 표현식
bar(); // TypeError
var bar = function () {
console.log("bar");
};변수만 호이스팅
함수는 아직 없음
실행 컨텍스트 스택 (Call Stack)
실행 컨텍스트는 스택 구조로 관리된다
Global Context
→ 함수 A 실행
→ 함수 B 실행
→ B 종료
→ A 종료
가장 나중에 실행된 함수가 먼저 종료 (LIFO)
재귀, 콜스택 에러의 원인
