JavaScript Arrow Functions: How, Why, When (and WHEN NOT) to Use Them

One of the most heralded features in modern JavaScript is the introduction of arrow functions, sometimes called ‘fat arrow’ functions, utilizing the new token =>.

These functions two major benefits — a very clean concise syntax and more intuitive scoping and this binding.

Those benefits have sometimes led to arrow functions being strictly preferred over other forms of function declaration.

For example — the popular airbnb eslint configuration enforces the use of JavaScript arrow functions any time you are creating an anonymous function.

However, like anything in engineering, arrow functions come with positives and negatives. There are tradeoffs to their use.

Learning those tradeoffs is key to using arrow functions well.

In this article we’ll first review how arrow functions work, then dig into examples of where arrow functions improve our code, and finally dig into a number of examples where arrow functions are not a good idea.

So What Are JavaScript Arrow Functions Anyway?

JavaScript arrow functions are roughly the equivalent of lambda functions in python or blocks in Ruby.

These are anonymous functions with their own special syntax that accept a fixed number of arguments, and operate in the context of their enclosing scope — ie the function or other code where they are defined.

Let’s break down each of these pieces in turn.

Arrow Function Syntax

Arrow functions have a single overarching structure, and then an number of ways they can be simplified in special cases.

The core structure looks like this:

(argument1, argument2, ... argumentN) => {
   // function body 
}

A list of arguments within parenthesis, followed by a ‘fat arrow’ (=>), followed by a function body.

This is very similar to traditional functions, we just leave off the function keyword and add a fat arrow after the arguments.