[20210717] 함수 호이스팅

함수 호이스팅에 대해 알아보자.

호이스팅이란?

선언과 할당의 시기 차이로 인해 발생하는 현상이다. 이는 주로 var로 변수를 선언할 때, 함수 표현식을 사용할 때 발생한다.

함수 선언 방법에 따른 차이

함수의 선언 방법에는 여러가지가 있지만, 함수 선언문과 함수 선언식의 차이를 살펴보자.

// 함수 참조
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;
};

함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출하더라도 올바르게 동작한다. 하지만, 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.

이는 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문이다.

함수 호이스팅

함수 선언문은 런타임 이전에 함수 객체가 먼저 생성된다. 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당한다. 이를 함수 호이스팅이라고 한다.

함수 표현식은 변수 호이스팅이 발생한다. sub가 참조 에러가 아닌 undefined로 출력되는 것을 위의 예시에서 볼 수 있다. 이는 var sub 이 런타임 전에 변수 선언만 이루어지고 할당이 이루어지지 않았음을 알 수 있다. 그렇기 때문에 함수 표현식으로 함수를 정의하고 사용하기 위해서는 사용하기 전에 함수를 할당 해주어야 한다.

---

참고

‘이웅모 지음, 모던 자바스크립트 Deep Dive’

• javascript