Understanding the this Keyword in JavaScript

Have you ever written a JavaScript function and wondered why this suddenly becomes undefined… even though it worked perfectly just a moment ago?

That’s because this is one of the most confusing — yet powerful — concepts in JavaScript. Unlike most variables, this doesn’t depend on where it is written, but on how a function is called.

In this blog, we’ll break it down step by step with simple examples so you can finally understand how this really works.

What this represents

In JavaScript, this is a keyword that refers to the object executing the current function or the current execution context. The value of this depends on how a function is invoked (run) rather than how it is defined.

this in Global context

this keyword have changes it’s value, depending on the context. If you print the this in Node.js environment  it will return empty object ( {} ). And in this in browser environment it will return windows objects. (show below)

In strict mode, this context inside a regular function becomes undefined but to your surprise an arrow function will refer to the global object, but in the global scope it still refers to the global object.

this inside Objects

When a function is called as a method of an object, then the object will become the context for this in that case .

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

user.greet(); // Output: "Mehtab"
// Here this = user Because user is calling the function.
let greetings = user.greet() 
greeting() // output : undefined

Detached context

If you have noticed the undefined in the above code, do you know why . We got the right output when calling user.greet(), but the same method when called while holding in a variable, it returned undefined, it is because it losses in it’s context. It is actually called detached context. It’s value is determined at runtime based on the object method invocation.

Imagine you want to say hello to user after sometimes, like example given below,

setTimeout(obj.greet, 1000); loses context

But you can’t do this, because of detaching context (extracting this). You have to use bind method to attached object to use it. Like shown below

setTimeout(obj.greet.bind(obj), 1000);

this inside Functions

The value of this inside a function is determined by how the function is called rather than how it is defined. Normal function have this context, but Arrow functions do not have their this context, they inherit from their surrounding (lexical scope) where they are defined .

const obj = {
  name: "Mehtab",
  greet: () => {
    console.log(this.name);
  }
};

obj.greet(); // undefined, because arrow function don't have own this context 

How calling this changes context

So now you know about the context of this, but what if you have a function in another file and an object in other file and you want the function to have context of object, how can you do it. If you have read about call, bind, apply you will know . You can actually use this methods to give context to functions.  Let’s take an example

function greet() {
  console.log("Hello " + this.name);
}
const user1 = { name: "Mehtab" };

greet.call(user1); // Hello Mehtab

greet is a normal function which is using name variable inside it , now since it doesn't have name we will using call method to give this context to it.

Same as this you can use bind and apply as well . So we have seen how to change the context of this keyword and also how to give context to functions or objects .

this and globalThis

The behavior of this varies significantly based on execution context, strict mode, and the environment (browser vs. Node.js), whereas globalThis remains consistent.

this is a dynamic keyword that depends on how a function is called, whereas globalThis always refers to the global object (fixed).

GlobalThis always refer to global object, and does not depend on how the function is called, unlike this "use strict" .

function test() {
  console.log(this);       // undefined
  console.log(globalThis); // global object
}

Conclusion

The this keyword might feel tricky at first, but once you understand one simple rule — “Who is calling the function?” — everything starts to make sense. 

Whether it's inside objects, functions, or even when using call, bind, or apply, the value of this always depends on the calling context.

If you remember just this idea, you’ll avoid most common mistakes and write much more predictable JavaScript code.

Keep practicing with small examples, and this will stop being confusing — and start becoming useful.