호이스팅(Hoisting)

호이스팅(Hoisting)이란?

호이스팅은 자바스크립트에서 변수 및 함수 선언을 해당 스코프의 최상단으로 이동시키는 동작을 의미한다.
종류에는 변수 호이스팅과 함수 호이스팅이 있다.

변수 호이스팅(Variable Hoisting)

변수 선언은 해당 스코프의 최상단으로 이동되지만, 초기화는 그 자리에 남게 되며
따라서, 변수 선언 이전에 변수를 사용할 수 있지만, 값이 할당되기 전까지는 undefined로 초기화된다.

예시

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

함수 호이스팅(Function Hoisting)

함수 선언은 해당 스코프의 최상단으로 이동되며 따라서, 함수 선언 이전에 함수를 호출할 수 있다.

예시

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

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

변수 호이스팅과 함수 호이스팅의 차이점

변수 호이스팅은 변수 선언만을 최상단으로 이동시키고, 초기화는 그 자리에 남깁니다.
함수 호이스팅은 함수 선언 자체를 최상단으로 이동시킵니다.

이러한 호이스팅은 코드의 가독성을 해치므로, 선언과 초기화를 코드 상단에 명시적으로 작성하는 것이 좋고
특히 변수 호이스팅은 예기치 않은 동작을 초래할 수 있기에 방지하기 위한 let이나 const를 사용하여 블록 스코프 변수를 선언하는 것이 중요하다.