Javascript This Keyword? Explained

Let’s look at what ‘this’ keyword is in JavaScript.

In the last video, you looked at what ‘this’ keyword points to in a regular function call and in a method in JavaScript. The ‘this’ keyword points to the global window object in the context of browsers when written inside a regular function call. However, in the case of a method, which is defined as a function inside an object, the ‘this’ keyword points to the object to which the method is bond.

Let us take another example to understand this better. Consider the example given below:

var operation = {
   a: 1,
   b: 2,
  
   add: function() {
       this.a + this.b;
       console.log("a = " + this.a + ", b = " + this.b);
       var print = function() {
           console.log("a = " + this.a + ", b = " + this.b);
       }

       print();
   }
}

operation.add();

What do you think will be the output of this code? Try to run this inside your console tab in the Developer Tools. 
 

The variable operation is an object which contains the keys - a and b (representing two operands) and a key named add (function to add the two operands). The add() is a method because it defined as a function for the key in the object operation. Inside the add() method, there is another variable named print, which contains a function. Now, this function is a normal function because it is not mapped to any key of the object. This is something that you have already learned in the module of Basic JavaScript.
 

As learned in the video, the ‘this’ keyword inside the add() method points to the operation object and thus, this.a and this.b correctly prints the value of the keys - a and b defined in the operation object. Now, inside the print() function, the ‘this’ keyword points to the global object (window object in browsers) and since the keys a and b are not defined inside the window object, this.a and this.b prints undefined and undefined respectively.
 

Thus, an important takeaway is: 

Regular function call: ‘this’ -> global object (window object in context of browsers)
Method: this -> object to which the method is bond

In the next video, you will look at one more interesting scenario which confuses a lot of developers with respect to the ‘this’ keyword.

In the last video, you saw that a function inside a method is actually a regular function call and that the ‘this’ keyword points to the global window object inside such a function.
 

Let’s now look at the entire summary of what you have learned till now in the next video.