[TIL] JavaScript의 함수 표현식과 선언식

함수를 만들때 아래와 같이 2가지의 형식으로 코드를 작성할 수 있다.

1. 함수 선언식(Function Declarations)

function addOne(num) {
  return num + 1;
}

2. 함수 표현식(Function Experssions)

let addOne = function(num) {
  return num + 1;
}

3. 차이점

위 두 형식으로 만들어진 함수의 가장 큰 차이점은 호이스팅 영향을 받는지 유무이다. 아래와 같이 함수 선언식은 함수를 선언하기 이전에 함수를 실행해도 정상적인 값이 반환된다.

addOne(1);
function addOne(num) {
  return num + 1;
}
// 2 <-- 실행 결과

반면에 함수 표현식으로 함수를 만들게 되면 정상 작동하지 않는다.

addOne(1);
let addOne = function(num) {
  return num + 1;
}
// Uncaught ReferenceError <-- 실행 결과

차이는 함수가 언제 호출되는지 즉 호이스팅으로 인한 것이다. 함수 선언문은 정의되기 전(실행흐름과 상관없이)에도 호출된다. 따라서 스크립트 어디에 있는지에 상관없이 어디서든 해당 함수를 사용할 수 있다. 반면에 함수 표현문은 실행흐름에 따라 먼저 함수가 정의 되어야지만 해당 함수 사용이 가능하다.

이는 스크립트 작동원리로 인한 것인데, 자바스크립트는 실행하기 전, 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성한다. 따라서 함수 선언문으로 만들어진 함수는 어느 위치에서든 사용이 가능하다.