ES5 vs ES6 - Function definition in object literal and accessing this keyword

es5-vs-es6-method-definition-in-object-literal.js

/**
Example 1
The object called 'person' has three properties (location being a nested object)
and one method definition. The method showDetail prints values of different properties
of the same object where the function is defined.
*/
var person = {
  fullName: 'Subrata Sarkar',
  jobTitle: 'Web developer',
  location: {
    city: 'Kolkata',
    counry: 'India'
  },
  showDetail: function() {
    console.log(this.fullName, this.jobTitle, this.location.city);
  }
}

person.showDetail();

/**
Output:
--------------
Subrata Sarkar
Web developer
Kolkata

No issues so far!
*/

/**
Example 2
The object called 'person' has three properties (location being a nested object)
and one method definition. The method showDetail prints values of different properties
of the same object where the function is defined.
*/

var person = {
  fullName: 'Subrata Sarkar',
  jobTitle: 'Web developer',
  location: {
    city: 'Kolkata',
    counry: 'India'
  },
  showDetail: function() {
    setTimeout( function () {
      console.log(this.fullName, this.jobTitle, this.location.city);
    }, 100 );
  }
}

person.showDetail();

/**
Output:
--------------
undefined
undefined
undefined
*/

/**
We get undefined because the setTimeout() function is a subroutine
and it cannot access `this` of the parent object.
In order to access the parent we have the following approach:
*/

// Example: 3
var person = {
  fullName: 'Subrata Sarkar',
  jobTitle: 'Web developer',
  location: {
    city: 'Kolkata',
    counry: 'India'
  },
  showDetail: function() {
    var that = this;
    setTimeout( function() {
      console.log(that.fullName, that.jobTitle, that.location.city);
    }, 100 );
  }
}

person.showDetail();

/**
Output:
--------------
Subrata Sarkar
Web developer
Kolkata
*/

/**
We assign 'this' to a variable called 'that' inside showDetail() funciton and then output
the values as that.fullName, that.jobtitle and that.location.city.
The 'that' variable grabs a copy of 'this' object and then is able to access the parent object properties.

We can however access parent object properties directly like this:
*/

// Example: 4
var person = {
  fullName: 'Subrata Sarkar',
  jobTitle: 'Web developer',
  location: {
    city: 'Kolkata',
    counry: 'India'
  },
  showDetail: function() {
    var that = this;
    setTimeout( function() {
      console.log(person.fullName, person.jobTitle, person.location.city);
    }, 100 );
  }
}

person.showDetail();

/**
Output:
--------------
Subrata Sarkar
Web developer
Kolkata
*/

/**
But as we see, we need to be careful while accessing parent object like this since
in a long and complex code, it would start becoming hard to maintin 'this' and 'that'.

ES6 comes with the solution. The following example shows the usage of Arrow (=>) function:
*/

// Example: 5 - use of Arrow (also called Fat Arrow) function (=>)
var person = {
  fullName: 'Subrata Sarkar',
  jobTitle: 'Web developer',
  location: {
    city: 'Kolkata',
    counry: 'India'
  },
  showDetail: function() {
    var that = this;
    setTimeout( () => {
      console.log(this.fullName, this.jobTitle, this.location.city);
    }, 100 );
  }
}

person.showDetail();

/**
Output:
--------------
Subrata Sarkar
Web developer
Kolkata
*/

/**
Arrow function does not have its own 'this' and it always refers to the outermost object.
Here although the Arrow function is used with setTimeout(), since it has no 'this', it will always
tie tie with the object person and hence this.fullName, this.jobTitle and this.location.city
will always be accessible inside the function.
*/