호이스팅

호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 해당 스코프의 맨 위로 "끌어올려지는" 동작을 의미한다. 이는 코드 실행 전에 발생하며, 코드에서 선언된 순서와는 상관없이 선언부가 먼저 처리되는 개념이다.

다만, 선언만 호이스팅되며 초기화나 할당은 호이스팅되지 않는다. 따라서 변수의 값은 실제 선언문 이전에 사용하려 할 때 정의되어 있지 않아서 undefined로 나타날 수 있다.

변수 호이스팅

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

실제로 엔진은 위 코드를 아래와 같이 처리한다.

var myVar // 변수 선언이 호이스팅됨
console.log(myVar) // undefined
myVar = 10 // 값이 할당됨

myFunction() // "Hello, world!"
function myFunction() {
  console.log('Hello, world!')
}

실제로 엔진은 위 코드를 아래와 같이 처리한다.

function myFunction() {
  console.log('Hello, world!')
}
myFunction() // "Hello, world!"

함수 선언 역시 호이스팅되어 코드에서 선언보다 위에서도 호출될 수 있다. 하지만 함수 표현식은 호이스팅되지 않는다.

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

위 예시에서는 함수 표현식을 사용했기 때문에 변수는 호이스팅되지만, 함수 자체는 호이스팅되지 않아서 호출할 때 에러가 발생한다.

자바스크립트는 변수나 함수의 선언 순서가 달라도 지장이 없지만, 코드 가독성을 위해 코드의 맨 위에 명시하는 것이 권장된다.