함수 선언문 & 함수 표현식

함수 선언문 (function declaration)

함수 선언문은 함수의 정의부만 존재하고 별도의 할당 명령이 없습니다.

function a() { ... }
a();

함수 표현식 (function expression)

함수 표현식은 정의한 함수를 별도의 변수에 할당하는 것을 말합니다.

var b = function () { ... } // (익명) 함수 표현식
b();

var c = function d() { ... } // 기명 함수 표현식
c(); // 문제 없이 실행
d(); // 에러 (d is not defined)

기명 함수 표현식은 특이하게 함수 내부에서만 함수명(위 예시에서 d)을 호출할 수 있습니다. 물론 function을 할당한 변수(위 예시에선 c)도 함수 내부에서 호출 가능합니다. 그럼 기명 함수 표현식의 존재 이유는 무엇일까요?

과거에는 함수명을 호출했을 때 익명 함수 표현식은 undefined나 unnamed라는 값이 나왔었고 기명 함수 표현식은 함수명이 잘 출력되어 디버깅에 유리했었습니다. 하지만 이제는 모든 브라우저들이 익명 함수 표현식의 변수명을 함수의 name 프로퍼티에 할당하고 있기에 기명 함수 표현식을 사용할 이유가 없어졌습니다.

함수 선언문 vs 함수 표현식

2가지 방식의 가장 큰 차이점은 hoisting 과정 중에 발생합니다.

console.log(sum(1, 2)); // (1)

function sum(a, b) {
  return a + b;
}

console.log(multiply(3, 4)); // (2)

var multiply = function (a, b) {
  return a * b;
}

위 코드에서 호이스팅이 완료된 상태를 확인해보면 아래와 같습니다.

function sum(a, b) {
  return a + b;
}
var multiply;

console.log(sum(1, 2)); // (1)
console.log(multiply(3, 4)); // (2)

multiply = function (a, b) {
  return a * b;
}

함수 선언문으로 정의한 sum은 함수 전체를 끌어올리지만 함수 표현식으로 정의한 multiply는 변수 선언부만 끌어올립니다. 이 상태에서 코드를 차례대로 실행해보면 (1) 3, (2) multiply is not a function 이라는 로그가 출력됨을 확인할 수 있습니다.

즉, 함수 선언문은 함수 선언 시점에 관계없이 코드가 동작하지만 함수 표현식은 함수 선언 이후로 코드가 정상적으로 동작합니다.

이러한 특성 때문에 여러명의 개발자들이 실수로 동명의 함수를 선언했다고 했을 때, 함수 선언문으로 선언한 환경보다 함수 표현식으로 선언한 환경이 의도에 맞게 실행될 확률이 높으며 디버깅에 유리합니다.