함수 표현 방식 : function declaration(함수선언) function expression (함수표현식)

자바스크립트에서 함수를 표현하는 방식은 두가지가 있다.

function declaration(함수선언)

함수선언식의 예시는 아래와 같다.

function calcAge1(birthYear){
    return 2037 - birthYear;
}

const age1 = calcAge1(1991);
console.log(age1);

함수 선언식과 함수 표현식의 가장 큰 차이는 함수 선언식의 함수 코드를 쓰기 전에 함수를 불러도 사용할 수 있다는 것이다. 예를 들어 아래와 같이 말이다.

const age1 = calcAge1(1991);

function calcAge1(birthYear) {
  return 2037 - birthYear;
}

이렇게 함수 선언 전에 호출이 가능한 것을 호이스팅(hoisting)이라고 한다. 즉, 함수 선언식은 호이스팅이 가능하다.

function expression (함수 표현식)

다음으로 함수 표현식의 예시를 보자

const calcAge2 = function (birthYear) {
    return 2037 - birthYear;
}
const age2 = calcAge2(1991);

console.log(age1, age2)

함수 표현식에서는 함수의 이름을 써주지 않고 바로 매개변수(parameter)를 써준다. 그리고 함수 전체를 변수에 할당한다.

function (birthYear) {
    return 2037 - birthYear;
}

위의 코드 부분이 표현식(expression)이다. 표현식은 값을 생성하므로 변수에 이렇게 넣을 수 있는 것이다. 함수는 타입의 한 종류가 아니라 값인 것이다. 함수표현식은 함수선언식처럼 호이스팅이 되지 않는다. 즉, 아래의 코드처럼 쓰면 실행되지 않는다.

const age2 = calcAge2(1991);

const calcAge2 = function (birthYear) {
    return 2037 - birthYear;
}

아래는 언제 함수선언식을 쓰고 언제 함수표현식을 쓰면 좋을지에 대해 검색해본 결과이다.

In short, use function declarations when you want to create a function on the global scope and make it available throughout your code. Use function expressions to limit where the function is available, keep your global scope light, and maintain clean syntax.

출처