[JavaScript] 호이스팅(Hoisting)

호이스팅 (Hoisting)

: 변수의 선언과 초기화를 분리 후 선언만 최상단으로 올려지는 것

변수 생성 과정
1. 선언 : 변수를 변수 객체에 등록
2. 초기화 : 변수 객체에 등록된 변수를 위한 메모리 공간을 확보하는 단계로 이때 변수는 undefined로 초기화된다.
3. 할당 : undefined의 초기화된 변수에 값을 할당하는 단계

 

1. 변수 호이스팅

  1-1. var
  : var로 선언된 변수는 변수 선언과 초기화가 한 번에 진행된다.
  : 선언단계에서 undefined로 초기화되기 때문에 선언문 이전에 접근해도 에러가 아닌 undefined가 출력된다.

  1-2. let / const
  : let과 const는 변수 선언과 초기화가 분리되어 이루어지고 실행 시점에서 실제 선언부를 만날 때 초기화가 진행된다.
  : 따라서 초기화 전에 변수에 접근 시 참조에러(ReferenceError)가 발생하게 된다. 여기서 초기화 전까지의 구간을 TDZ라고 한다.

일시적 사각지대 TDZ(Temporary Dead Zone)
: 변수 스코프 맨 위에서부터 변수가 초기화되는 시점까지의 구간
: TDZ의 영향을 받는 구문은 const, let, class

2. 함수 호이스팅

  2-1. 함수 선언문
  : 함수 선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어올려진다.

function printName() {
    var result = inner();
    console.log(typeof inner); // "function"
    console.log("name is " + result); // "name is inner value"

    function inner() {
        return "inner value";
    }
}

printName();

  2-2. 함수 표현식
  : 함수 표현식에서는 선언과 할당이 분리되어 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다.
  : 변수에 할당된 함수 표현식은 끌어올려지지 않기 때문에 이때는 변수의 스코프 규칙을 그대로 따른다.

함수표현식이 var로 선언되어 있어 호이스팅에 의해 inner가 undefined로 초기화되어 함수로 인식되지 않으므로 TypeError가 발생하게 된다.

/* 오류 */
 function printName() {
     console.log(inner); // "undefined": 선언은 되어 있지만 값이 할당되어있지 않은 경우
     var result = inner(); // ERROR!!
     console.log("name is " + result);

     var inner = function() { // 함수표현식 
         return "inner value";
     }
 }
printName(); // TypeError: inner is not a function

 

함수표현식이 let으로 선언되어 있어 호이스팅되지 않은 상태인데 호출보다 아래에 존재하여 inner에 대한 선언이 되지 않았기 때문에 ReferenceError가 발생한다.

 /* 오류 */
 function printName(firstname) { // 함수선언문
     console.log(inner); // ERROR!!
     let result = inner();  
     console.log("name is " + result);

     let inner = function() { // 함수표현식 
         return "inner value";
     }
 }

printName(); // > ReferenceError: inner is not defined

참고
: https://velog.io/@eassy/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85
: https://velog.io/@jangwonyoon/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EA%B3%BC-TDZ%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B4%EA%B3%A0-%EC%96%B4%EB%96%A4-%EC%97%B0%EA%B4%80%EC%9D%B4-%EC%9E%88%EC%9D%84%EA%B9%8C%EC%9A%94