Arrow Functions in ES6

The arrow function expression (also know as fat arrow functions) is an alternate syntax to write function expressions and was introduced to ES6 by 2 factors: shorter functions and lexical this.

Arrow functions are also always anonymous.

The basic syntax looks like this:

Multiple parameters:
(param1, param2, ..., paramN) => { statements }
(param1, param2, ..., paramN) => expression
// equivalent to { return expression; }
One parameter: 
(param) => { statements } or param => { statements} 
// parentheses are optional
No parameters:
() => { statements }
_ => { statements }
// parentheses or underscore required
  1. Shorter syntax:

An arrow function expression has a shorter syntax compared to function expressions.

var animals = [ 'dog', 'cat', 'monkey', mouse' ];
// regular function expression
var a1 = animals.map( function(animal){ return animal.length } );
// arrow function expression
var a2 = animals.map( animal => animal.length );

2. Lexical this:

Every new function defined its own this value with regular function expressions. To refer to the value of this in a callback function, we would have to assign the value of the keyword this to a variable and use that variable inside the callback function or use the JavaScript native method Function.prototype.bind() which is quite a hassle.

var Car() = function() {
var that = this;
this.position = 0;
  setInterval(function move() {
that.position++
}, 1000);
}

Arrow functions capture the keyword this’ value of the enclosing context so the following works as expected.

var Car() = function() {
this.position = 0;
setInterval(function move() {
this.position++
}, 1000);
}