Master the this keyword in javascript today!

This keyword in Javascript

In Javascript, what does this keyword refer to?

The this keyword refers to the current execution context. The execution context can vary based on different things; let's learn together in this article.

The this keyword in javascript may be the most confusing part for many developers to understand, but I will help remove the confusion for you. Take a look at the example below:

function hellothis() {
   console.log(this);
}

console.log(hellothis()) 

// Window {window: Window, self: Window, document: document, name: "", location: Location, …}

If we refer to this from a factory function, it refers to the window object, also known as a Global object.

We can use a few scenarios to understand how the this keyword works.

This example scenarios

1. If we are referring to this inside a simple function, it will refer to the window object.

2. If we refer to this inside an object, then this refers to that current object.

3. If we refer to this inside a constructor function, then this refers to the current object.

4. If we refer to this from the event listener, then this refers to that element.

   🤩 Our Amazing Sponsors 👇

   View Website

   DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

   View Website

   Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

   View Website

   A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Don't worry if you don't understand all these scenarios initially; we will elaborate a bit more.

Inside an object

If we refer to this inside an object, then this refers to that object containing it. Take a look at the following example.

let obj = {
  name: "ponmani",
  job: "enginner",
  place: "vellore",
  print: function () {
      console.log(this);
      //(name: "ponmani", job: "enginner", place: "vellore", print: ƒ)
 }
}
console.log(obj.print())

In the above code example, this keyword inside the print function refers to that object itself.

Inside a constructor function

If we refer to this inside a constructor function, then this refers to the current object.

class Name {
    constructor() {
        console.log(this);
        //Name {}
    }
}

var a = new Name();

Whenever we create an instance for the class using the new keyword, a new object will be created, and this will refer to that newly created object internally.

Inside an event listener

If we refer to this from the event listener, then this will refer to that element where the event is added.

<button class='add'>add</button>

const btn = document.querySelector(".add");
btn.addEventListener("click", function () {
    console.log(this); 
    //<button class="add">add</button>
});

Here, we can see this inside the event refers to that button itself.

Conclusion

The this keyword inside of javascript can be a little tricky. For instance, take a look at this example:

let obj = {
  name: "ponmani",
  job: "enginner",
  place: "vellore",
  print: function () {
    return function () {
      console.log(this);// window object
    };
  },
};

console.log(obj.print()());

Here we have a function returning another function. In this case, this refers to the window object, and only the outer function refers to that containing object itself.

To overcome confusion, we can store this inside another variable and use it inside the function.

I hope this clarifies a bit of confusion about the this keyword. If it gets confusing to remember, keep pushing forward because it will become clearer over time.