변수 호이스팅과 함수 호이스팅은 JavaScript 및 TypeScript와 같은 언어에서 흔히 발생하는 동작입니다. 이 두 개념은 코드 실행 시간 동안 변수와 함수가 어떻게 선언되고 처리되는지에 대한 이해가 필요합니다.

변수 호이스팅(Variable Hoisting)

변수 호이스팅은 변수가 선언되기 이전에 참조될 수 있는 현상을 말합니다. let과 const 키워드로 선언된 변수들은 실제 선언 위치까지 호이스팅되지 않으며, 선언된 위치에서 초기화되기 전까지 TDZ(Temporal Dead Zone)에 머물게 됩니다. 반면 var 키워드로 선언된 변수는 선언과 동시에 undefined로 초기화되고, 호이스팅된 후 해당 위치에 정확히 있습니다.

예시:

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

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

함수 호이스팅(Function Hoisting)

함수 호이스팅은 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다. 이는 함수가 선언되기 이전에 호출될 수 있는 특징을 갖습니다.

예시:

sayHello(); // "Hello"

function sayHello() {
  console.log("Hello");
}

이것은 함수 표현식에서는 적용되지 않습니다. 함수 표현식은 호이스팅되지 않으므로, 해당 변수가 선언된 후에만 호출할 수 있습니다.

변수 호이스팅과 함수 호이스팅은 코드 실행 시 동작에 영향을 미치므로, 개발자는 이러한 개념을 이해하고 코드를 작성할 때 이를 고려해야 합니다.

이러한 호이스팅 개념을 이해하면 코드의 동작을 예측하고 오류를 방지하는 데 도움이 됩니다.

참고 자료:

• MDN web docs
• TypeScript Handbook