The Fat Arrow Function in ES6

An article from www.knowledgescoops.com

With the release of ECMAScript 6 came a new way of writing a Javascript function which soon became the most commonly used ES6 feature of JavaScript.

The JavaScript Function

Before ES6, the syntax to create a function was similar to:

var helloFunc = function() {
    return "Hello";
}
console.log(helloFunc());

Prints the following in the console:

Hello

The Arrow Function

Using ES6’s arrow function syntax, we can rephrase the above code to the following way:

var helloFunc = () => {
    return "Hello";
}

We have removed the function keyword & used an arrow operator (often called the fat arrow) to create a function.

Now, if we execute the same console.log statement, we will get the same output.

console.log(helloFunc());

Prints the following in the console:

Hello

This later function code behaves in the exact similar way as the former one.

Both will give the same return value i.e. “Hello” when executed.

The Shorter Notation

If the function is a single statement function as in the case above, it is just one return statement. We can remove the curly parenthesis & the return statement, and the code will look like:

var helloFunc = () => "Hello";

The above code when executed is still the same as the former two.

Passing Parameters to arrow functions

Passing parameters to an arrow function are something similar to passing parameters in a normal function.

An arrow function that accepts parameters will look like:

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

We can call the add method declared with an arrow function in the following manner:

add(1, 3);

Output:

4

Arrow function & this keyword

While writing a nested JavaScript function using the function keyword, this keyword loses its current context in the inner function & we have to hold its reference by creating a closure like

var self = this;

While this is not the case with arrow functions. We don’t need to create a closure using the above method as in an arrow function, this keyword does not lose its current content.

Consider we have created a String object’s prototype method that will actually be a nested method.

In the first attempt, we will try the function with function keyword for the inner method.

String.prototype.DoSomeThing = function() {
    var printThis = function() {
        console.log(this);
    }
    printThis();
}

Output:

Window

Using function with the function keyword gave this a Window object.

To fix this issue, what we did earlier was like:

String.prototype.DoSomeThing = function() {
    var self = this;
    var printThis = function() {
        console.log(self);
    }
    printThis();
}

Now we will get the output as String as we used a closure to maintain the current context. However, this keyword inside the inner function will still give Window as output.

Maintaining this keyword’s context with an arrow function

Now the prototype method will look like:

String.prototype.DoSomeThing = function() {
    var printThis = () => {
        console.log(this);
    }
    printThis();
}

Now let’s see what we will get in this.

Output:

String

We get the value of this to be String object. Since we are in String’s prototype, this should actually correspond to String. Hence, this inside the inner function didn’t change the context & maintains the context of the object under observation.

For more such articles, visit www.knowledgescoops.com

Want to read more articles like this?
Follow me on medium @kunaltandon.kt
Connect with me on LinkedIn:
https://www.linkedin.com/in/kunal-tandon/