this keyword in JavaScript

Disclaimer : I am not a JavaScript Expert. I am just sharing my learning experience with the usage of this keyword. So, lets just start.

Just Remember this line

For all the regular functions calls, this points to window object.

Now, let us first understand Regular Function Calls.

Example 1:

// Let's define our function first
function sayHello() {
    console.log("Hello Reader!");
}
// Now let's call our 
functionsayHello();  // This type of function call is called Regular 
Function call.
Output:
Hello Reader!

The above example is very simple to understand as it simply contains a function definition and then a function call.

Example 2:

// Defining our function
function funcGenerator() {
    return function() {
      console.log("Hello Reader");
    }
}
// Assigning a variable to a returned function
let generatedFunction = funcGenerator();
//Regular Function call
generatedFunction(); 
Output:
Hello Reader!

In this example, we have a function which returns a function. So, we can assign a variable to returned function and call that function with that variable.

Now, let us come back to this keyword.

this keyword is simply a keyword in JavaScript that refers to an object.

console.log(this);

If you simply try to run just the single line of code in Browser’s console or Node, this keyword will refer to global object i.e window object in Browser and empty object in Node.

var user = {
  firstName: "Aashim",
  lastName: "Garg",
  printName: function() {
       console.log(this);
   }
}
user.printName();
Output:
Object { 
  firstName: "Aashim", 
  lastName: "Garg", 
  printName: printName() 
}

Remember, user.printName(); is not a Regular Function Call. Therefore, one thing is clear this will not refer to global object but what now? Where should this refer?

In this case, this will refer to the owner of the method printName() i.e user object. Therefore, user object gets logged onto the console.

Since, in this case this keyword refers to the user object that means we can get hold of the properties of user object using this keyword like user.firstName we can write now this.firstName.

Now, let us print our name. I am printing mine, you try to print your.

var user = {
  firstName: "Aashim",
  lastName: "Garg",
  printName: function() {
      console.log(this.firstName + " " + this.lastName);
   }
}user.printName();
Output:
Aashim Garg

Now, Let us take another Example to clear our understanding

var testObject = {
  printThis: function() {
       return function() {
           console.log(this);
       }
    }
}        
var func = testObject.printThis();
func();
Output:
Window Object in Browser
        (or)
Empty Object in Node

You must be wondering why this is referring to window object. Why not it is referring to testObject. But, here is the thing we are calling a function that returns another function and we save that function in the variable func and then call func() which is again a Regular Function call and in Regular Function calls this keyword refers to Window Object. The object that is standing before the dot is what the this keyword will be bound to.