자바스크립트에서는 함수를 선언하는 방법이 한 가지가 아니다.

각각의 방법에 따라 생성된 함수는 모두 같지만 동작하는 방식이 조금씩 차이가 난다.

 

1. 함수 선언문 (Function statement)

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

 

2. 함수 표현식 (Function expression)

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

 

* 주의: 함수 표현식으로 함수를 만들 때에는 반드시 뒤에 세미콜론(;)을 사용해야한다.

var add = function (x, y) {
    return x + y;
}
(function (){
    console.log('hello')
})();

위처럼 add 함수를 선언한다음 세미콜론을 사용하지 않았는데 바로 밑에 즉시 실행 함수가 있다면 자바스크립트 파서가 혼동하여 Type Error를 내뿜는다.

 

3. 함수 생성자 (잘 사용되지 않음)

var add = new Function('x', 'y', 'return x + y');

 

4. 함수 호이스팅 (Function hoisting)

 

    4-1. 함수 선언문 방식과 함수 호이스팅

console.log(add(1, 2))

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

위의 코드는 add 함수를 호출하는 시점에 아직 add 함수가 선언되지 않았음에도 콘솔에 3을 출력한다.

이처럼 함수 선언문 형태로 정의한 함수의 유효범위는 코드의 맨 위부터 시작된다. (함수 호이스팅)

 

    4-2. 함수 표현식 방식과 함수 호이스팅

console.log(add(1, 2))

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

위의 코드는 함수 표현식 형태로 선언하였기 때문에 함수 호이스팅이 일어나지 않는다.

실행해보면 Uncaught TypeError: add is not a function 에러가 난다.

 

함수 호이스팅은 '함수를 사용하기 전에 반드시 선언해야 한다'는 규칙을 위배하므로 코드의 구조를 엉성하게 만들 수 있다며, 함수 표현식만을 사용할 것을 권고하고 있다.