Hoisting

호이스팅(hoisting)이란?

-선언되기 이전에 참조 혹은 호출을 먼저 실행 할 수 있다. 즉, 변수(또는 함수, 클래스 등)가 scope의 최상단으로 끌어올려지는 것처럼 보이는 현상을 말한다.

-parsing 단계에서 자바스크립트 엔진은 코드를 읽으면서 모든 선언문에 대해 메모리 공간을 미리 할당하고 초기값을 저장한다.

-코드가 실행되는 과정을 조금 더 자세히 살펴보면, 모든 Execution Context의 creation phase에서 변수는 Variable Environment 객체의 new properties로 생성된다. 동시에 VE 객체에 scope 프로퍼티 또한 생성되고 이 scope 내(혹은 하위 스콥)에서 변수에 대한 접근이 허용된다. 

-주의할 점은 호이스팅은 선언과 할당을 분리하여 생각해야한다. 호이스팅은 해당 변수의 존재만 알 뿐 그 변수에 실제로 할당될 값을 미리 알지는 못한다.

-그러므로, 만약 선언 코드 없이 할당 코드만 존재할 경우엔 ReferenceError를 내보낸다. 

-function 키워드로 선언한 함수는 선언과 동시에 할당이 일어나기 때문에 호출이 선언보다 먼저 실행될 수 있다.

-할당문이 실행될 때까지 변수에는 특정 초기값이 저장되는데, 이 초기값은 Declaration 방식에 따라 조금씩 다르게 나타난다.

  1. Function declaration : function body를 초기값(initial value)으로 갖는다. (호이스팅은 함수 선언문에서만 사용)

    *function expression and arrow function : depends on variable keyword(const / let)

  2. 'var' variable declaration : undefined를 초기값으로 갖는다.

  3. 'const/let' variable declaration : TDZ(Temporal Dead Zone) 내에서 Uninitialized로 설정된다. 접근시 ReferenceError를 내보낸다.

    *TDZ(Temporal Dead Zone) : 해당 변수의 scope 시작점부터 변수가 선언되는 지점까지를 일컫는 말임

 

*호이스팅은 작성 순서가 아닌 실행 순서에 의해 발생한다.

function foo () {
  console.log(boo);
}
// 코드 위치만 봐서는 여기가 TDZ임
let boo = 3;

func(); // 3 (호이스팅이 일어나지 않았다)