호이스팅(Hoisting)과 TDZ

호이스팅(Hoisting) 이란?

변수와 함수 선언이 코드의 상단으로 끌어올려진 것처럼 동작하는 JS 고유의 특징

이는 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 메모리에 미리 저장하는 방식 때문에 발생한다.

호이스팅 대상

• 변수 선언(변수 호이스팅)과 함수 선언문(함수 호이스팅)

🌿 변수 호이스팅

• 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징

console.log(name);	// undefined
var name = 'hjlee';
console.log(name);	// hjlee

• var로 선언된 변수는 선언만 호이스팅되고, 초기화는 호이스팅되지 않아 처음 호출 시 undefined 출력
• let과 const로 선언된 변수는 호이스팅되지만, TDZ에 영향을 받아 초기화되기 전에는 참조할 수 없다. 이때 ReferenceError 발생

🌿 함수 호이스팅

• 함수 선언문은 호이스팅되어 호출하기 전에 사용할 수 있다.

fnc1(); // 'hi func1'
function fnc1() {
    console.log('hi func1');
}

• 반면, 함수 표현식은 변수 호이스팅이 적용되어 정의되기 전에는 사용할 수 없다.

fnc2(); // TypeError: fnc2 is not a function
var fnc2 = function() {
    console.log('hi fnc2');
};

함수 표현식은 선언 시점에 초기화가 이루어지기 때문에, 함수 표현식 이전에 함수를 참조하면 undefined로 평가되며, 이로 인해 TypeError가 발생한다.

함수 호이스팅 요약

• 함수 선언문 : 함수가 코드 상에서 선언되기 전에 호출 가능 (함수 호이스팅)
• 함수 표현식 : 변수처럼 동작하며, 정의되기 전에 호출할 수 없음 (변수 호이스팅)

🌿 Class의 경우

클래스 선언은 let 및 const와 마찬가지로 TDZ에 들어가며, 클래스 표현식은 함수 표현식처럼 호이스팅되지 않는다.

---

TDZ(Temporal Dead Zone; 일시적 사각지대) 이란?

• 변수가 선언되기 전까지의 코드 영역을 의미하며,  이 구역에서는 해당 변수 사용을 허용하지 않는다.
• 변수의 초기화가 이뤄지지 않은 상태에서 접근하려 하면 ReferenceError가 발생한다.

TDZ에 영향을 받는 구문

• let과 const로 선언된 변수
• class 선언
• constructor() 내부의 super()
• 기본 함수 매개변수(Default Function Parameter)

---

TDZ가 있음으로 let, const를 사용하면 변수 초기화를 하게되니 코딩하면서 오류를 줄 일 수 있다는게 주요 목적이 아닐까 생각이 든다.