[ES6] Arrow Functions-Mystery Revealed

If you have been on this planet for few years, you must have been acquainted with the major improvements the JavaScript language has seen over the last few years. Today we will deal with Arrow functions, their ins and out.

For those, who have landed on the Earth few days before, this is not about arrows nor a guide about what functions does it serve. Also, there is no mystery in how arrow functions. You must be interested here.

Arrow Functions

Arrow functions behave similarly as the normal functions do which you are familiar with. They are different just syntactically. An example will make the picture clear.

const name = ['Priyanshu', 'Nayan', 'is','great'].map(function(value){
 return value.toUpperCase();
});

In ES6 this is lot more compact and easy to comprehend. The less fussy, the better.

const name = ['Priyanshu', 'Nayan', 'is','great'].map(
 value => value.toUpperCase();
);

This is arrow function as => is involved. There are few things you must notice.

1. The keyword function is removed.
2. The curly braces are removed.
3. return keyword is thrown away.
4. parenthesis also received no mercy along with semi colon.
5. The arrow is added between the parameter and function body.

So far so good.

But we also have functions that have zero or more than one parameters. Then What? Right?

It’s easy. Just use the parenthesis with nothing in between them.

const thor = () => console.log("I am the God of Thunder");
thor(); // I am the god of thunder

Similarly we also have,

const avengers = (thor, hulk) => console.log(`Thor is ${thor} and hulk is ${hulk}!`);
avengers('great', 'fat'); // Thor is great and hulk is fat.

No worries even if you have one parameter, you can also put it in parenthesis if you wish to.

so far so good, again.

Till now we have been dealing with concise body syntax meaning body had just one line of code. What if we need more than one line. In that case we have to introduce few changes to our beloved arrow functions.

1. curly braces are used to wrap the body.
2. return keyword is used.

Time to see these changes in action.

const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map( name => {
  name = name.toUpperCase();
  return `${name} has ${name.length} characters in their name`;
});

This is not the end friends. There is lot more to arrow functions.

The mighty ability to default function parameter. Earlier we used to set the default value using the || (or) operator. That made the code more clumsy and was a sort of trick, but now ES6 supports this:

function avengers(lead="thor", quality="Lord Of thunder") {
 return ` Welcome ${quality} the ${lead}`;
}
avengers(); // Welcome Lord of thunder the thor
avengers('Iron Man'); // Welcome Lord of thunder the Iron Man

Amazing isn’t it? But please do not wipe out how you used to write regular functions because there is a gotcha with the this keyword. This behaves differently in arrow functions and also there is nothing called arrow function declaration. In fact the full name of arrow functions is arrow function expressions. So, beware.

So, now you know quite a deal about arrow functions. I hope this will help you making your code more concise, efficient and better than ever before.