ES6 Features | Fat-Arrow Functions

3 min readNov 26, 2017

Up until now, we have covered the Introduction to ECMAScript.
Now it’s time to learn about the new features that came up with ES6.

Let’s start with Fat-Arrow Functions…

ES6 comes up with a new syntax for defining functions, popularly known as Fat-Arrow Functions.

Let’s see it with an example:

As you can clearly see, the new syntax makes the code much more easier to comprehend than the old one.
This property of Fat-Arrow Function (which makes the code easier to read) makes it a syntactic sugar over the older syntax.

So, what is syntactic sugar?

Syntactic sugar is syntax that is designed to make things easier to read or to express. It makes the language “sweeter” for humans to use.

Besides making the syntax easier to read, the fat-arrow syntax also provides some more benefits over the older one.

The other benefits include:
> Doesn’t rebind the value of “this”
> Provision of implicit return

Doesn’t rebind the value of “this”

To understand this, we have to first know what is “this”?

What is “this” at all?

The “this” keyword refers to the current instance of a class i.e. the current object.

In JavaScript, the “this” keyword is determined mostly by how and where the function gets invoked.

There is much more to “this” keyword than what we have talked about.
A proper explanation would take up a whole blog. So let’s keep it aside for another blog.

For the time being, let’s focus on what re-bind means?

In the above example, the “this” keyword at Line-6 and at Line-7 are not equal.
This is because a new function gets invoked inside this.topics.map. Thus, the “this” keyword gets re-bound to a different value.

This problem can be overcome through the use of Fat-Arrow syntax.

The Fat-Arrow used at Line-6 makes both the “this” keywords present at Line-6, equal!

Provision of “implicit return”

As can be seen with the fat-arrow syntax, there is no need of specifying the “return” keyword explicitly.

But there is a catch here!

The implicit return works only when the function’s body has a single return statement.
Because only then we can leave out the curly braces (around the function’s body) from the function’s body.

So, to state it in simple words, implicit return works only in the absence of curly braces.
The above conclusion has arrived from the fact that the absence of curly braces is syntactically correct only when the body consists of only a single return statement.

In any other case, it doesn’t work.

Now before wrapping it all up, there are some ground rules that must be followed while using fat-arrow syntax.

Ground Rules

No Arguments

In case a function has no arguments/parameters at all, you must include parenthesis i.e. “()”.

var noArgumentsFunction = () => console.log(“check”);

Single Argument

In case a function has only a single argument, there’s no need of parenthesis.

var singleArgumentFunction = arg => arg;

More Than One Argument

For a function having more than a single argument, parenthesis must be included.

var moreThanOneArgumentFunction = (a, b) => a + b;

Just A Return Statement

In case a function’s body is only composed of a single return statement, then there is no need of curly braces around the body.

//Old syntax
var bodyHavingSingleReturnStatement = function() {
 return “hello”;
}//Fat-Arrow syntax
var bodyHavingSingleReturnStatement = () => “hello”;

More Than Just A Return Statement

If a function’s body has more than just a single return statement, then the body needs to be wrapped up inside curly braces.

var bodyHavingMoreThanSingleReturn = () => {
 console.log(“hello”);
 return “world”;
}

That concludes it!

Ciao…

The School Of JS