12-1 함수 생성 시점과 함수 호이스팅

출처 모던 자바스크립트 Deep Dive을 보고 정리한 내용입니다.

앞서 포스팅 했던 변수의 호이스팅에 대해서 기억할 것이다. 런타임 이전에 변수의 선언이 선두로 끌어올려진것 처럼 동작하는 것이 변수의 호이스팅이다. 다음은 함수의 호이스팅에 관한 코드이다.

console.dir(add); //f add(num1, num2)
console.dir(sub) //undefined

console.log(add(1, 2)) //3
console.log(sub(1, 2)) //TypeError

function add(num1, num2) {
	return num1 + num2;
}

var sub = function(num1, num2) {
	return num1 - num2;
};

add함수는 함수 선언문으로 sub함수는 함수 표현식으로 정의했다는 차이점이 있다. 그러나 왜 다른 결과를 보이는 걸까?

이는 함수의 생성 시점이 다르기 때문이다. 함수가 선언되면 변수의 선언과 마찬가지로 런타임 이전에 먼저 실행된다. 자바스크립트 엔진은 선언문으로 실행된 함수를 식별자를 만들고 함수객체까지 할당하는 작업을 진행한다. 그러나 var키워드로 선언된 sub은 undefined로 초기화된다.
즉, 함수 표현식으로 함수를 정의하면 함수 호이스팅이 아닌 변수 호이스팅이 발생한다.

함수 호이스팅은 함수 호출 전에 반드시 함수를 선언해야한다는 규칙을 무시하기 때문에 함수 선언문보다 함수 표현식으로 함수를 정의할 것을 권장한다.