Understanding the this Keyword in JavaScript

I've been going through JavaScript concepts but lately and honestly, if i share this with you that this was the one thing that I kept messing me up. Every time I have thought about it, and I understood it, it would behave differently somewhere else and I was be like bro what even are you used for ?

So let me break it down the way for you and I wish someone could able to explained it to me earlier.

What even is this ?

imagine of this as who ever has been called by the function, that's known as this. That's all that this covers. That's the core functionality that this give to us. It's not just only about where the function is written, it's all about who has actually called it at the time of execution.

If this all still sounds confusing for you, so don't worry about it. Examples will make you this click more better.

this in the Global Context

When you're not inside any function or object, this is just a type of reference to the global object. In the browser, the global object reference is said to be by the window

console.log(this); // Window { ... }

You'll rarely use this as a globally here directly, but it's just good to know that when there's no specific caller, it default goes to the global scope.

this Inside an Object

This topic is where the this actually starts to making a sense to you easily.

const user = {
  name: "Ankur",
  greet() {
    console.log("Hello, " + this.name);
  }
};

user.greet(); // Hello, Ankur

Here you are able to see that, user.greet() is called so we can say that user is the one who is calling the function. That means this inside greet is said to be a user. So this.name gives us "Ankur".

Simple rule for understanding:

look left of the dot. That's your this

this Inside a Regular Function

Now here's we are where the beginners get confused while understanding this inside a regular function.

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

sayHi(); // Window in browser or undefined in strict mode

There's no object calling sayHi, so this is said to be falls back to the global object or if you're in strict mode, it will becomes undefined. This is similar to be said as a "no owner" case. if there is no caller then it is said to be a global object

How Calling Context Changes this

This is the most important part of this we can say that the same function which can have a different type of this depending totally on how you are calling it.

const person = {
  name: "Ankur",
  introduce: function() {
    console.log("I am " + this.name)
  }
}

person.introduce() // I am Ankur

const fn = person.introduce
fn() // I am undefined

Wait for a while read above code again for a while you are able to identify that there is same function, but what we get in result is totally different ?

Yes! When you do person.introduce() the caller is a person, so this.name is "Ankur"

But when you copy the function into fn and call it as fn(), there's no object in front of it so that this will goes back to the global object, which has no name property.

That's the entire trap people fall into. The function didn't change the calling context did.

One Thing to Remember

If you only take one thing from this post, let it be this:

this is decided when the function is called, not when it's defined.

That single sentence saved me from a lot of confusion. Where you write the function doesn't matter that what matters is how and where you call it.

That's pretty much the basics of this. There's more to it arrow functions handle this differently, and there's call, apply, bind to manually set it but if you get what's above, you've already cleared the part that trips most people up. I will also cover arrow functions and this in a separate post. Stay tuned.