JS 함수 선언문과 함수 표현식 차이

함수 선언문과 함수 표현식이 무엇인지 알아봅시다.

함수를 만든다는 목적은 동일 하나 만드는 방법이 다릅니다.

 

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

// 함수 표현식
const sum = function(a,b) {
    return a+b;
}

 

함수 자체를 선언하면 함수 선언문, 선언한 함수를 변수에 담아서 사용하면 함수 표현식이라 합니다.

이 둘은 호이스팅 방식에서 차이가 납니다.

 

add(1, 3); // 함수 선언보다 위에 있지만 오류가 나지 않습니다.
function add(a, b) { // 함수 선언문
    return a+b;
}

console.log(sum(1,2)); // 에러.
// ReferenceError Cannot access 'sum' before initialization
// 변수 선언만 호이스팅 되기에 할당되지 않았다는 오류가 뜹니다.
// const sum; <- 이 정보만 올라감. 때문에 함수 표현식 아래에 사용해야 합니다.

const sum = function(a,b) { // 함수 표현식
    return a+b;
}

 

위에서 알 수 있듯이

함수 선언문은 어디서든 호출하여 사용할 수 있습니다.

함수 표현식은 함수를 초기화(생성) 하고 사용할 수 있습니다.

 

화살표 함수 역시 함수 표현식과 마찬가지로 함수를 초기화 후 사용할 수 있습니다.