호이스팅에 대해 설명해주세요

호이스팅(Hoisting)은 자바스크립트에서 변수와 함수의 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다. 이는 코드의 작성 순서와는 관계없이 자바스크립트 엔진이 실행 시점에 선언부를 먼저 처리하기 때문에 발생합니다.

 

 

예를 들어, var 키워드로 변수를 선언하면 호이스팅이 발생하여 변수 선언이 코드의 최상단으로 이동합니다. 하지만 변수의 할당은 원래 위치에 남아 있기 때문에, 선언 전에 변수를 참조하면 undefined를 반환합니다.

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

위 코드에서 a는 호이스팅으로 인해 선언부가 위로 올라가지만, 값이 할당되기 전이므로 undefined가 출력됩니다.

반면에 let과 const로 선언한 변수는 호이스팅이 되지만, Temporal Dead Zone(TDZ) 때문에 선언 전에 접근하려고 하면 ReferenceError가 발생합니다.

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

함수의 경우, 함수 선언문은 호이스팅되어 선언 이전에 호출이 가능합니다.

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

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

하지만 함수 표현식이나 화살표 함수로 선언된 함수는 변수 호이스팅의 규칙을 따르기 때문에, 선언 전에 호출하면 에러가 발생합니다.

bar(); // TypeError: bar is not a function
var bar = function() {
  console.log("Hello, world!");
};

요약하면, 호이스팅은 자바스크립트의 독특한 동작 방식으로, 변수와 함수의 선언부를 스코프의 최상단으로 끌어올립니다. 이를 올바르게 이해하면 예상치 못한 버그를 피하고 코드의 실행 흐름을 더 잘 파악할 수 있습니다.