This Is What’s Up with ES6/2015 Arrow Functions

ES6/2015 arrow functions are more than just a concise way of writing functions in JavaScript. They actually act a bit differently than their old school bretheren. Specifically, whereas before arrow functions each function defined its own this value, arrow functions do not. Arrow functions simply use the this value of the enclosing context, thereby obviating the need to resort to this/that shenannigans or context binding.

In the example below, in order for warts to spread properly, it is necessary to send in the enclosing context to the setInterval function. this.warts++ would not work as this inside the setInterval function no longer refers to Toad (but rather to the window object). That is why it is necessary to grab on to the enclosing context this with that.

function Toad() {
this.warts = 10;
var that = this;
  setInterval(function spread() {
that.warts++;
}, 2500);
}

But as ES6/2015 arrow functions capture the enclosing context for this, you can simply do the following:

function Toad() {
this.warts = 10;
  setInterval(() => {
this.warts++;
}, 2500);
}