Hoisting.md

0. Hoisting

1. 호이스팅의 개념

• 호이스팅의 개념
  • 일반적인 의미: 변수 및 함수 선언문 등 모든 선언문이 물리적으로 작성한 코드의 상단으로 끌어 올리는 것
    • 하지만 정확한 개념은 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만 위치는 물리적으로 작성한 코드와 정확히 일치한 곳에 위치한다.
  • 정확한 의미는 호이스팅이란 변수 및 함수 선언을 컴파일 단계에서 메모리에 저장하는 방식
    • 따라서 코드에서 선언하기 전에 함수를 사용할 수 있다.
  • 🔷 호이스팅은 선언만 끌어올린다. 🔷
• 호이스팅의 대상: 모든 선언
  • var
  • let
  • const
  • function
  • function*
  • class

2. 변수 호이스팅

• 변수의 생성 과정
  1. Declaration phase(선언 단계): Variable Object에 변수를 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다
  2. Initialization phase(초기화 단계): Variable Object에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화된다.
  3. Assignment phase(할당 단계): undefined로 초기화된 변수에 실제값을 할당한다.
• 변수 생성과정을 통한 변수 호이스팅의 이해

  • var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 즉, 스코프에 변수가 등록되고 변수는 메모리에 공간을 확보한 후 undefined 로 초기화된다.

  • 즉 Declaration/Initialization phase는 동시에 이루어진다:

    • 🔷 즉 변수가 호이스팅되어 올라갈 때, 실제 값을 할당된 부분은 호이스팅 되지 않는다.🔷

    • 🔷 Assignment phase는 실제 변수가 선언된 곳에서 실시되는 것이다. 🔷

    • 예

      //Hoisting: var a;
      console.log( a );	//undefined
      
      var a = 3;
      
      console.log( a );	//3

3. 함수 호이스팅(Function Hoisting)

• 함수도 마찬가지로, 함수 선언의 위치와는 상관없이 코드 내 어느 곳에든지 호출이 가능하다.

  • 함수 선언문으로 정의(선언)된 함수는 *자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 초기화(초기화)*하고 이를 Variable Object에 저장한다.
  • 따라서 변수 호이스팅과 다르게 소스 내 어느 곳에서든지 호출이 가능하다
    • 함수의 선언, 초기화 , 할당이 한번에 이루어지기 때문

• 함수 호이스팅의 예

  var study = {
      
      init : function () {
          //아래에서 선언된 함수가 호이스팅되어 init함수에서 사용할 수 있다.
          study.variableHoisting();
          study.functionHoisting();
          study.functionHoistingByExpression();
      }, 
  
      bind : function(){
  
      },
  
      /** FUNCTION **/
  
      variableHoisting : function () {
      /**1.  변수의 호이스팅
       * - 호이스팅: 변수 및 함수 선언문 등 모든 선언문이 물리적으로 작성한 코드의 상단으로 끌어 올리는 것
       * - 호이스팅은 선언만 끌어올린다
       */
      /*생략*/
      },
  
      functionHoisting : function () {
      /**
       * 2.  함수 호이스팅: 소스 내 어느 곳에서든지 호출이 가능하다.
      */
      /*생략*/ 
      },
  
      functionHoistingByExpression : function(){
      /**
       * 3.  함수 표현식의 경우 함수 호이스팅: 함수표현식의 경우 변수 호이스팅이 적용된다.
      */
  	/*생략*/ 
      },
  }

• 주의점

  • 함수의 선언 형태에 따라서 함수 호이스팅이 아닌, 변수 호이스팅이 진행된다: 함수표현식으로 함수를 정의한 경우 변수 호이스팅이 적용

    • 함수 표현식으로 함수를 변수에 할당한 경우 해당 변수는 함수명이 아니라 함수의 참조값을 가르킨다.

    • 따라서 이경우는 변수 호이스팅이 적용된다.

    • 예

       functionHoistingByExpression : function(){
          /**
           * 3.  함수 표현식의 경우 함수 호이스팅: 함수표현식의 경우 변수 호이스팅이 적용된다.
          */
           
          /* 아래 코드에서.. TypeError: variableHoistingByVarHoisting is not a function
          var str = variableHoistingByVarHoisting( "함수 표현식으로 정의한 함수의 경우 변수 호이스팅이 적용" );
          console.log( str );    
          */   
          
          //variableHoistingByVarHoisting는 함수표현식으로 쓰이고 변수에 함수 참조값을 저장: 변수 호이스팅 적용
          var variableHoistingByVarHoisting = function( str ){
              return str;
          }
      	
          //아래에서는 함수 정상 실해
          var str = variableHoistingByVarHoisting( "함수 표현식으로 정의한 함수의 경우 변수 호이스팅이 적용" ); 
          console.log( str );
      
      },

  • 따라서 함수표현식은 스크립트 로딩 시점에 Variable Object에 함수를 할당하지 않고 runtime시 해석되고 실행되므로 이 두가지의 차이점을 구분하는 것이 중요하다.

    • 그래서 함수 호이스팅을 사용하지 않는 함수표현식을 사용하는 것을 권고한다.