[JavaScript 33가지 개념] 07. 함수 표현식(expression) vs 함수 선언문(declaration)

자바스크립트에서 함수를 만드는 방법은 대표적으로 두가지가 있다.

 

1. 함수 표현식(expression)

함수 표현식을 사용하는 방법은 다음과 같다.

const [이름] = function (param1, param2, ...param3) { 
    // 함수 본문 및 로직 
}

 

2. 함수 선언문(declaration)

함수 선언문을 사용하는 방법은 다음과 같다.

function [이름] (param1, param2, ...param3) { 
    // 함수 본문 및 로직 
}

 

3. 함수 표현식 vs 함수 선언문

• 함수 선언문은 호이스팅되지만 함수 표현식은 호이스팅되지 않습니다. 
  즉, 정의되기 전에 함수 선언을 호출할 수 있지만 함수 식으로는 이 작업을 수행할 수 없다.
• 함수 표현식을 사용하면 함수를 정의한 직후 함수를 사용할 수 있다. 
  함수 선언문을 사용하면 전체 스크립트가 구문 분석될 때까지 기다려야 한다.
• 함수 표현식은 다른 함수의 인수로 사용할 수 있지만 함수 선언은 사용할 수 없다.
• 함수 표현식은 익명일 수 있지만 함수 선언은 익명일 수 없다.

 

4. 각 표현의 장점

• 함수 표현식의 장점
  • 함수 선언보다 더 유연하다.
    함수 표현식을 생성하고 이를 다른 변수에 할당할 수 있으므로 다른 위치에서 동일한 함수를 사용해야 할 때 유용할 수 있다.
  • 함수 표현식은 호이스팅되지 않으므로 코드에 정의되기 전에는 사용할 수 없다. 
    이는 함수가 정의된 후에만 사용되도록 하려는 경우에 유용하다.
• 함수 선언문의 장점
  • 코드를 더 읽기 쉽게 만들 수 있다. 
    긴 함수가 있는 경우 이름을 지정하면 수행 중인 작업을 추적하는 데 도움이 될 수 있다.
  • 함수 선언은 호이스팅된다.
    즉, 코드에 정의되기 전에 사용할 수 있다. 
    함수가 정의되기 전에 사용해야 하는 경우 도움이 됩니다.

 

5. 결론

일반적으로는 함수 표현식으로 사용해야 좋다.

그 이유는 호이스팅 기능이 대부분의 상황에서는 단점이 크다.

호이스팅을 이용해서 선언을 하게 되면 코드에서 함수 선언 위치가 뒤죽박죽이 될 수 있고, 때로는 동일한 함수명을 사용하면서 사전에 방지하지 못 해 충돌이 날 수 있다.

 

그리고 현재 대부분 ECMAScript 2015 이후 버전을 기준으로 개발을 하기 때문에 Arrow Function을 많이 사용하고 있다.

const [이름] = (param1, param2, ...param3) => { 
    // 함수 본문 및 로직 
}

 

결론적으로 대부분의 경우 함수 표현식이 보다 직관적이며, Arrow Fuction을 사용하는 걸 권장한다.

이는 필수적인 부분은 아니지만 혼자 개발하는게 아니라면 따라주는 것이 좋다.

 

 

참고 자료

- https://www.sitepoint.com/when-to-use-a-function-expression-vs-function-declaration/

When to Use a Function Expression vs. Function Declaration — SitePoint