[Javascript] 호이스팅이란?

1. 호이스팅이란?

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

 

 

 

 

2. 자바스크립트 함수 동작 원리

1) 자바스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑는다.

2) 함수안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행한다. (함수 블록 {} 안에서만.)

3) 함수를 실행할 때, 호출한 위치보다 해당 함수가 하단부에 있을 경우 자바스크립트 Parser가 내부적으로 함수 위치를 끌어올려서 처리한다. -> 호이스팅

* 실제 메모리에서는 변화가 없습니다.

 

 

Why? 자바스크립트에서 함수를 선언하는 방식이 함수선언식과 함수표현식이 있습니다.

 

// 함수선언식
function test1() {
 return 1;
}

// 함수표현식
var test2 = function() {
 return 2;
}

 

자바스크립트에서는 함수도 객체로 인식되기 때문에 변수에 할당이 가능해서 함수표현식처럼 변수값에 함수 표현을 담아서 사용할 수 있습니다.

이 함수표현식의 장점 때문에 호이스팅이 사용되는데요.

함수표현식을 사용하면 클로저로 사용할 수 있고, 다른 함수의 인자로 넘기는 콜백(함수도 객체이기 때문에)으로 사용할 수 있기 때문입니다.

 

 

 

3. 함수표현식의 호이스팅 예제

/* 정상 */
 function printName(firstname) { // 함수선언문
     var inner = function() { // 함수표현식
         return "inner value";
     }
       
     var result = inner(); // 함수 "호출"
     console.log("name is " + result);
 }
 
 printName(); // > "name is inner value"

/* 오류 */
 function printName(firstname) { // 함수선언문
     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, const를 사용하면 됩니다.

 

 

참고

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html