Understanding this keyword in javaScript

If you work in JavaScript, you have probably seen the this keyword many times. Many developers have a basic understanding of it, but there is still a lot of confusion around it because its behaviour changes depending on the current context.

What is this keyword :

Let’s understand the this keyword with an example. Think of this as an actor. An actor changes their role in every movie depending on the context of the movie.

Similarly, the this keyword also behaves like an actor because it changes its behaviour according to the current context in JavaScript.

Definition of this word :

this keyword is reference to the object of currently executing functions. its value is not static. It is determined at runtime based on how a function is called.

Now let's see behaviour of this keyword in various different context .

this in Global context :

In browser :this in the global context refers to the window object.

In Node.js, when you use this in the global context (at the top of a file, outside all functions), it refers to the module.exportsobject.

This happens because, before executing your file, Node.js wraps your code inside a function. So, it is not truly running in the global scope like in the browser.

Node.js internally wraps your code like this:

(function (exports, require, module, __filename, __dirname) {
  // your code here
});

So this is equal to module.exports

but when you print this at the top of the file (in global context).

console.log(this);

//output : {} output will be an empty object.

Because by default :

module.exports = {};

this inside objects :

When this is used inside an object method, it refers to the object that is calling the function.

Code example :

const user = {
  name: "John",
  greet: function () {
    console.log(this.name);
  }
};

user.greet();
// output : John

because user calling the function. this = user

so when you write this.name it is equal to user.name.

it clear that who is calling the function that is this .

const user = {
  name: "John",
  greet: function () {
    console.log(this);
  }
};

user.greet();
//output : { name: "Abhi", greet: [Function] }
// this = whole object.

this inside Nested Function : this is undefined inside nested functions .

const user = {
  name: "John",
  greet: function () {
    function inner() {
      console.log(this.name);
    }
    inner();
  }
};

user.greet();
//output : undefined

Detached Function : When you extract method from an object and call it separately.

const user = {
  name: "John",
  greet: function () {
    console.log(this.name);
  }
};

const fn = user.greet; // function detached

fn(); // called independently

// output : undefined 

when you extract the method from object. this is lost because you call that method without any object.

This inside Functions :

Regular Function (using function keyword) : Behaviour of this is depend on how the function is called.

this refers to the global object (window in browsers, globalin Node.js).

but it is undefined in "strict mode".

Function inside object:

const user = {
  name: "John",
  greet: function () {
    function inner() {
      console.log(this);
    }
    inner();
  }
};

user.greet();

Output: Browser → window Node.js → undefined

Because inner is a normal function not called by object.So this lost again.

Constructor call : when you call a constructor using new keyword this always refers to the newly created instance .

Arrow Functions : Arrow functions does not have their own this . they inherit their this from parent scope where it is defined.

const user = {
  name: "John",
  greet: function () {
    const inner = () => {
      console.log(this.name);
    };
    inner();
  }
};

user.greet();

Conclusion :

In this blog, we explored the behavior of the this keyword across different JavaScript environments. We also understood how this works inside functions, arrow functions, and objects.