DEV Community

Himanshu Gupta
Himanshu Gupta

Posted on

1

‘this’ in JavaScript

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

“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()
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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😊.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (2)

Collapse
 
himanshudevgupta profile image
Himanshu Gupta

Thankyou

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more