호이스팅(hoisting)은 JavaScript에서 변수 및 함수 선언이 스코프 상단으로 끌어올려진 것 같은 현상을 말합니다. 이것은 코드 실행 전에 JavaScript 엔진에 의해 처리됩니다.

호이스팅은 두 가지 주요 요소에 적용됩니다: 변수 선언(var)과 함수 선언(function).

변수 호이스팅

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

위 코드에서 변수 x가 선언되기 전에 참조되었음에도 불구하고 오류가 발생하지 않고 undefined가 출력됩니다. 이는 변수 선언이 호이스팅되어 선언 부분이 코드 상단으로 끌어올려졌기 때문입니다.

실제로는 다음과 같이 동작합니다:

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

함수 호이스팅

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

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

함수 선언도 호이스팅됩니다. 따라서 함수를 선언하기 전에 호출해도 오류가 발생하지 않습니다. 함수 선언은 전체가 끌어올려지므로 함수를 어디에서든 호출할 수 있습니다.

위 코드는 다음과 같이 동작합니다:

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

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

let과 const의 호이스팅

let과 const는 호이스팅이 발생하지만, 선언 단계에서 초기화되지 않아 변수에 접근하려고 할 때 ReferenceError가 발생합니다. 따라서 호이스팅을 이해하는 데 있어서 let과 const는 주의가 필요합니다.

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

그래서 let과 const를 다룰 때에는 이런식으로 사용해야한다

let x; // 변수를 선언
console.log(x); // undefined
x = 5; // 초기화
console.log(x); // 5