함수 생성시점과 함수 호이스팅

자바스크립트에서 호이스팅이란 

JavaScript 호이스팅 은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다.

 

기본적으로 변수를 저장하는 var, let, const는 호이스팅이 기본적으로 undefined이며 함수는 간단하게 설명하자면 객체 그대로 호이스팅이 됩니다.

함수를 정의하는 대표적인 두가지 방법을 보시면

function add01(x, y){
    return x + y;
}

var add02 = function(x, y){
    return x + y;
}

 

위의 함수는 함수 선언문이며, 아래 함수는 함수 표현식이라고 볼 수 있습니다.

 

두가지 함수의 차이점이라고 한다면 호이스팅에 따른 생성 시점의 차이입니다.

만약 두 함수 코드 위에 console.dir을 확인해 본다면 어떤 결과가 나올까요?

console.dir(add01); // [Function: add01]
console.dir(add02); // undefined

function add01(x, y){
    return x + y;
}

var add02 = function(x, y){
    return x + y;
}

함수 선언문은 function으로 나오지만 함수 표현식에서는 undefined로 찍히는걸 확인하실수 잇을겁니다.

그렇다면 마찬가지로 함수 생성 위에 console.log를 사용해서 호출을 한다면 어떤 결과가 나올까요?

console.log(add01(2,3)); // 5
console.log(add02(2,3)); // TypeError: add02 is not a function

function add01(x, y){
    return x + y;
}

var add02 = function(x, y){
    return x + y;
}

함수 선언문에서는 정상적으로 5가 출력이 되지만 함수 표현식에서는 add02는 함수가 아니라고 에러가 발생합니다.

---

위의 간단한 코드만으로 함수 선언문과 함수 표현식의 호이스팅이 어떻게 다른지 쉽게 이해할 수 있습니다.

add01는 호이스팅이 되면서 함수(객체) 그대로 런타임 이전에 생성이 되지만

add02는 호이스팅이 되면 함수이기 이전에 var변수로 보면서 런타임 이전에는 undefinde로 취급이 되며 실제 함수내용이 대입 되기 전까진 함수가 아닌것으로 볼 수 있습니다.