How arrow functions fixed “this” keyword problem in ES6?

How arrow functions fixed “this” keyword problem in ES6?

14th October 2018 0 By Azadeh

In this article we will take a look at how arrow functions fixed the old ES5 problem around”this” keyword. What problem? “This” keyword cannot be relied on in different scope of code and they give unexpected results. By scope I simply mean brackets as they define the scope in Javascript.

“This” keyword

Practically In JavaScript it has been defined that , “this”  is the object that “owns” the JavaScript code.

The value of this, when used in a function, is the object that “owns” the function. The value of this, when used in an object, is the object itself. The this keyword in an object constructor does not have a value.

“this” keyword in an object

Using ES5 version we could have an object like below. Take a look what “this” gives us inside a function of an object:

var person = {
  name: 'John',
  showName: function() {
    console.log(this.name);
  }
};
person.showName(); // John

Perfect. We expected that result. It shows the name a John. Now if we add an array to our object and call an array method inside the object function we get a totally different result:

var person = {
  name: 'John',
  hobbies: ['sports', 'eating', 'coding'],
  showHobbies: function() {
    this.hobbies.forEach(function(hobby) {
      console.log(this.name + " wants to do " + hobby);
    });
  }
};
person.showHobbies(); [object Window] wants to do sports [object Window] wants to do eating [object Window] wants to do coding

Surprisingly we see that “this” keyword does not refer to the object anymore which name belongs to it but it refers to the main parent which is window object.

Because ‘this’, always references the owner of the function it is in, for this case — since it is now out of scope — the window/global object. It will happen to any standalone function:

var anyFunction = function(){
console.log(this);
}
any/function(); // [object Window]
the arrow

Fix 1: using another variable to refer :this” keyword”

var person = {
  name: 'John',
  hobbies: ['sports', 'eating', 'coding'],
  showHobbies: function() {
    var _this = this;
    this.hobbies.forEach(function(hobby) {
      console.log(_this.name + " loves " + hobby); 
    });
  }
};
person.showHobbies(); // John loves sports // John loves eating // John loves coding

We created a variable outside of the method’s inner function (hobbies function). Now the ‘forEach’ method gains access to ‘this’ and thus the object’s properties and their values

Fix 2: Using “bind”

We could also use bind to attach the ‘this’ keyword that refers to the method to the method’s inner function.

var person = {
  name: 'John',
  hobbies: ['sports', 'eating', 'coding'],
  showHobbies: function() {
    this.hobbies.forEach(function(hobby) {
      console.log(this.name + " loves " + hobby);
    }.bind(this));
  }
};
person.showHobbies();
// John loves sports // John loves eating // John loves coding

The best solution : arrow functions

Why arrow function solves it? Because in arrow function”this” keyword lives inside the scope of the function. Meaning the curly buckets as I mentioned in the beginning.

var person = {
  name: 'John',
  hobbies: ['sports', 'eating', 'coding'],
  showHobbies: function() {
    this.hobbies.forEach((hobby) => {
      console.log(this.name + " loves " + hobby);
    });
  }
};
person.showHobbies();
// John loves sports // John loves eating // John loves coding
fat arrow
arrow functions fixed “this” problem

Great. We have solved it. It keeps the code in scope and we always refer to the right object with “this” at the end. Using arrow functions really saves the code and makes it more readable, maintainable and solves the old “this keyword problem. 

Thank you for reading.