Let's be friends

Introduction

OK. So, it seems as of 2022 or so – the MDN and other documentation is favoring arrow functions for their default examples. We think this is dumb. But what do you think? We’d better talk about it!

Also, it’s not just a syntax choice. The two types of functions do slightly different things in some circumstances.

Function syntax differences

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Arrow functions syntax variations

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Since there are so many options… we think we should just PICK ONE and stick with it.

So, our recommendation is to always use parentheses. Then it’s always the same.

Should you use them?

Arrow functions are mostly convenient in callbacks because they’re shorter to write, especially for simple, inline logic. But beyond conciseness, they don’t offer any functional advantage. In fact, relying on them too much can hurt readability, especially when callbacks grow beyond one-liners. Additionally, using arrow functions purely for brevity can make you second-guess whether there’s a need for this context, introducing unnecessary cognitive load. Furthermore, using arrow functions as function expressions can make debugging harder, as they appear as anonymous functions in stack traces, making it more difficult to track down issues.

We prefer the function keyword. If it’s an arrow function, we’re going to assume there’s a good reason.

To discus…

  1. Use function declarations (default) for simple, reusable logic.
  2. Use arrow functions for callbacks and one-liners, but avoid them in methods where this is needed.
  3. Use function expressions inside objects or modules for better scoping and organization.
  4. Use named function expressions sparingly—when stack traces or recursion are important.
  5. Use IIFEs to run logic immediately and isolate scope.
  6. Use HOFs to create reusable function factories.
  7. Use generators for iterative logic or async workflows.
Let's be friends