호이스팅 (스코프의 최상단으로 끌어올려진 것처럼! 그리고 TDZ)

devjieun·2024년 4월 10일

TDZ 자바스크립트 호이스팅

🦎JavaScript

목록 보기

5/11

호이스팅(Hoisting)

호이스팅이란 모든 선언문이 스코프의 최상단으로 끌어올려진 것처럼 동작하는 것이다. 자바스크립트 해석기는 런타임 이전에 변수와 함수 선언에 대한 정보를 기억하고 실행한다.

var 키워드

// 스코프의 최상단에서 선언 단계와 초기화 단계 같이 실행된다.
// (1.선언 단계) 이 시점에는 호이스팅에 의해 이미 foo 변수가 선언되었다.
// (2.초기화 단계) 변수 foo는 undefined로 초기화된다.
console.log(foo); 	// undefined

// (3.할당 단계) 변수에 값을 할당
foo = 123;

console.log(foo);	// 123

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
var foo;

var 키워드로 선언한 변수는 런타임 이전에 암묵적으로선언 단계와 초기화 단계가 한 번에 진행된다. 즉 선언 단계에서 스코프에 변수 식별자를 등록하고, 초기화 단계에서 undefined로 변수를 초기화한다. 따라서 변수 선언문 이전에 변수에 접근해도 에러가 발생하지 않고 undefined를 출력한다.

let과 const 키워드

//런타임 이전에 선언 단계가 실행된다. 아직 변수가 초기화되지 않았다.
//초기화 이전의 일시적사각지대에서는 변수를 참조할 수 없다.
console.log(foo);	//ReferenceError

let foo;	//변수 선언문에서 초기화 단계가 실행된다.
console.log(foo);	//undefined

foo = 1; 	// 할당문에서 할당 단계가 실행된다.
console.log(foo);	//1
출처: https://zyeuny.tistory.com/45 [Daramji:티스토리]

let과 const 키워드로 선언한 변수는 '선언 단계'와 '초기화 단계'가 분리되어 진행된다. 즉, 런타임 이전에 스코프 최상단에 선언 단계가 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다. 따라서 선언문 이전에 변수에 접근하려고 하면 참조 에러가 발생한다.

선언단계에서 초기화 단계 시작 지점까지 변수를 참조할 수 없다. 이 구간을 일시적 사각지대(TDZ)라고 부른다. TDZ 구간 때문에 변수를 참조할 수 없어서 호이스팅이 동작하지 않는 것처럼 보이는 것이다.

정리

💡 호이스팅

호이스팅이란 모든 선언문이 스코프의 최상단으로 끌어올려진 것처럼 동작하는 것이다.

자바스크립트는 ES6에서 도입된 let, const를 포함해서 모든 선언(var, let, const, finction, function*, class 등)을 호이스팅 한다.

💡 var vs let, const

var : 선언 및 초기화 ➡️ 할당
let, const : 선언 ➡️ TDZ ➡️ 초기화 ➡️ 할당

즉 var는 변수 선언과 동시에 초기화를 하지만
let과 const는 변수를 선언만 하고 초기화는 하지 않는다.