Understanding the this keyword in JavaScript.

What this represents.

This is a very important topic in JavaScript because the this keyword exists only in JavaScript. Just like every language has control statements, this is something special that is found only in JavaScript.

Now let's understand what this is.

Basically, this refers to the current object at the time of calling it. With its help, we can access all the values ​​associated with that object.

But an important thing about this is that its value keeps changing depending on the current state. This means that it will return the same value regardless of the object it is pointing to at that time.

This may seem a little confusing at first, but don't worry. I'll explain everything step by step, and we'll understand it even more clearly in the next section.

• First thing to remember, this always works based on context. There are two types of contexts :-

• One is the context of your code file.

• The other is where your code is running.

For example:-

• If you run your code in a browser, you get one type of output.

• If you run your code in Node.js, you get a different output.

If you declare this globally :-

• In a browser, it refers to the window object.

• In Node.js, it refers to an empty object.

Also :-

• In a normal function, it behaves differently.

• In an arrow function, it behaves differently.

• We also have method and constructor functions within a class, where it behaves differently.

So, overall, it has many different behaviors, and it works according to the context to produce the final result.

Now, let's understand this in more detail in the next section.

this in global context.

• As I already explained in the previous section, this always works based on context and the current running environment. It executes and returns a result according to that.

• Now we have two environments:-

1. Browser.

2. Node.js

First, let's talk about Node.js :-

• When we declare or use this globally in a Node.js environment, it returns an empty object. Nothing more, just an empty object. That is the final result in this case.

Second , the browser environment :-

• When we use this globally in the browser, it refers to the global window object and give all its properties.

So this is how this keyword behaves in the global context.

console.log(this);

this inside objects.

Now let's understand how this works inside an object.

• If you have an object with multiple properties, then all those values ​​are accessible using this.

• Now, if you declare a regular function inside that object means create a method, then inside that function you can use this. That means you can access all the object's properties through this.

• Inside a method, you can write any logic and also manipulate the object's properties using this. But this will only work when you actually call that method.

• Important Point :- This is decided at calling time. It means whether this will refer to the object or not depends on how you call the function.

• If you take the function out of the object (detach it) and then call it separately, then this will become undefined. This happens because the function is no longer connected to the object, and this only works with the object context.

• So this is the basic idea of ​​this inside objects.

• Now, we talked about regular functions. But if a user declares an arrow function inside the object and uses this, will it access the object’s properties?

• The answer is no.

• We will discuss this in the next section, where we will see how this works inside functions and nested functions.

// Normal Function method

const obj = {
    name: "Nikhil",
    age: 19,
    added (){
      this.age++
      console.log(`Hello \({this.name} and your age is \){this.age}`);
    }
}

obj.added();

this inside functions.

As we know, we have two types of functions. Both have their own advantages and disadvantages. In the same way, when we talk about this inside functions, it behaves differently in both cases.

1. Normal function.

2. Arrow function.

Now let's discuss both one by one.

• First, normal function :- When we use this inside a normal function and call it, then, In Node.js, it points to the global object. In the browser, it points to the window object, because that is the global object in the browser.

• Now, arrow function :- Arrow functions do not have their own this. They also do not have any kind of binding. So when we use this inside an arrow function, it looks for this in the parent scope. If it finds any reference or value of this in the parent, it takes it from there and returns it. Otherwise, it shows undefined.

• Most of the time, the real difference between these two is clearly visible when we use them inside an object instance. For example, when we create a method using a normal function or an arrow function, then the value of this changes based on how it is defined.

So this is how this behaves inside normal functions and arrow functions.

// This inside normal functions

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

// This inside arrow functions

const arrow = () => {
   console.log(this);
}
arrow();

How calling context changes this.

this can completely change the result of your code based on how you write it.

• In the previous sections, we saw that this returns output according to context. Its behavior is different in classes, different in functions, and even a small change in code can make this lose its context.

• When you use arrow functions with this, you need to be careful about where you are using them. Because when the arrow function runs, it may not change the this context and can return undefined instead.

• So, this keeps changing its behavior based on different conditions and contexts.

• Now, you can look at the code example below to understand how this loses its context more clearly.

const obj = {
   name: "Nikhil",
   dettach (){
      console.log(`Hi ${this.name}`);
   }
}

obj.dettach();
const get = obj.dettach;
get();