자바스크립트에서의 호이스팅

호이스팅(Hoisting)의 개념

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

호이스팅이란

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언하게 됩니다.
자바스크립트가 함수 실행 전 해당 함수의 내용을 한번 체크합니다.
함수 안에 존재하는 변수,함수선언에 대한 내용을 체크하고 있다가 실행합니다. 유혀범위는 함수 블록 안에서 유효합니다.
이말은, 함수 내에서 하단에 위치한 내용 중 필요한 값을 상단으로 끌어올리는 것입니다. 실제 코드가 상단으로 끌어올려지는것은 아니며, 자바스크립트에서 내부적으로 끌어올려서 처리하는 것으로 실제 메모리에서는 변화가 없습니다.

호이스팅의 대상

• var 변수 선언과 함수선언문에서만 호이스팅이 일어납니다.
• var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 그대로 위치합니다.
• let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않습니다.

간단한 예시

작성한 코드

console.log("hello world");
var catName = "Lucky"; // var 변수 
let cat2Name = "Vanilla"; // let 변수 

실제 동작시 코드

var catName;
console.log("hello world");
catName = "Lucky"; // var 변수 
let cat2Name = "Vanilla"; // let 변수 

작성한 코드

func1();
func2();
function func1() { // 함수선언문
  console.log("hello Lucky");
}
var func2 = function() { // 함수표현식
  console.log("hello Vanilla");
}

실제 동작하는 코드

var func2;
function func1() { // 함수선언문
  console.log("hello Lucky");
}
func1();  //"hello Lucky! 출력
func2();  //ERROR! TypeError: func2 is not a function
func2 = function() { // 함수표현식
  console.log("hello Vanilla");
}

함수 선언식에서의 호이스팅

작성한 코드

function howling(catName) {
    var func1 = setName();
    console.log(typeof setName);
    console.log(func1 + ' meow meow');
    function setName() {
        return catName;
    }
}
howling('Lucky');

실제 동작하는 코드

function howling(catName) { // 함수선언식
  	var func1;	//변수 선언(호이스팅)
    function setName() { // 함수선언식(호이스팅)
      return catName;
    }
    func1 = setName(); //할당
    console.log(typeof setName); // > "function"
    console.log(func1 + ' meow meow'); // > "Lucky meow meow"
}
howling('Lucky');

함수 선언문은 작성한 위치와 상관없이, 자바스크립트 호이스팅의 특징으로 상단으로 끌어올려집니다.

함수 표현식에서의 호이스팅

선언이 호출보다 상단에 존재하는 경우

function howling(catName) {
  var func1 = function() {
    return catName;
  }
  var func2 = func1();
  console.log(func2 + " meow meow");
}
howling('Lucky');

function howling(catName) {
  var func1;	//함수표현식 선언(호이스팅)
  var func2;	//함수 선언(호이스팅)
  func1 = function() {	//함수표현식 할당
  	return catName;
  }
  func2 = func1();
  console.log(func2 + " meow meow");	// "Lucky meow meow"
}
howling('Lucky');

문제없이 출력됩니다.

선언이 호출보다 하단에 존재하는 경우

function howling(catName) {
  console.log(func2);
  var func2 = func1();
  console.log(func2 + " meow meow");
  var func1 = function() {
    return catName;
  }
}
howling('Lucky');

function howling(catName) {
  var func1;
  console.log(func2);	// 선언은 되었으나, 할당이 되지 않아 "undefined"가 출력됩니다.
  var func2 = func1();	//ERROR! TypeError: func1 is not a function
  console.log(func2 + " meow meow");
  func1 = function() {
    return catName;
  }
}
howling('Lucky');

func1은 선언만 되고, 할당은 호이스팅이 되지 않아서 undefined입니다. 해당 값이 함수가 아니기 때문에 var func2 = func1()에서 타입오류가 생기게 됩니다.