Understanding 'this' Keyword in Normal and Lambda Functions

"this" in a normal function

"this" keyword in a normal function 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. Let's take an example to understand this keyword in normal function.

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

print() // window or global

as you can see in the above code snippet, global object will be printed. Because in the 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 argue 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 in 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 explained 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 simply.

“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 the 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 the 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 are no hobbies defined in the global object. That’s why we are getting the error.

---

If you have any questions or concerns regarding the information provided above, or if you would like me to cover a specific topic in the future, please let me know in the comments section. If you want to support me, buy me a coffee here. Thanks for your time and support. Happy Coding.