When do you use `function` keyword and when do you use arrow functions?

[pbnj]

I've noticed a pattern in your projects (especially *-cli projects) where you declare functions using the function keyword, but when you're mapping over an array or finding something, you always use arrow functions.

For example, In your pageres-cli project, you declare function generate() here, but then use arrow functions here and throughout your promises.

I'm wondering if this is a conscious decision for some reason? _{...crossing my fingers that there would be something insightfully new to learn that I didn't know before...}

[legodude17]

I would say you use arrow functions were you would use short anonymous functions, and function keywords where you want longer named functions.

[pbnj]

But, why not do something like this:

const myLongerNamedFunction = () => {
  // do something
};

I understand that functions declared with function keyword are hoisted during execution, so these functions can be used/called before they're declared.

But is that the only reason to define functions with function keyword?

I initially thought Sindre used function keywords over arrow functions for backward compatibility with older node versions and for compatibility with browsers (e.g. Safari) without having a need to transpile, but that can't be it because Sindre still uses arrow functions in .map and .find ...etc.

[legodude17]

Sindre targets node > 4, which supports arrow functions. In my personal opinion, const generate = () => { /* Many lines of code */ } is less clear than function generate() { /* many lines of code /* }.

[v-braun]

It make the difference between constants and functions more clean, I would suggest to use the function keyword,

• Arrow style if you need a anonymouse function (you don't need a name for a map callback).
• Function style if you declare a function

But curious about Sindre's answer on this question. :)

[pbnj]

I definitely understand the argument that declaring functions with function is cleaner. And there are also times when you absolutely must declare functions with function keyword, (this is different in arrow functions and function functions when you assign a function to a variable).

I think we're all curious about what Sindre's opinion/logic is on this.

[jorgegonzalez]

Bump

[styfle]

There were already options before ES6 Arrow Functions. See this SO Question.

[jorgegonzalez]

@styfle I'm just curious about Sindre's uses, as he often mixes named function declarations, function sum(a, b) { ... }, with named arrow function expressions, const sum = (a, b) => { ... };.

[pbnj]

@styfle - thank you for sharing that SO question. I am familiar with the difference between a function expression and a function declaration.

My original question was not to understand the technical difference between function expressions and function declarations, but was more an attempt at trying to understand Sindre's logic and thought-process when deciding to write new functions.

• Is it just that top-level functions are written as declarations while nested functions are written as expressions?
• Or is it that simple, one-liner functions are created as expressions while longer functions are created as declarations?
• What is the logic that goes into deciding which one to use? Some JS devs advocate for arrow function expressions all the time, while some advocate for mixed uses depending on use-case. If Sindre uses mixed styles, what are his use-cases for when to use which style?

Hope this helps clarify the intent of my original question.