Getting Started with ES6 Arrow Functions in JavaScript

Introduction

With ES6, there were many updates to the JavaScript, including the spread operator, object destructuring, new type of variables, and more. One of the most notable changes were arrow functions, a new and concise way to write functions. With arrow functions, you can define a readable and concise function in one line. In this article, we will walk through the basics of arrow functions and discuss their benefits.

Functions in ES5

Let’s start by looking at how we defined functions with ES5 JavaScript. To define a function, it required the function keyword. For example, if we wanted to define a function that would multiply a number by two, it would look something like this.

function multiplyByTwo(num){
    return num * 2;
}

We could also define the function and assign it to a variable if we wanted to.

const multiplyByTwo = function(num){
    return num * 2;
}

Regardless of which way you did it, the keyword function had to be included.

Your First ES6 Arrow Function

To create an arrow function, you don’t need the keyword function. In fact, you basically remove that keyword and add an arrow right after the parameters but before the open curly bracket. It would look like this:

const multiplyByTwo = (num) => {
    return num * 2;
}

At this point, it doesn’t look substantially different than the old way to do it, but we can make a few enhancements.

Removing Unnecessary Parenthesis

The parenthesis around the parameters are required if there are no parameters or more than one parameter. However, when your arrow function only has one parameter, you can leave out the parenthesis to simplify it, like so:

const multiplyByTwo = num => {
    return num * 2;
}

Implicit Return

Often times, we write functions that return after just one line of code. With the old way of writing functions, the number of lines in the function didn’t affect how you defined the function. With arrow functions, it can.

If the only thing you want to do in a function is a one-line return, you can use implicit return to simplify your function. While using implicit return, you don’t need the curly braces or the return keyword. It would look like this:

const multiplyByTwo = num => num * 2;

You can still use the implicit return syntax even if you don’t necessarily need to return anything. In other words, if the callers of your function are not expecting it to return anything, then having it return something doesn’t matter.

For example, if you wanted to print something to the console, you could use implicit return to shorten the length of the function:

const printName = (first, last) => console.log(`${first} ${last}`);

Using Arrow Functions in Map and Filter

One of the most common places you’ll see arrow functions used are with JavaScript Array methods like map, reduce, filter, etc. By using arrow functions with these methods, you can make complete array transformations in one line.

Let’s look at two examples, one with map and one with filter. For the map version, let’s say we want to convert an array by multiplying each number by two. It would look something like this:

const twodArray = [1,2,3,4].map( num => num * 2);

Notice with this arrow function, you left off the parenthesis (because there’s only one parameter) and used implicit return. This kept the entire transformation to one line.

Now, let’s do another with filter. Let’s say we want to filter all numbers that are not even. We would have this:

const filteredArray = [1,2,3,4].filter( num => num % 2 == 0);

Again, no parenthesis and implicit return.

‘this’ Binding with Arrow Functions

Let’s start with an example using an ES5 function definition inside of a person object:

const person = {
    first: "James",
    last: "Quick",
    getName: function() {
        this.first + " " + this.last
    }
}

In this case, we created a person object with a first and last name as well as a getName() function that returns the full name of the person. Inside of the function, we are trying to reference the first and last properties by calling this.first and this.last.

The reason we are able to access those properties through the this keyword is that when those functions are defined inside of an object, it is automatically bound to the object itself. Therefore, with ES5 functions, we can still reference the object properties by using this.

However, when you use arrow functions, things change a bit. Arrow functions don’t do any binding for the keyword this. Therefore, if we were to change the function definition to be an arrow function, things wouldn’t work.

const person = {
    first: "James",
    last: "Quick",
    getName: () => {
        return this.first + " " + this.last
    }
}

In this case, undefined would be printed for both the first and last property, since the keyword this is not bound to the person object and doesn’t have a first and last variable to refer to.

Conclusion

Arrow functions are one of many new features of ES6 JavaScript. You will see them used more and more in examples and documentation, so it’s worth learning how they work. They can also significantly improve the conciseness and readability of your code.