A Beginner’s Guide to Arrow Functions in JavaScript

In transitioning from Ruby to Vanilla Javascript, one of the most disorienting bits of syntax I encountered came in the form of arrow functions. The =>s peppering the JS files I initially encountered had no equivalent in Ruby, although they function similarly to Lambdas in other languages like Python.

The first thing to know is that arrow functions have not always existed in JS. They were added in 2015 as part of ES6, and while you may not always take advantage of them you should get used to seeing them — arrow functions have repeatedly surveyed as the most popular ES6 addition.

One of the strengths of arrow functions, their versatility, also explains why their meaning can be difficult to decipher initially. They appear in so many situations it can be hard to pinpoint a single bit of functionality. At its core, though, arrow functions are a succinct alternative to the standard function expressions you’re used to seeing.

function (x) {
  return x + 1;
}

This is how we are accustomed to seeing functions expressed in JavaScript. Arrow functions allow us to shorten this expression in several key ways.

x => x + 1;

The first thing you’ll notice is that we have removed ‘function’ from the expression. This is because the “fat arrow” => following our argument has the same effect of declaring a function. We no longer have a return because our return is implied in arrow functions. You’ll also see that we’ve ditched our curly braces — this is because this particular functions only has a single line of code making up its body. If it had multiple lines of code, we would have to keep our curly braces. Similarly, our lone argument has lost its parentheses but if we were passing in multiple arguments we would need those parentheses. The below example demonstrates these cases:

(x, y) => {
  x + 1;
  return x + y;
}

Note that if we must revert to using curly braces to accommodate a multi-line body, the return is no longer implicit. Let’s revisit our first example but this time with named functions to demonstrate one of the major strengths and weaknesses of arrow functions:

function sum (x) {
  return x + 1;
}
let sum = x => x + 1;

The big advantage that arrow functions have is they can shorten our code, sometimes to a single line. Because our code involves less typing it is also faster for us as programmers. This comes at a slight cost, though, as the traditional function above is arguably more expressive. The syntax of our arrow function makes it a little less obvious what is happening here.

Let’s look at some cases where arrow functions both shorten our code and make it easier to read. Fetch requests before arrow functions were a wordy, difficult-to-decipher affair. Take a look:

function getPuppies () {
  fetch(url)
  .then(function(res) {
    return res.json()
  })
  .then(function(puppies) {
    return puppies.forEach(function(puppy) {
      return puppy.age > 8
    })
  })
}

There are a lot of functions being declared, a lot of returns being made, and the end result is this dense block of code. Look at how arrow functions allow us to condense this code while having the added benefit of making it easier to decipher:

function getPuppies () {
  fetch(url)
  .then(res => res.json())
  .then(puppies => puppies.forEach(puppy => puppy.age > 8))

Notice how it cleans up our forEach method — this can be used on other commonly used methods like map and filter. Note that for reasons relating to the this keyword found in JavaScript, arrow functions are not compatible with methods like call, apply, and bind.

While there are some potential drawbacks in terms of readability for certain situations, arrow functions overall are an excellent tool that allow programmers to work faster and create more concise code. Even if you prefer traditional function expressions, you should still at the very least get comfortable seeing and reading arrow functions as they have become popular, powerful tools with programmers since their release.