[Questions about JavaScript Language Basics] 호이스팅(Hoisting)

1. 호이 스팅(Hoisting) 

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다.

 

함수 실행 전, 자바스크립트 Parser가 해당 함수를 훑고, 함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행을 시키게 됩니다. 유효 범위는 함수 블록 {} 안에서 유효합니다. 실제 메모리에서는 변화가 없습니다.

 

var변수 선언과 함수선언문에서만 호이 스팅이 일어납니다. 여기서 중요한 것은, 선언만 위로 끌어 올려지는 것이며 할당은 끌어올려지지 않습니다. (let/const 변수 선언과 함수표현식에서는 호이 스팅 되지 않습니다). 함수 선언문은 코드를 구현한 위치와 관계없이 자바스크립트를 해석할 때 호이 스팅 됩니다. 하지만, var 변수 선언이 함수 선언보다 위로 끌어올려집니다.

 

var변수 선언과 함수선언문에서만 호이 스팅이 일어납니다.

 

var myName = "1day1commit";  //var 변수

function printMyName(){      //함수선언문
  console.log("1day1commit");
}

 

printMyNameOne();
printMyNameTwo();

function printMyNameOne(){         //함수 선언문
  console.log("hello One!");
}

var printMyNameTwo = function(){   //함수표현식
  console.log("hello Two");
}

hello One!
error: Uncaught TypeError: printMyNameTwo is not a function

 

선언만 위로 끌어 올려지는 것이며 할당은 끌어올려지지 않습니다.

 

myName = "1day1commit";   //할당
console.log(myName);
var myName;               //선언

 

함수 선언문은 코드를 구현한 위치와 관계없이 호이 스팅 됩니다.

 

//inner() => 함수 선언문

function printMyName(){
  var innerPrint = inner();
  console.log(innerPrint);
  
  function inner(){
    return "1day1commit";
  }
}

printMyName();

1day1commit

 

//inner() => 함수 표현식

function printMyName(){
  var innerPrint = inner();
  console.log(innerPrint);
  
  function inner(){
    return "1day1commit";
  }
}

printMyName();

error: Uncaught TypeError: inner is not a function

 

What will be the output of the following code?

 

function Add(){
    console.log(answer)
    var answer = 2
};
Add();

 

var temp = "hi";

function display(){
  var temp;
  console.log(temp);
  temp = "bye";
}

display();

 

undefined

undefined