Top-level에서 function declaration vs function expression

Question

안녕하세요.
javascript를 사용하면서, Top-level function을 선언하는 방식에 대해서 질문드립니다.

저는 Vue3를 이용해서 개발을 하고 있는데, 
vue 파일의 script단을 포함해서 플러그인으로 만드는 ts, js 파일에서도 함수 표현식을 이용해서 함수를 정의해왔습니다.

근데 제가 되게 자주 살펴보는 Anthony Fu라는 분의 eslint-config에서 최근에 Top-level function을 전부 함수 선언식으로 변환하게끔 적용하셨더라구요.

아마 제가 이 코딩스타일을 적용하게되면, 지금까지 모든 함수를 함수 표현식으로 정의 해왔는데, 전부 함수 선언의 형태로 바뀌게 될 것 같아요.

물론 함수 선언형태로 함수를 정의하면 호이스팅과 같은 부분에서 이점이 있긴 할텐데, 그 외의 이점이 크게 와닿지 않고 있습니다. auto import를 위한 global imports를 만드는데 있어서 함수 선언방식으로 정의되는게 tracking하는데 좀 더 편한가(?)라는 추측만 하고 있습니다.

앞에 서론이 길었는데,
top-level에서 function declaration이 가지는 명확한 이점이 있을지?”가 궁금해서 질문 글을 올리게 되었습니다.

여러분들은 Top-level function을 어떤 식으로 정의하시나요? 의견 주시면 감사하겠습니다.

손정현 · Answer

안녕하세요!

저도 깊게 생각해본적은 없긴하지만, 함수 선언식을 많이 썼던 것 같습니다. 호이스팅 이외에도 function name 유무 차이가 있을 것 같아요. 특정 디버거에서는 함수 표현식을 많이 쓴다면 function name이 안뜰수도 있을 것 같다는 생각이 살짝 스치네요 :)
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function#description

커리어리 AI 봇 · Answer

Top-level에서 함수 선언식과 함수 표현식 사이에는 몇 가지 차이점이 있습니다. 어떤 방식을 선택할지는 개인 취향, 프로젝트 요구 사항, 팀의 코딩 스타일 가이드에 따라 결정됩니다.

함수 선언식(function declaration)의 장점:

1. 호이스팅: 함수 선언식은 스크립트가 실행되기 전에 메모리에 할당되므로, 함수 선언 전에 함수를 호출할 수 있습니다. 이는 코드의 가독성과 구조를 개선할 수 있습니다.
2. 명확성: 함수 선언식은 일반적으로 함수의 이름이 있어서 코드의 가독성이 높아집니다.
3. 빠른 실행: 함수 선언식은 컴파일 단계에서 처리되므로 실행 시간이 빠를 수 있습니다.

함수 표현식(function expression)의 장점:

1. 익명 함수 사용: 함수 표현식을 사용하면 익명 함수를 쉽게 사용할 수 있습니다. 익명 함수는 일회성 작업에 유용할 수 있습니다.
2. 변수 범위: 함수 표현식은 함수를 변수에 할당하므로, 변수의 범위에 따라 함수의 범위를 제한할 수 있습니다.
3. 조건부 함수 생성: 함수 표현식을 사용하면 조건에 따라 서로 다른 함수를 생성할 수 있습니다.

간단한 요약:
- 함수 선언식: 호이스팅, 명확성 및 빠른 실행을 원할 경우 사용
- 함수 표현식: 익명 함수 사용, 변수 범위 및 조건부 함수 생성을 원할 경우 사용

결국 어떤 방식을 사용할지는 개발 스타일, 프로젝트 요구 사항 및 팀의 코딩 가이드에 따라 결정하게 됩니다. Anthony Fu가 사용한 함수 선언식 방식은 호이스팅 등의 이점 때문에 선택된 것으로 보이며, 이러한 이점이 프로젝트에 도움이 되면 그 방식을 따라가는 것이 좋습니다. 하지만 프로젝트의 요구 사항과 개인의 코딩 스타일에 따라 함수 표현식을 계속 사용하는 것도 좋은 선택일 수 있습니다