[TIL] 호이스팅(hoisting)이란?

변수와 함수 선언이 해당 범위의 최상위로 끌어올려지는 동작을 말한다.

자바스크립트는 실행 전 한번 훑어보기 때문에 변수와 함수 선언이 먼저 처리되는 것이다.

이처럼 끌어올려진 것처럼 동작하여 호이스팅이라고 한다.

 

변수 호이스팅

변수 호이스팅은 변수를 선언하는 var 키워드를 사용할 때 발생한다.

var로 선언된 변수는 코드의 최상위로 호이스팅되지만, 초기화는 호이스팅되지 않는다.

따라서 변수 선언은 최상위로 올라가지만, 변수 값은 실제 할당 지점에서 초기화된다.

 

console.log(x); // undefined
var x = 5;
console.log(x); // 5

 

위 코드에서는 var x 선언이 호이스팅되어 최상위로 이동하지만, 초기값 할당(x = 5)은 원래 위치에 남아 있다. 따라서 첫 번째 console.log(x)는 undefined를 출력합니다.

 

함수 호이스팅

함수 호이스팅은 함수 선언을 사용할 때 발생한다. 함수 선언은 선언된 위치와 상관없이 코드의 최상위로 호이스팅되며, 함수 전체가 호이스팅된다.

 

greet(); // "Hello, world!"

function greet() {
    console.log("Hello, world!");
}

 

위 코드에서 함수 greet의 선언이 최상위로 호이스팅되기 때문에, 함수 선언 전에 greet()를 호출할 수 있다.

 

let과 const의 경우

let과 const로 선언된 변수는 호이스팅되지만, Temporal Dead Zone(TDZ)이라는 개념에 의해 실제 선언 전에는 접근할 수 없다. 따라서, 선언 전에 접근하려고 하면 ReferenceError가 발생합니다.

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;
console.log(y); // 10

 

이렇게 호이스팅은 자바스크립트의 동작 방식 중 하나로, 변수와 함수의 선언이 코드 실행 전에 처리되는 것을 의미한다. 이는 코드 작성 시 주의할 점이며, 특히 var 키워드와 관련된 버그를 방지하기 위해 let과 const를 사용하는 것이 권장한다.

 

* Temporal Dead Zone(TDZ) : 자바스크립트 내에서 변수가 선언되기도 전에 호출이 되는 혼선을 방지하기 위해 만들어진 자동 시스템