Understanding ‘this’ Keyword in Normal and Lambda Functions

“this” keyword in Lambda and Normal Function

“this” in a normal function

“this” keyword in a normal function is simply refers to the caller of that function. I mean who is calling that function. If the global object is calling that function then “this” will refer to the global object. Lets take an example to understand this keyword in normal function.

function print() {
 console.log("this", this)
}

print() // window or global

as you can see the above code snippet, global object will be print. Because in normal function we need to check who is calling the function. In this case we can see it is the global object who is calling this function.

Now people argues that how you know this is the global object who is calling the print function. So remember one thing if there is no dot syntax to call the method like the above code snippet then it means the window or global object is calling the function. That’s a very simple way to understand.

Lets take an example of function inside an object

const user = {
  name: "Jazim Abbas",
  printName: function () {
    console.log("Name: ", this.name);
  },
};

user.printName(); // Jazim Abbas

As you can see the above snippet, it is printing the name “Jazim Abbas”. The reason is “user” is the one who is calling the printName function. And we have defined “name” in the user object.

const user = {
  name: "Jazim Abbas",
  printName: function () {
    console.log("Name: ", this.name);
  },
};

printName = user.printName;
printName(); // undefined

Now it is printing “undefined”. The reason is window object is the one who is calling the printName function as you can see not the “user” object. And as I said earlier to understand, if there is no dot syntax before method call then it means it is global or window object.

const user = {
  name: "Jazim Abbas",
  printName: function () {
    function nested() {
      console.log("Name: ", this.name);
    }
    nested();
  },
};

user.printName(); // undefined

The reason why we are getting “undefined” is because window object is calling the nested function. I already gave an explanation above.

const user = {
  name: "Jazim Abbas",
  hobbies: ["Reading", "Watching Movies"],
  printHobbies: function () {
    this.hobbies.forEach(function (hobby) {
      console.log(this.name, ":", hobby);
    });
  },
};

user.printHobbies(); // undefined: Reading, undefined: Watching Movies

The reason we are getting “undefined” is we are passing function as a callback. And this is not the “user” object who is calling that callback function as you can see. The callback function has completely different execution context.

“this” in a lambda or arrow function

There is no binding of “this” in lambda or arrow function. “this” keyword inside an arrow function, does not refer to the object calling it. It rather inherits its value from the parent scope.

Let me explain it in a simple way.

“this” keyword value of the arrow function comes from its parent function. So in an arrow function we can say that it will matter where the function is defined, not who will call that function.

const user = {
  name: "Jazim Abbas",
  printName: () => {
    console.log("Name: ", this.name);
  },
};

user.printName(); // undefined

The reason we are getting “undefined”. Because There is no “this” value of the arrow function. So it will get that from its parent function. And as we can see that there is no parent function of printName so it will get that from the window or global object. And there is no name value present in the window object. So that's why we are getting undefined.

const user = {
 name: "Jazim Abbas",
 hobbies: ["Reading", "Watching Movies"],
 printHobbies: function () {
   this.hobbies.forEach((hobby) => {
     console.log(this.name, ":", hobby);
   });
 },
};
 
user.printHobbies(); // Jazim Abbas: Reading, Jazim Abbas: Watching Movies

Now Its printing the name. Because we are passing the arrow function as a callback. Now apply the definition of arrow function here. You’ll get a clear understanding.

“this” keyword value of arrow function comes from its parent. Now who is the parent of that arrow function. Its printHobbies right. And what is “this” value in printHobbies. It is “user”. So arrow function will get that value and its printing correct name.

const user = {
 name: "Jazim Abbas",
 hobbies: ["Reading", "Watching Movies"],
 printHobbies: () => {
   this.hobbies.forEach((hobby) => {
     console.log(this.name, ":", hobby);
   });
 },
};

user.printHobbies() // Cannot read property 'forEach' of undefined

printHobbies is the arrow function and we know that, there is no “this” binding in the arrow function. So it will get that from its parent function. And there is no parent function of printHobbies so it will get that from the window object. And there is no hobbies defined in the global object. That’s why we are getting the error.

I hope you’ll get a better understanding now. If there is still any confusion related to “this” keyword, please let me know in the comment section. I am happy to answer your queries.

Thank you for your time. Happy Coding.