DEV Community 👩‍💻👨‍💻

Naveen Dinushka
Naveen Dinushka

Posted on • Updated on

What is 'this' in JavaScript

What does 'this' return?

Here's an object which uses this keyword

const man = {
  name: "rick",
  adventure() {
    console.log(this);
  }
};

man.adventure(); 

Executing above you will see the man object on the console.

Alt Text

But what if you do;

const adventure_reference = man.adventure;

adventure_reference();

Output then would be;

Alt Text

Explanation

Value of 'this' is determined by how a function is called;

  • If we call a function as a method in an object this will always return a reference to that object.

  • If we call a function as a standalone object - or outside an object this will return the global object which is the window object in browsers.

In the next post we will use bind() to solve the problem 'of returning the window object'

Top comments (4)

Collapse
 
johnkazer profile image
John Kazer

Kinda exactly the reason I don't use this. Context dependent behaviour is a nightmare I can do without. A functional style of JavaScript is able to avoid it.

Collapse
 
g1itcher profile image
G1itcher

I'm sure you already know this, but it's worth saying for any beginners that stumble upon this article.

It's easy to avoid issues with "this" by mandating arrow functions be used either to wrap the required function or just define the functions as arrow functions originally.

Or use bind()

With arrow functions and bind there's not much need to do the old

self = this

solution.

Collapse
 
naveenkolambage profile image
Naveen Dinushka Author

no worries! :)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠