Why did JS Introduce Arrow Functions?

Why did JavaScript introduce arrow function expressions? Why did it change in the way it is? What is the advantage compared to the old way?

JavaScript developers introduced arrow function expressions in order to provide a more concise and expressive syntax for defining functions. Arrow functions do not have their own "this" value, but instead inherit the "this" value of the surrounding context. This allows developers to avoid issues with the "this" keyword and to write more concise code.

There are several benefits to using arrow functions compared to the traditional function syntax. One benefit is that they are more concise and easier to read, as they do not require the "function" keyword or curly braces. This can make code more readable and easier to understand, especially when working with complex functions.

Another benefit of arrow functions is that they can help to avoid issues with the "this" keyword. In traditional function syntax, the "this" keyword can be difficult to understand and can lead to issues with binding and context. With arrow functions, the "this" value is inherited from the surrounding context, which can make it easier to understand and work with.

For example, consider the following code using traditional function syntax:

const object = {
    value: 10,
    incrementValue: function () {
        setTimeout(function () {
            this.value += 1;
        }, 1000);
    },
};

In this example, the "this" keyword inside the setTimeout function will not refer to the "object" object, but rather to the global object. This can cause issues because the "value" property of the "object" object will not be incremented as expected.

When the setTimeout function is called, the "this" keyword inside the function will refer to the global object, rather than the "object" object. As a result, when the code attempts to increment the "value" property of the "object" object, it will fail because the "this" keyword will not refer to the "object" object. Instead, the code will create a new "value" property on the global object and increment that. This can lead to confusion and make it difficult to understand the intended behaviour of the code.

Another possible result of this unexpected behaviour is that the code will throw an error. If the global object does not have a "value" property, attempting to increment it will result in an error. This can make it difficult to debug and understand the issues with the code.

The same code using arrow function syntax would look like this:

const object = {
    value: 10,
    incrementValue: function () {
        setTimeout(() => {
            this.value += 1;
        }, 1000);
    },
};

In this example, the setTimeout function is defined using arrow function syntax. This means that the "this" value inside the function will be inherited from the surrounding context.

As a result, when the setTimeout function is called, the "this" value inside the function will refer to the "object" object. This allows the code to increment the "value" property of the "object" object as expected.

Complete example of the code

const object1 = {
    value: 10,
    incrementValue: function () {
        console.log("object1", this.value, "before");
        setTimeout(() => {
            this.value += 1;
            console.log("object1", this.value, "after");
        }, 1000);
        console.log("object1", this.value, "after but out of scoop");
    },
};

object1.incrementValue();

console.log("======");

const object = {
    value: 10,
    incrementValue: function () {
        console.log("object", this.value, "before");
        setTimeout(function () {
            this.value += 1;
            console.log("object", this.value, "after");
        }, 1000);
        console.log("object", this.value, "after but out of scoop");
    },
};

object.incrementValue();

Output of the code

object1 10 before
object1 10 after but out of scoop
======
object 10 before
object 10 after but out of scoop
Hint: hit control+c anytime to enter REPL.
object1 11 after
object NaN after

Overall, the introduction of arrow function expressions has made it easier for JavaScript developers to define functions and to write more concise and expressive code.

References:

• Arrow_functions

Comments

[Ben Calder]

Agreed: the main reason they exist is to resolve some common scoping problems that occur with standard functions in certain contexts: event handlers being a good example.

As for arrow functions being "easier to read"; I'd have to disagree. Sometimes the concise form is handy; but IMO it can also be more difficult to read - e.g. when using implicit return:

// not immediately obvious when scanning the code
() => ({ foo: 'bar' })
// more verbose; but much clearer outcome
function () {
  return { foo: 'bar' };
}