‘this’ in JavaScript

#javascript #this #beginners #typescript

Generally, this keyword refers to the object it belongs to or the parent object. Now, it also varies on which context we use it. Like, in a method, ‘this’ refers to its parent object. Alone, ‘this’ refers to the global object. In a function, ‘this’ refers to the global object. But in a function with ‘strict’ mode, ‘this’ refers to undefined. In an event, ‘this’ refers to the element that received the event

‘this’ is a keyword in JavaScript which points to the calling object (the object that a method belongs to) and it is used to access the properties of that calling object.

const football= {
  player: "Messi",
  playsFor() {
    console.log("PSG");
  },
  goat() {
    console.log(player);
  }
};
football.playsFor();  //PSG
football.goat();  //ReferenceError: player is not defined

In the above example, football.goat() throws a ReferenceError even though player is a property of the football object. This happens because in the scope of the goat() method we don’t automatically get access to other properties of the football object.

goat() {
  console.log(this.player); //Messi
}

“this” inside Functions
The value of this inside a function is usually defined by the function’s call. So, this can have different values inside it for each execution of the function.

In your index.js file, write a very simple function that simply checks if this is equal to the global object.

function rajat() {
  console.log(this === global)
}
rajat()

If we run this code using node, we will the output as true. But we add "use strict" at the top of the file and run it again, we will get a false output because now the value of this is undefined.

To further explain this, let’s create a simple function that defines a Superhero’s real name and hero name.

function Hero(heroName, realName) {
  this.realName = realName;
  this.heroName = heroName;
}
const superman= Hero("Superman", "Clark Kent");
console.log(superman);

Note that this function is not written in strict mode. Running this code in node will not get us the value of “Superman” and “Clark Kent” as we expected, but it will instead just give us an undefined.

The reason behind this is that since the function is not written in strict mode, this refers to the global object.

If we run this code in strict mode, we will get an error because JavaScript does not allow us to assign properties realName and heroName to undefined. This actually is a good thing because it prevents us from creating global variables.

Lastly, writing the function’s name in uppercase means that we need to call it as a constructor using the new operator. Replace the last two lines of the above code snippet with this:

const superman = new Hero("Superman", "Clark Kent");
console.log(superman);
Run the node index.js command again, and you will now get the expected output.

Thank you for keeping reading. If you liked the article, please hit the 👏button; if you want to see more articles follow me on dev.io😘.

If you have any doubts or suggestions 🤔 when going through this practical, please leave us a comment below👌.

See you in upcoming articles😊.