hoisting(호이스팅)

자바스크립트 엔진은 어떤 컨텍스트에 관련된 코드들을 실행하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장 한다.

이 객체는 자바스크립트 엔진이 활용할 목적으로 생성하는 객체들이고, 개발자들이 코드를 통해 확인 할 수 없다.

 

VariableEnvironment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보. 선언 시점의 

                             LexicalEnvironment 의 스냅샷으로, 변경 사항은 반영되지 않는다.

 

LexicalEnvironment : 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨.

 

ThisBinding : this 식별자가 바라봐야 할 대상 객체

 

 

호이스팅은 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 수집한다.라는 걸 말한다.

매개변수 식별자, 선언한 함수가 있을 경우 그 함수 자체, var로 선언된 변수의 식별자 등을 수집한다

 

호이스팅 이란 '끌어올리다' 라는 의미이다. 변수 정보를 수집하는 과정을 더욱 이해하기 쉬운 방법으로 대체한

가상의 개념이다. 자바스크립트 엔진이 실제로 끌어올리진 않지만, 편의상 끌어올린 것으로 간주하자는 것 ! 

 

호이스팅 규칙

 

매개변수와 변수에 대한 호이스팅(1) - 원본 코드

 

 

 

function a (x) { // 수집 대상 1 (매개변수)
      console.log(x); // (1)
      var x; // 수집 대상 2 (변수 선언)
      console.log(x); // (2)
      var x = 2; // 수집 대상 3 (변수 선언)
      console.log(x) // (3)


}
a(1);

 

 

 

먼저, 호이스팅이 되지 않았을 때, (1), (2), (3)에서 어떤 값들이 출력될지를 예상 해보자.

내 생각으로 (1) 에는 함수 호출시 전달된 1이 출력 되고, (2) 에는 선언 변수에 할당 값 없으므로, undefined ,

(3)에서는 2가 출력될 것 같다. 

 

매개변수와 변수에 대한 호이스팅이 끝났다고 간주한 상태(3) 

function a ( ) {
      var x;		   // 수집 대상 1의 변수 선언 부분
      var x;		   // 수집 대상 2의 변수 선언 부분
      var x;          // 수집 대상 3의 변수 선언 부분
    
      x = 1;          // 수집 대상 1의 할당 부분
      console.log(x); // (1)
      console.log(X); // (2)
      x = 2;		  // 수집 대상 3의 할당 부분
      console.log(x); // (3)

}
a(1)

이제 호이스팅이 끝났으니, 실제 코드를 실행할 차례이다.

실제로, (1) 1, (2) 1, (3) 2 라는 결과가 나오게 된다. (2) 에서 undefined가 아닌 1이 출력 된다는 건 호이스팅 개념을

정확히 이해하지 못하면 예측하기 어려운 결과일 것 같다.