ES6 Javascript Arrow functions

Arrow functions are a new ES6 Javascript feature to write more readable and shorter code, with the same results. It came with another new feature like the “let/const” renaming from the ES5 “var”.

It may seem very similar to the anonymous functions of ES5 but with some small differences.

A function like:

function(x) {
  return x + 10;
}

Becames:

x => x + 10

The arrow functions are more compact and more readable.
Several parts of these functions are optional under certain conditions.
Round brackets “()” are optional in case of a single input parameter. Instead, they are mandatory if more than one input parameter is entered.
Braces “{}” are optional in case of a single block of code. Otherwise they are mandatory.
The “return” is optional if the braces are optional.

An extended version of the function seen above could be of this type:

(x) => {
  return x + 10;
}

Compared to standard functions and anonymous functions, arrow functions keep pointing to the context object (in which they are immersed), through “this”.

This of context is an important and beautiful quality to note the arrow function. When in an object, a function cannot easily access the properties of the object that contains it, while an arrow function can!
In this way it allows us to work with an OOP logic, typical of the most advanced and solid languages.

The arrow functions prove to be quite useful in functions such as: map(), sort(), reduce(), filter().

If for example we could a list of users of which we wanted to recover only a list of names.

const usersList = [{name: 'Mario'}, {name: 'Luigi'}, {name: 'Harry'}];

With an arrow function we can obtain the result with a single line of code.

usersList.map(i => i.name); // Output: ['Mario', 'Luigi', 'Harry']

That’s all for today, on ES6 arrow functions.
Try it at home!