Angular Arrow functions

One thing I like a lot in ES2015 is the new arrow function syntax, using the 'fat arrow' operator (⇒). It is SO useful for callbacks and anonymous functions!

Let’s take our previous example with promises:

getUser(login)
  .then(function (user) {
  return getRights(user); // getRights is returning a promise
  })
  .then(function (rights) {
  return updateMenu(rights);
  })
can be written with arrow functions like this:

getUser(login)
  .then(user => getRights(user))
  .then(rights => updateMenu(rights))

How cool is it? THAT cool!
Note that the return is also implicit if there is no block: no need to write user ⇒ return getRights(user). But if we did have a block, we would need the explicit return:

getUser(login)
  .then(user => {
  console.log(user);
  return getRights(user);
  })
  .then(rights => updateMenu(rights))
And it has a special trick, a great power over normal functions: the this stays lexically bounded, which means that these functions don’t have a new this as other functions do. Let’s take an example, where you are iterating over an array with the map function to find the max.

In ES5:

var maxFinder = {
  max: 0,
  find: function (numbers) {
  // let's iterate
  numbers.forEach(function (element) {
  // if the element is greater, set it as the max
  if (element > this.max) {
  this.max = element;
  }
  });
  }
};
maxFinder.find([2, 3, 4]);
// log the result
console.log(maxFinder.max);
You would expect this to work, but it doesn’t. If you have a good eye, you may have noticed that the
forEach in the find function uses this, but the this is not bound to an object. So this.max is not the
max of the maxFinder object… Of course you can fix it easily, using an alias:
var maxFinder = {
  max: 0,
  find: function (numbers) {
  var self = this;
  numbers.forEach(function (element) {
  if (element > self.max) {
  self.max = element;
  }
  });
  }
};
maxFinder.find([2, 3, 4]);
// log the result
console.log(maxFinder.max);
or binding the this:

var maxFinder = {
  max: 0,
  find: function (numbers) {
  numbers.forEach(
  function (element) {
  if (element > this.max) {
  this.max = element;
  }
  }.bind(this)
  );
  }
};
maxFinder.find([2, 3, 4]);
// log the result
console.log(maxFinder.max);
or even passing it as a second parameter of the forEach function (as it was designed for):
var maxFinder = {
  max: 0,
  find: function (numbers) {
  numbers.forEach(function (element) {
  if (element > this.max) {
  this.max = element;
  }
  }, this);
  }
};
maxFinder.find([2, 3, 4]);
// log the result
console.log(maxFinder.max);
But there is now an even more elegant solution with the arrow function syntax:

const maxFinder = {
  max: 0,
  find: function (numbers) {
  numbers.forEach(element => {
  if (element > this.max) {
  this.max = element;
  }
  });
  }
};
maxFinder.find([2, 3, 4]);
// log the result
console.log(maxFinder.max);
That makes the arrow functions the perfect candidates for anonymous functions in callbacks!