호이스팅이란?

호이스팅이란?

자바스크립트는 실행 시 코드가 위에서부터 한줄한줄 차례대로 실행된다고 생각할 수 있으나 아래의 예시를 보면 조금 다르다는 것을 알 수 있다.

a = 100;
var a;
console.log(a); //undefined가 아니라 100

.

console.log(a); //100이 아니라 undefined
var a = 100;

자바스크립트는 실행되기 전 함수 내 선언된 변수는 함수의 최상단으로, 함수 바깥의 경우는 전역 범위의 최상단으로 선언문을 끌어올린다. 이때 주의해야 할 점은 선언문만 끌어올려지는 것이며, 할당은 호이스팅이 되지 않는다.
이를 이해했다면 위의 두 번째 예시에서 100이 출력되지 않고 undefined가 출력된 지 이해할 수 있다.

console.log(a);
var a = 100; //이 코드는 아래와같이 호이스팅이 발생한다.

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

실제로 코드가 변경된 것은 아니고 코드가 실행되기 전 내부적으로 처리되었다고 생각하면 된다.

호이스팅의 대상

호이스팅은 var 변수 선언과 함수의 선언문에서만 일어난다.

foo(); //호출가능
function foo() {
  console.log(a); //undefined
  var a = 100;
}

함수표현식에서는 아래와 같다

foo(); // TypeError
var foo = function bar() {
  //...
};

foo는 호이스팅이 발생하여 ReferenceError는 발생하지 않지만 undefined를 호출하려해서 TypeError이 발생한다.
let과 const를 사용하거나 변수를 상단에 선언하여 호이스팅이 발생하지 않도록 하는 것이 코드의 가독성이나 유지보수 측면에서 좋다.