함수 호이스팅(function hoisting)

<script>
console.log(add(2, 4)); // 7
console.log(sub(2, 4)); // TypeError: sub is not a function

// 함수 선언문
function add(x, y) {
	return x + y;
}

// 함수 표현식
var sub = function(x, y) {
	return x - y;
}
</script>

위의 예시처럼 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출이 가능하다. 하지만 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출이 불가능하다. 이는 함수 선언문과 함수 표현식의 생성 시점이 다르기 때문이다.

모든 선언문이 그렇듯 함수 선언문도 결국 코드의 맨위로 끌어 올려진 것처럼 동작한다. 이것을 함수 호이스팅(function hoisting) 이라고 한다.

하지만 함수 표현식은 변수에 할당되는 값이 함수 리터럴인 문이다. 변수 선언은 런타임 이전에 먼저 undefined로 초기화 되고 값이 있다면 런타임에 할당이 된다. 즉, 함수 표현식으로 함수를 정의하게되면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생하게 된다.

이러한 차이점을 주의하도록 하자.