변수와 함수의 Hoisting 현상

이게 뭐냐면, 변수의 선언을 변수 범위 맨 위로 끌고오는 현상이다. (함수 또한 마찬가지.)

변수를 만나게 되면, 선언한 부분만 떼어내 강제로 맨 위로 끌어올린다. 

 

 

function 함수(){

      console.log('hello')

      var 이름 = 'kim';

}

 

이런 코드가 있을때,  아래와 같이 동작한다. 

 

function  함수(){

      var 이름;

      console.log('hello')

      이름 = 'kim';

}

 

그래서 이런 현상이 나타난다.

function 함수(){

      console.log(이름);   // 결과값은 undefined 출력. 

      var 이름 = 'kim';

      console.log(이름);    // 'kim' 출력.

}

아직 변수 선언을 안했는데 먼저 출력한다고 인식하기 때문 인가 싶을 수 있지만, 

그런 경우 error : 변수 '이름' is not defined  이라는 에러메세지가 나와야 한다. 

그런데 undefined 출력이 되었다는 것은,

hoisting 현상에 의해 변수 선언은 되었으나 아직 값이 할당되지 않아, 알아서 undefined로 할당되었다는 의미이다. 

 

 

그렇다면 let이나 const의 경우는 어떨까?

hoisting 이 일어나긴 하는데 약간 다른 방식으로 hoisting이 일어난다. 

 

function 함수(){

      console.log(이름);   // 결과값은 Uncaught ReferenceError: Cannot access 'age' before initialization 

      let 이름 = 'kim';

      console.log(이름);    // 'kim' 출력.

}

 

변수 선언한 부분만 떼어져 맨 위로 올라오긴 했는데, undefined는 할당되지 않고 빈값인 상황이라 이런 현상이 나타난다. 

이런걸 전문용어로 

temporal deadzone / uninitialized 

라고 한다고 함. 

 

함수의  hoisting

fun();

var fun = function(){

     console.log(안녕);     // 결과값은 Uncaught TypeError : fun is not a function

     var 안녕 = 'Hello';

};

 

 

var로 선언된 함수이고, hoisting 이 되니까 undefined 뜰거라고 예상했다. 

그런데 결과는 달랏다. 

이유는 함수가 선언된 방식에 있었다. 

 

함수 선언식 / 함수 표현식

함수 선언식  __ hoisting 될 때에 함수 자체가 hoisting 됨.

function fun(){

}

 

함수 표현식__ hoisting 될 때에 변수가 hoisting 됨. 함수는 아래에 남아있다. 

let fun = function (){

}