JavaScript의 호이스팅(Hoisting)

JavaScript는 실행되기 전에 필요한 변수값들을 모두 모아서 유효 범위의 최상단으로 끌어올리는데, 이를 호이스팅이라 한다.

변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치하므로 변수 및 함수 선언이 물리적으로 코드의 상단으로 옮겨지는 것은 아니다. 다만 최상단에 끌어올려지듯 작동할 뿐이다.

여기서 중요한 것은 선언과 할당의 차이다. 선언과 할당을 구분해야 한다. 선언만 호이스팅 된다.

function getX() {
  console.log(x); // undefined
  var x = 100;
  console.log(x); // 100
}

호이스팅 되지 않았다면 에러가 발생했어야 한다.

Uncaught ReferenceError: x is not defined

호이스팅 되었기 때문에 에러는 발생하지 않았다. 다만 선언만 호이스팅되어 값은 undefined가 된다.

앞서 살펴 보았듯, 함수 역시 호이스팅 된다.

여기서 조심해야 할 것은 함수 선언식은 호이스팅 되나 함수 표현식은 그렇지 않다는 것이다.

역시 선언만 호이스팅 된다는 원칙이 유지된다.

함수 선언식의 호이스팅

foo(); // hello

function foo() {
  console.log("hello");
}

함수 표현식의 Syntax Error

foo();
var foo = function() {
  console.log("hello");
};

Uncaught TypeError: foo is not a function 가 발생한다.

이 역시 foo라는 변수의 선언부만 호이스팅 되었기에 그러하다.

console.log(foo); // undefined
var foo = function() {
  console.log("hello");
};

foo를 콘솔로 출력해보면 undefined 를 확인할 수 있다. 일반 변수처럼 선언만 호이스팅 된다.