JavaScript - 함수 선언문, 함수 표현식 호이스팅

함수 호이스팅

 

호이스팅이란 선언문이 코드 최상단에 끌어올려진 듯한 자바스크립트만의 현상을 의미한다. 함수 또한 호이스팅이 발생할 수 있는데 함수 선언문과, 함수 표현식 어떤 방식을 사용하여 함수를 선언했느냐에 따라 호이스팅이 발생할 수도, 발생하지 않을 수 있다. 차이점을 알아보자.

 

 

// 함수 참조
console.dir(add); // f add(x, y) - 호이스팅 발생
console.dir(sub); // undefined
 
// 함수 호출
console.log(add(2, 5)); // 7 - 호이스팅 발생
console.log(sub(2, 5)); // TypeError: sub is not a function
 
// 함수 선언문
function add(x, y) {
    return x + y;
}
 
// 함수 표현식
var sub = function (x, y) {
    return x - y;
};

 

 

위의 예시 코드를 보면 '함수 선언문'으로 선언된 함수는 호이스팅이 발생하고, '함수 표현식'으로 선언된 함수는 호이스팅이 발생하지 않음을 볼 수 있다.

 

 

방식	호이스팅 발생
함수 선언식	0
함수 표현식	X

 

발생 이유

 

이러한 현상이 발생하는 이유는 변수 선언문과 함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행되어 식별자를 생성하고, var로 선언된 변수는 undefined로, 함수 선언문을 통해 암묵적으로 생성된 식별자는 함수 객체로 초기화된다. 그리하여 런타임 이전에 식별자에 바인딩되어 '선언문'으로 생성된 함수는 호이스팅이 발생한다.

 

반면에 '표현식'은 변수에 할당되는 값이 함수 리터럴인 문이다.

 

변수 할당문의 값은 할당문이 실행되는 시점, 즉 '런타임'에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다. 그래서 호이스팅이 발생하지 않는다.

 

요약

'함수 선언문'은 호이스팅 발생.

'함수 표현식'은 호이스팅 발생 안 함.