Javascript (ES6) – Fat Arrow Functions

Javascript is becoming one of the most widely used programming languages by developers all over. From front-end frameworks for UI development to back-end servers and everything in between, there is no feat that you cannot accomplish with Javascript!

When we say ES6, we mean Ecma Script 6 standard for Javascript. What this means is, JS developers all over the world form a consensus on the features/syntax that is required to be added/removed or tweaked in JS to make it better. ES6 is the name given to the standards. It is also called ES2015 as it was released in the year 2015. So that means Javascript ES6 and ES2015 are one and the same thing.

There were many additions that were made in ES6 that made the life of a JS developer easier. In this blog post, we will cover the ‘Fat arrow function’ (=>).

The ‘Fat arrow function’ (will be referred to as FAF from now on) is an alternate syntax to define functions in JS introduced in ES6. It provides immense power while remaining simple to use.

Normal Function:
function foo() {
console.log("normal function!");
}


Fat Arrow Function:

var foo = () => {
console.log("fat arrow function!");
}


Very similar to the old syntax, the parenthesis – ‘(‘ and ‘)’ enclose the arguments to be passed to this function, which is followed by the fat arrow which is followed by the curly braces – ‘{‘ and ‘}’ which encloses the function body.

Special Features of Fat Arrow Syntax:

• If the function is a single line function, then it can be written without the curly braces as shown below and it works absolutely fine while looking clutter free.

     var foo = () => console.log("fat arrow function!");

• If the function is such that it single line and returns a single value like the square() function below :

    function square(x) {
return x*x;
}


Then it can be written like this :
    var square= (x) => x*x;


• If the function takes just one argument, we can even leave out the parenthesis writing the function like this :

    var square = x => x*x;


The above line behaves exactly same as the full fledged ‘normal’ function that is written few lines above. (Note that if we have zero arguments to be passed to the function, we need to supply the empty parenthesis to the function.)

• In case of callback functions, it is very handy to use this syntax as below:

    setTimeout(() => console.log("Timeout!"), 1000)


‘this’ object & Fat Arrow Syntax:

One of the major ‘behind the scenes’ difference between the fat arrow function and a normal function is how it handles the ‘this’ object.

The fat arrow function preserves the context, i.e ‘this’, irrespective of where the function was called from, for example: inside of a button ‘click’ handler or a ‘timeout’ handler whereas the normal function changes the context, i.e ‘this’ based on where it was called from.

This is a major behavioral shift from the old function.

So, these are the few advantages which make the fat arrow function our main choice when we need simple, clutter free code.