This keyword in Javascript

If you have been developing things using JavaScript libraries, you might have noticed a ubiquitous keyword called this.

In this blog post, I will try to help you understand this and its mechanism in-depth.

What is this?

In javascript this refers to the object it belongs to.

this has different values depending on where it is used:

• In a method, this refers to the owner object.
• Alone, this refers to the global object.
• In a function, this refers to the global object.
• Methods like call() and apply() can refer this to any object.

this in a method

In an object method, this refers to the owner of the method. Which means if we are using this in an object method then it will return the whole object

let person = {
 firstName: "Pratap",
 lastName: "Sharma",
 fullName: function(){
 return this;
 }
}

person.fullName(); // Here 'this' will be the whole object or the person object

Example of this in a method

let person = {
 firstName: "Pratap",
 lastName: "Sharma",
 fullName: function(){
 return "Name is " + this.firstName + " " + this.lastName;
 }
}

person.fullName(); // "Name is Pratap Sharma"

Using this alone

When using this alone, the owner is the Global object, i.e., window object in a browser [object Window].

let whatIsThis = this;

whatIsThis; // It will return the whole window object

For better practical try this on your browser.

this in a function

In a javascript function, the owner of the function is the default binding for this. So, in a function, this refers to the Global object [object Window].

function whatIsThisHere() {
  return this;
}

whatIsThisHere();
//It will return the whole window object

You can again try this on your browser.

this with call()

The call() method in javascript is a predefined javascript method.

With the call() method, you can write a method that can be used on a different objects which means with call(), an object can use a method belonging to another object.

Example of this with call()

let person = {
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
};

let anotherPerson = {
  firstName: "Pratap",
  lastName: "Sharma",
};

person.fullName.call(anotherPerson);
// "Pratap Sharma"

this with apply()

The apply() method is similar to the call() method.

Example of this with apply()

let person = {
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
};

let anotherPerson = {
  firstName: "Pratap",
  lastName: "Sharma",
};

person.fullName.apply(anotherPerson);
// "Pratap Sharma"

this in `classes

Classes are one of the essential parts of any JavaScript apps. Let's see how this behaves inside a class.

A class generally contains a constructor, where this would refer to any newly created object.

But in case of methods, this can also refer to any other value if the method is called like a normal function. And just like a method, classes can also lose track of the receiver.

class Hero {
  constructor(heroName) {
    this.heroName = heroName;
  }
  dialogue() {
    console.log(`I am ${this.heroName}`);
  }
}
const superMan = new Hero("Super Man");
superMan.dialogue(); // "I am Super Man"

this inside the constructor refers to the newly created instance of that class.

To sum it up

We need to use this in JavaScript as we need to have food daily.

I hope this blog post helped you clear any confusions you may have about this in JavaScript, and now I believe now you know where and how to use the simple but critical keyword this in your JavaScript code.

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter here.