JavaScript 호이스팅(hoisting)

JavaScript에서 호이스팅(hoisting)은 변수와 함수 선언이 해당 스코프의 최상단으로 "끌어올려지는" 행동을 의미합니다. 이러한 행동은 실행 컨텍스트의 생성 단계에서 발생하며, 코드의 실행 전에 이루어집니다.

변수 호이스팅

변수 선언은 스코프의 상단으로 끌어올려집니다. 초기화는 그렇지 않습니다. 이는 var 키워드로 선언된 변수에만 해당하며, let과 const는 호이스팅 되지 않습니다.

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

위의 코드는 다음과 같이 해석됩니다:

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

함수 호이스팅

함수 선언은 이름과 함께 전체 함수가 호이스팅됩니다. 함수 표현식의 경우 변수가 호이스팅되지만 초기화는 그렇지 않습니다.

console.log(foo()); // "I'm hoisted!"

function foo() {
return "I'm hoisted!";
}

console.log(bar()); // TypeError: bar is not a function

var bar = function() {
return "I'm not hoisted!";
};

주의할 점

var 키워드로 선언된 변수는 값이 undefined로 초기화됩니다. 선언 전에 변수를 사용하면 undefined가 반환됩니다.
let과 const로 선언된 변수는 호이스팅되지 않으므로 선언 전에 사용하면 ReferenceError가 발생합니다.
함수 표현식은 호이스팅되지 않으므로 선언 전에 사용하면 에러가 발생합니다.

요약

호이스팅은 JavaScript 엔진이 코드를 해석하는 방식과 관련이 있으며, 코드의 실행 순서와 관련된 혼란을 일으킬 수 있습니다. 따라서 호이스팅을 이해하고 예상치 못한 문제를 피하기 위해 코드 상단에서 변수와 함수를 선언하는 습관을 가지는 것이 좋습니다.