Es6 Fat Arrow

es6

ES6 offers the "fat arrow" syntax to reduce the amount of characters that we 
have to type in order to define a function.  This makes the code less verbose 
and more concise.  Consider:

items.forEach(function(x) {
  console.log(x);
  incrementedItems.push(x+1);
}

This can be rewritten using the "fat arrow syntax" as:

items.forEach((x) => {
  console.log(x);
  incrementedItems.push(x+1);
});

Functions that contain only a single expression and return its value can be 
defined even simpler:

incrementedItems = items.map((x) => x + 1);

In the above code incrementedItems is not a function.  It is just an array that 
holds the result of the .map function.  The map function takes a function as a 
parameter, and this function was defined using the "fat arrow" syntax.  The 
above code is equivalent to:

incrementedItems = items.map(function(x) {
  return x + 1;
});

The one with the fat arrow syntax is more compact, concise, takes less typing, 
and is less verbose.

The is one important difference between the "fat arrow" syntax and its 
traditional equivalence.  The "fat arrow" function share the value of the this 
keyword with the function in the context which it was defined.  In other words,
using the "fat arrow" syntax, we do not have to create a local variable named 
'that' and assign the value of the this keyword to this variable.

Consider:

class LoginFormController {
  constructor() {
    this.errorMessage = 'All good';
  }
  submit() {
    [1, 2].forEach(function() {
      console.log(this.errorMessage); // this is undefined here.
    });
  }
}

In the above code, if 'use strict' is in effect, this is undefined.  If 'use 
strict' is not used, this may refer to the global object.  This is because the 
this keyword is used inside an anonymous function, which depend on whether it 
is invoked using the dot operator or not, the this keyword may reference a 
different object.

Now, change the method to use the fat arrow function:

class LoginFormController {
  constructor() {
    this.errorMessage = 'All good';
  }

  submit() {
    [1, 2].forEach(() => console.log(this.errorMessage));
  }
}

In the above code, the "fat arrow" syntax guarantee that the this keyword inside 
the fat arrow function is always the same as the outer function "submit".

Here is another example of this problem.  Consider:

var jack = {
  name: 'jack',
  friends: ['james', 'steve'],
  printFriends: function() {
    this.friends.forEach(function(f) {
      console.log(this.name, 'knows', f);
    });
  }
};
jack.printFriends();

The above code produces:

undefined knows james
undefined knows steve

but the intention of the above code is to print:

jack knows james
jack knows steve

The problem has to do with the rules of what this function's scope is when it 
is invoked.  In this case, the function that we passed to the forEach method 
is invoked such that its scope is not the jack object as we expect, but it is 
instead the global object.

The fat arrow solve this issue for us.  We can rewrite the above code using the 
fat arrow:

var jack = {
  name: 'jack',
  friends: ['james', 'steve'],
  printFriends: function() {
    this.friends.forEach((f) => {
      console.log(this.name, 'knows', f);
    });
  }
}

Now we get:

jack knows james
jack knows steve

Another use case where the fat arrow is useful.  Consider this code:

var jack = {
  name: 'jack',
  get: function() {
    $.getJSON(url, function() {
      console.log(this.name);
    });
  }
};
jack.get();

When the above code is run, it logs undefined because when the callback function 
is called, its scope is the global object.  To solve this issue:

var jack = {
  name: 'jack',
  get: function() {
    $.getJSON(url, (d) => {
      console.log(this.name, d);
    });
  }
};