Hoisting
hoisting
명사
1. 끌어 올리기; 들어올려 나르기.
호이스팅(Hoisting)은 JavaScript에서 변수, 함수, 클래스의 선언이 해당 코드의 최상단으로 끌어올려지는 것처럼 동작하는 특성을 말한다.
하지만 실제로 코드를 실행할 때 선언이 물리적으로 코드 상단으로 이동하는 것이 아니라, JavaScript 엔진이 실행 컨텍스트를 생성할 때 선언을 미리 메모리에 올려놓기 때문에 발생하는 현상이다.
변수의 호이스팅
변수의 선언은 호이스팅되지만, 할당은 호이스팅되지 않는다.
따라서 선언은 코드 상단으로 끌어올려지고, 초기화는 원래 위치에서 이루어진다.
var의 경우
console.log(a); // undefined
var a = 5;
console.log(a); // 5첫 번째 console.log(a)에서는 a가 선언되었지만, 초기화되지 않아 undefined를 반환한다.
const, let의 경우
console.log(b); // ReferenceError
let b = 10;let과 const는 호이스팅되지만 TDZ로 인해 초기화 전에 접근하려 하면 ReferenceError가 발생한다.
함수의 호이스팅
함수 선언문의 경우
hello(); // "Hello, World!"
function hello() {
console.log("Hello, World!");
}함수 선언문은 전체 함수 정의가 호이스팅된다. 따라서 코드 실행 전에 메모리에 함수가 정의된다.
함수 표현식
hello(); // TypeError: hello is not a function
var hello = function () {
console.log("Hello, World!");
};함수 표현식은 변수에 할당되므로 변수 호이스팅의 규칙을 따른다.
따라서 hello는 선언되지만 초기화되지 않아 TypeError가 발생한다.
TDZ
TDZ(Temporal Dead Zone)는 let, const, class와 같은 블록 스코프 변수나 클래스를 선언하기 전에 해당 변수에 접근하려고 하면 발생하는 상태를 말한다.
JavaScript는 코드를 실행하기 전에 변수 선언을 호이스팅한다. 하지만 let, const, class는 초기화 단계가 따로 이루어지며, 선언 전에 접근하려고 하는 경우 TDZ에 의해 에러가 발생한다.
console.log(b); // ReferenceError
let b = 10;즉, 이 예제에서, let b = 10은 호이스팅이 안되는 것이 아니라, 호이스팅되지만 초기화 전에 접근하였기 때문에 오류가 발생한 것이다.
