Introduction

In this tutorial, we will take a look at how to use Arrow functions in JavaScript, which is also known as Fat Arrows. Arrow function was introduced in JavaScript ES6. Using this new syntax, we can write simpler and cleaner functions compared to the old version, which helps improve the readability of the code.

Arrow functions use the => symbol to define functions, which looks like a “fat arrow”. It also allows lexical scoping inside the function which makes things simpler and minimizes some of the overwhelming hacks that we had to do before ES6.

Arrow Function Syntax

The new ES6 arrow function replaces the function keyword with the new fat arrow token “=>”.

To put it into perspective, here’s an example of a generalized syntax for an old JavaScript function:

function f(arg1, arg2) {
    // return something
}

Here is the new syntax to rewrite the same function with Arrow Functions,

let f = (arg1, arg2) => {
    // return something
}

Example of Arrow Function

Let’s see a real-world implementation for better clarification. Consider a function that will return the square root of a given number. Before Arrow Functions, if we wanted to create a function to do that, we had to do the following:

function getSqrt(i) {
    return i * i;
}

However, with arrow functions, here’s how we can rewrite the same function:

let gerSqrt = (i) => {
    return i * i;
}

As you can see in this example, the syntax is already cleaner and simpler compared to the old JavaScript syntax. To make it more simpler, we can remove the parenthesis around the parameter because the function takes exactly one parameter as shown below:

let gerSqrt = i => {
    return i * i;
}

Note that this can be done only if the function takes exactly one parameter.

Looking great. However, we can take this further. If there is a single statement in the function body, we can remove both curly braces and the return keyword from the function to make this code even simpler and clean:

let gerSqrt = i => i * i;

As you can see, with ES6, we have managed to reduce the code from multiple lines to a single line.

Creating Anonymous Functions

An anonymous function is a function that does not have a name. In JavaScript, we usually use these kinds of functions as callbacks or handlers. Let’s see an example of using an arrow function as an anonymous function.

Here’s the old way of doing implementing anonymous functions:

setTimeout(function () {
    console.log("I will be executed after 1 second");
}, 1000);

Here is how simpler it is to rewrite the same thing with arrow functions:

setTimeout(() => console.log("I will be executed after 1 second"), 1000);

The Scope of an Arrow Function

Before ES6, functions had their own scope. For instance, we had to create a new reference to the this variable as shown in the following example:

function User(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

    // reference to `this` in member functions
    var that = this;
    
    this.getFullName = function () {
        return that.firstName + ' ' + that.lastName;
    };
}

var user = new User('John', 'Doe');
console.log(user.getFullName());

As you can see, we had to create a reference variable pointing this in order to access its properties within a function block.

With Arrow functions, things are much easier now as we don’t need to create a reference to the this variable. Therefore, we can re-write the above piece of code in the following way:

function User(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    
    this.getFullName = () => {
        return this.firstName + ' ' + this.lastName;
    };
}

Note: JavaScript classes were also introduced with the ES6 version, so you don’t need a function to create object-oriented style classes. In this article, we did that to avoid using ES6 syntax more than necessary.