# 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

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.