Arrow Functions => What's wrong with the regular ones?

If your expanding you're knowledge of JavaScript and wondering why they would ever add Arrow Functions in ECMAScript 2015 (ES6), you are not alone. As I built on my knowledge of the language and its intricacies and quirks, I found myself wondering the same thing. In this post, I will lay out the differences, benefits and reasons why it was added and when you should use it.

Let's talk differences

Before arrow functions were introduced, functions had to be declared in the traditional format as below:

function add(x, y) {

  return x + y;

}

or declared as an expression:

const addFunction = function add(x, y) {

  return x + y;

}

with the introduction of arrow functions, this can be written as:

const addFunction = (x,y) => x + y

Concise Syntax

From the example above, we can easily see that by using an arrow function and leveraging its implicit return feature, the function can be quickly refactored to a single line. The resulting code is more concise, cleaner, and easier to read, resulting in smoother development and faster debugging.

Hoisting

The JavaScript runtime by default will hoist all functions and variable declarations to the top of their scope upon the creation of the Execution Context. For example, within the global scope this ensures that all functions and variables declared will be available to all functions that are later called. However, arrow functions are never hoisted, thereby allowing greater control over the precise location of where a function is executed and the variables that it has access to.

Context

Every time a JavaScript function is executed, it creates an Execution Context which includes information about the environment in which the function is running, including the value of this. While a traditional function gets executed in its own context, a arrow function will always inherit the context of the function which called it.

Using the code below:

class Person {

    constructor(){

        this.name = "George";

        this.greetings = ["Good Morning,","Hello!","Howdy!"];

    }



    printGreetings(){

        this.greetings.forEach(function print(greet){

            console.log(`${greet} ${this.name}`);

        });

    }

}



let person = new Person();

person.printGreetings();

we would get an error saying: Cannot read property 'forEach' of undefined, this is because although the printGreetings function is within the context of the Person class and inherits it's context, nonetheless the forEach function (even though its a built-in JavaScript function) runs in its own context which doesn't contain the this.name property, therefore resulting in a lookup error.


However, an arrow function will never run in its own context, and by rewriting the function above using an arrow function...

printGreetings(){

    this.greetings.forEach((greet) => {

        console.log(`${greet} ${this.name}`);

    });

}

the result will be as expected

Good Morning, George

Hello! George

Howdy! George

Summary

To summarize the benefits of arrow functions; they allow shorter and more concise code; offers implicit return of function block code; doesn't hoist to the top of Execution Context and maintains it's exact location in code; finally, they inherit the context of the function that called it without executing it's own context, allowing a more predictable use of this keyword.

Hopefully this post helped you better understand the differences and benefits of traditional functions verses arrow function, and got you one step further in your JavaScript journey!

Further reading: