deep JavaScript - 2. 호이스팅

✔  호이스팅에 대해 정리합니다. 👍

 

호이스팅에 대해서

 

 

// var 영역
  var val = 'global';
  function func() {
      console.log(val); //undefined
      var val = 'local';
      console.log(val); //local
  }
  func();
  console.log(val); //global
 
================================================
 
// let 영역
  let userName = 'James'; 
 
  function func() {
      console.log(userName); //ReferenceError
      let userName = 'Mike';
      console.log(userName); //Mike
  }
  func();
  console.log(userName); //James
 

지난 시간, 전역 스코프를 정리하면서 위 예제에서 var 영역의 func 함수의 첫번째 라인인 변수 val 를 

콘솔에 찍으면 undefined 이 찍힌다는 것과 let 영역의 func 함수의 첫번째 라인인 변수 userName 이

ReferenceError 에러가 나는 이유에 대해서 호이스팅편에서 다룬다고 했다. 

 

 

여기서는 변수와 함수의 호이스팅에 대해서 정리해본다.

 

1. 호이스팅

   호이스팅이란 

    : 변수를 선언하고 초기화했을 때, 스코프 내부 어디서든 선언부가 최상단으로 끌어올려지는

      현상을 의미한다. 

      ★ 흔히 var만 호이스팅된다고 생각하지만, let, const도 호이스팅된다. 

   

  1) 변수에서의 호이스팅 

    var 키워드로 선언된 변수 

     - var로 선언한 모든 변수는 선언되기전 사용이 가능하다. 

     - 선언 부분은 호이스팅되지만 할당 부분은 호이스팅이 되지 않는다. 

       즉, val라는 변수의 선언부만 최상단에 올려지고, local 이란 값은 그 자리에 있게된다. 

 

    let, const 키워드로 선언된 변수 

    - let, const도 호이스팅이 되지만, TDZ이라는 구역에 영향을 받는다.

     → let, const도 호이스팅이 되지만 TDZ 라는 구역에 영향을 받게 되어 할당하지 않고서는 사용할 수 없다.

         즉 let으로 선언된 userName 란 변수도 호이스팅이 되어 선언부가 최상단으로 끌어 올려지지만 아직

         할당되지 않은 상태이므로 사용할 수 없어서 에러가 생긴다. 

       

   변수의 생성과정

    변수는 3단계 생성과정을 걸친다. 

     1) 선언 단계

     2) 초기화 단계

     3) 할당 단계

 

   var 키워드 선언된 변수

    1) 선언 및 초기화 단계

    2) 할당단계   

     → var 키워드로 선언된 변수는 선언 및 초기화 단계가 같이 이루어진다. 그리고나서 할당 단계를 걸친다. 

   let 키워드로 선언된 변수

   1) 선언 단계

   2) 초기화 단계

   3) 할당 단계

    → 호이스팅되면서 선언 단계가 이루어지지만, 초기화 단계는 실제 코드가 실행되는 지점에서 이루어지므로

        Reference Error 가 생긴다. 

 

  const 키워드로 선언된 변수 

   1) 선언 + 초기화 + 할당 

    → 선언, 초기화 그리고 할당이 동시에 일어난다. 따라서 초기화가 이루어지고나서 나중에 할당하게 되면

        Uncaught TypeError가 생긴다.   

  

 

   ☆ 초기화 단계

     → undefined를 할당해주는 단계

 

   ☆ TDZ(Temporal Dead Zone) 

     → 일시적인 사각지대라는 뜻으로 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말한다. 

 

  2) 함수에서의 호이스팅 

    함수 선언식과 표현식의 차이

     - 함수 선언 방식에는 함수 선언식과 함수 표현식이 있다.

      

 // 함수 선언방식 
 
 
 // 함수 선언식
 function sayHello () {
   console.log('hello!');
 }
 
 
 // 함수 표현식 
  var sayBye = function () {
    console.log('bye!')
  }

    - 함수 선언식은 호이스팅이 되지만, 함수 표현식은 호이스팅이 되지 않는다.    

 sayHello (); // sayHello 함수의 식 자체가 호이스팅됨
 sayBye (); // ??
 
 // 함수 선언식
 function sayHello () {
   console.log('hello!');
 }
 
 
 // 함수 표현식 
  var sayBye = function () {
    console.log('bye!')
  }

    ◎ 함수 선언식은 호이스팅에 영항을 받아서 함수의 식 자체가 상단에 끌어올려지기 때문에 에러 없이

        정상 작동된다.

 

    ◎ 함수 표현식은 일단, var 키워드로 선언된 변수가 호이스팅이 되며 아직 함수를 할당하지 않은

        단계에서 호출했기 때문에 다음과 같은 에러가 생긴다. 

                  

         Uncaught TypeError: sayBye is not a function

 

        ❗ let, const 로 선언된 변수라면  sayBye is not defined  에러가 생긴다.

 

 

   마무리

 

   호이스팅이란 개념도 중요하지만 자바스크립트 엔진이 코드를 해석하는 방식이 어떤식으로 처리되는

   지를 알면 코딩하면서 접하는 대부분의 기본적인 에러들은 잡을 수 있을 것같다. 

      

   요즘은 var라는 키워드를 잘 사용하지 않아서 호이스팅에 대해서 고민해보지 않아도 되지만 여전히

   호이스팅은 중요한 개념인 것같다.  특히 함수 선언 방식에 있어서 함수 선언식보다는 되도록 함수

   표현식을 사용할 것을 권하고있다. 

 

   함수 선언식을 사용하든, 표현식을 사용하든 이러한 원리를 알고 있으면 좀 더 코딩하는데 수월할 것

   같다.  

   여기서는 깊이 있게 정리하지는 못했지만, 호이스팅은 실행컨텍스트을 알면 좀 더 이해하는데 어렵지

   않다고 한다.

   (담에는 실행컨텍스트를 공부하면서 호이스팅이란 개념을 실행 컨텍스트로 분석해서 정리해보자!! )

          

 

  [참조]

  - 제로초님의 블러그

  - 코딩앙마님의 유투브 강좌

  - 캡틴판교님의 블러그