Ch4. 호이스팅

변수나 함수 선언이 코드 실행 전 스코프 최상단으로 끌어올려지는 현상을 호이스팅이라 한다.

4.1 닭이 먼저냐 달걀이 먼저냐

자바스크립트는 코드가 위에서부터 줄단위로 실행되기 전에
선언을 먼저 수집하고 스코프에 등록한다.

a = 2;
var a;

console.log(a);  // 2

컴파일 결과는 다음과 같다:

var a;
a = 2;
console.log(a);  // 2

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

컴파일 결과:

var a;
console.log(a);
a = 2;

var a = 2;

은 아래처럼 나뉜다:

var a;    // 컴파일 단계
a = 2;    // 실행 단계

→ 선언만 호이스팅되고, 할당은 런타임에 실행

foo();

function foo() {
  console.log(a);  // undefined
  var a = 2;
}

함수 foo는 호이스팅되어 위에서 호출 가능하다.

foo();  // TypeError
bar();  // ReferenceError

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

컴파일 결과:

var foo;
foo();  // TypeError (foo is undefined at runtime)
bar();  // ReferenceError (bar not in scope)

→ 함수 표현식은 호이스팅되지 않는다

함수 선언과 변수 선언이 동시에 있을 경우, 함수가 먼저 호이스팅된다.

foo();  // 1
var foo;

function foo() {
  console.log(1);
}

foo = function() {
  console.log(2);
};

→ function foo()가 먼저 등록됨

중복 선언 시, 가장 마지막 선언이 적용된다:

foo();  // "b"

var a = true;

if (a) {
  function foo() {
    console.log("a");
  }
} else {
  function foo() {
    console.log("b");
  }
}

※ 위 예제는 브라우저 환경에 따라 동작 방식이 달라질 수 있음