In this introductory lesson, we’re going to learn about Arrow functions from the latest version of Javascript: ES6 or ES2015.

What was wrong with context in javascript?

In old version of Javascript, the keyword this is functionally bound.  meaning when you use this the context it references is to the object inside of the function you invoked it in. To get around this, we usually set a variable to the the correctly bounded this so we can reference it later:

var self = this;

Let’s take a look at an example:

var myVar = {};

myVar.name = 'pentacode';
myVar.numbers = [1,2,3,4,5];

myVar.printNumbers = function() {
  var self = this;  // Store the reference of this in a variable called 'self'
  this.numbers.forEach(function(number) {
      console.log(self.name + ' counts ' + number);
  });
  
}
myVar.printNumbers();

here, we were able to access the name property of myVar within the forEach loop’s iterator function correctly by calling self.name because self refers to this from the context of .printNumbers() which in term has access to the myVar object.

another popular way of dealing with context is by using the .bind() function:

// Solving lexical "This" with .bind()
var myVar = {};

myVar.name = 'pentacode';
myVar.numbers = [1,2,3,4,5];

myVar.printNumbers = function() {

  this.numbers.forEach(function(number) {
      console.log(this.name + ' counts ' + number);
  }.bind(this));
  
}
myVar.printNumbers();

here, we simply call .bind(this) on the iterator function of forEach and it’ll understand to use the context from .printNumbers(), and that’s how we were able to use this.name in the console log to correctly print out the value.

Solving lexical “this” with ES6 Arrow Function

ES6 introduces the arrow function to help solve the issue with context binding.

ES6 fat arrow functions have a shorter syntax compared to function expressions and lexically bind the this value. Arrow functions are always anonymous and effectively turn function (arguments) { expression } into arguments => expression

let’s rewrite the above example with arrow function:

var myVar = {};

myVar.name = 'pentacode';
myVar.numbers = [1,2,3,4,5];

myVar.printNumbers = function() {
  this.numbers.forEach((number) => {
      console.log(this.name + ' counts ' + number);
  });
  
}
myVar.printNumbers();

all we did was we added a => to the function before the opening brace, (removing the word function is optional, but it makes things easier to read) and ES6 will understand to bind the context correctly.

Arrow function short hand

Arrow functions offer short hands to make your code even simpler to read, let say you have the following:

var myVar = {};

myVar.name = 'pentacode';
myVar.numbers = [1,2,3,4,5];

myVar.printNumbers = function() {
  this.numPlusOne = this.numbers.map((number) => {return number + 1});
}

myVar.printNumbers();

when you have a single statement inside of a arrow function, you can eliminate the braces {} and the return keyword completely:

// Short hand method
var myVar = {};

myVar.name = 'pentacode';
myVar.numbers = [1,2,3,4,5];

myVar.printNumbers = function() {
  this.numPlusOne = this.numbers.map(number => number + 1);
}

myVar.printNumbers();

That’ll do it for the first introductory lesson on ES6, there are bunch of awesome features and I can’t wait to cover them for you in this series.

[frames playlist=’3′]