함수의 표현 방법

함수를 작성하는 방법에는 크게 3가지가 있다.

1. 함수 선언식
2. 함수 표현식
3. 화살표 함수

사각형의 넓이를 반환하는 함수를 만들어보고 각각 다른 형태로 변환해보자.

함수 선언식

function getTriangleArea (base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

흔히들 사용하는 함수 선언 방식이다.
이를 함수 표현식으로 바꾸면 어떻게 될까?

함수 표현식

const getTriangleArea = function (base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea;
};

짠! function이 사용되는 부분에 함수명이 작성되지 않았다.
즉, 익명 함수 형태로 사용되고 있다는 것을 알 수 있다.

그렇다면 함수 선언식과 함수 표현식은 무슨 차이가 있는 걸까?

함수 선언식 vs 함수 표현식

두 함수의 차이를 알아보기 위해 이번에는 함수 표현식 부분을 대충 덧셈 연산으로 바꾸겠다.

// 함수 호출
getTriangleArea(3, 5);
plusFunc(1,2);

// 함수 선언식
function getTriangleArea (base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

// 함수 표현식
const plusFunc = function (one, two) {
  let sum = one + two;
  return sum;
};

과연 호출 결과는 어떻게 될까?

// 함수 호출
getTriangleArea(3, 5);  // 정상 작동
plusFunc(1,2);  // 에러!!!!!

엥? 왜지? 함수를 작성하면 어디서든 사용할 수 있는거 아니었나?

아니다.
이게 함수 선언식과 함수 표현식의 큰 차이이다.
사용 가능한 범위가 다르다!

함수 선언식 : 어디서든 호출이 가능
함수 표현식 : 함수를 생성(초기화) 한 코드 아래에서만 호출 가능

JS에서 함수 선언식으로 선언된 함수는 사용 가능 범위가 해당 파일에 가장 위로 올라가는데,
이 부분은 JS에서 호이스팅(hoisting)이라고 한다.

그러나, 함수 표현식으로 선언된 함수는 호이스팅이 적용되지 않는다.

따라서, 함수 선언식은 제대로 작동하고, 함수 표현식은 작동하지 않았던 것이다.

함수 호출을 에러 없이 작동시키고 싶다면 아래와 같이 수정해야할 것이다.

// 함수 선언식 함수 호출
getTriangleArea(3, 5);

// 함수 선언식
function getTriangleArea (base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

// 함수 표현식
const plusFunc = function (one, two) {
  let sum = one + two;
  return sum;
};

// 함수 표현식 함수 호출
plusFunc(1,2);

추가적으로, 아주 미세한 차이지만

함수 선언식은 세미 콜론(;)이 없고, 함수 표현식은 세미 콜론(;)이 붙는 것도 차이점이다.

화살표 함수

const getTriangleArea = (base, height) => {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

화살표 함수 또한 익명 함수의 형태를 가진다.
즉, 함수 표현식을 작성하는 또 다른 방법인 것이다.
따라서 호이스팅이 되지 않는다는 것에 주의하자!

참고 자료

RyanSin님 블로그
imacoolgirlyo님 블로그
bigbrothershin님 블로그
코드 스테이츠 강의 자료