자바스크립트 호이스팅이란 무엇인가?

출처: 매일 메일

자바스크립트의 호이스팅

호이스팅(Hoisting)은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징이다. 이를 통해 코드의 선언된 위치와 관계없이 변수를 사용할 수 있는 것처럼 보일 수 있다.

호이스팅의 특징

호이스팅은 선언의 호이스팅일 뿐, 변수의 값 할당까지 끌어올려지지는 않는다. 예를 들어 var로 선언된 변수는 선언 자체는 호이스팅되지만, 초기화되기 전까지는 undefined로 평가된다.

console.log(myVar); // undefined
var myVar = 10;
console.log(myVar); // 10

함수 호이스팅
함수 선언은 전체가 호이스팅되기 때문에, 함수 호출을 선언 이전에 해도 문제가 없다.

console.log(myFunction()); // 'Hello World' 출력
function myFunction() {
return 'Hello World';
}

let과 const의 호이스팅

ES6에서 도입된 let과 const는 호이스팅이 되긴 하지만, 선언하기 전에 접근하려고 하면 ReferenceError가 발생한다.

Temporal Dead Zone (TDZ)

TDZ는 변수가 선언되었지만 초기화되기 전까지의 구간을 말한다. let과 const로 선언된 변수는 TDZ가 존재하며, 이 구간에서는 변수에 접근할 수 없다.

console.log(myLet); // ReferenceError 발생
let myLet = 10;

이 경우, 변수 선언은 호이스팅되었지만 초기화는 변수 선언이 실제로 실행될 때까지 이루어지지 않는다. TDZ는 코드에서 변수가 선언된 시점부터 초기화될 때까지의 구간에서 변수를 사용하지 못하게 막아주는 역할을 한다.

따라서 호이스팅은 변수와 함수 선언을 코드 상단으로 끌어올리는 것처럼 동작하지만, var는 선언만 호이스팅되어 초기화 전에 undefined가 되며, let과 const는 TDZ로 인해 초기화 전에 접근하면 ReferenceError를 발생시킨다.