this is a very ambiguous, complex and harrowing topic in javascript. This is my attempt to explain 'this' in javascript in a very simple, quick and easy way.

this was fine being a demonstrative pronoun, but the js developers had some unresolved problems that they inflicted upon all the world.

The this is an object in javascript and its value depends on how a function is called, not where it is defined.

The one question to answer when searching for this is:

"Who is calling this right now?"

The same function can produce different results depending on who calls it.

For example:

const person = {
  name: "Clark",
  greet() {
    console.log(this.name);
  }
};

person.greet();

Output:

Clark

Here:

• person called greet()

• Therefore this refers to person

this in the Global Context

This is where the problems begin.

When this is used outside any function or object, it refers to the global object (with some environment-specific differences).

In a browser:

console.log(this);

Output:

Window {...}

The browser's global object is window.

In Node.js environment:

console.log(this);

It does not refer to the global object. In modern Node.js modules, top-level this is different (often undefined in ES modules, or module.exports in CommonJS), so its behaviour depends on the module system you're using.

The important takeaway is:

• Browser → global object (window)

• Node.js → depends on the module type

this Inside Objects

this is used most inside objects.

Consider this object:

const car = {
  brand: "Toyota",

  showBrand() {
    console.log(this.brand);
  }
};

car.showBrand();

Output:

Toyota

Why?

Because car called showBrand(), and car has a key-object property named 'brand' with value of 'Toyota.'

So:

this → car

Notice that we did not write:

console.log(car.brand);

Using this makes the method reusable for other objects.

One more example:

const cat = {
  name: "Chiki",

  speak() {
    console.log(this.name + " meows");
  }
};

cat.speak();

Output:

Chiki meows!

Again,

cat called the method.

Therefore,

this is cat.

this Inside Regular Functions

Now things become a little different.

Consider:

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

greet();

Here the function is not called by any object.

So what happens?

In non-strict mode in browsers:

this → window

In strict mode:

this → undefined

That's why regular functions often surprise beginners.

The important point is:

No object called the function.

Therefore there isn't an object for this to refer to.

How the Calling Context Changes this

The most important rule in JavaScript is:

this depends on how the function is called.

Let's reuse the same function.

function sayName() {
  console.log(this.name);
}

Now create two objects.

const student = {
  name: "Alex",
  sayName
};

const teacher = {
  name: "Emma",
  sayName
};

Now call the function from both.

student.sayName();

Output:

Alex

Next:

teacher.sayName();

Output:

Emma

Notice something interesting.

The function is exactly the same.

Only the caller changed.

Therefore this also changed.

Think of this as the Caller

Imagine someone answers a phone by saying:

"Hello, who's calling?"

The answer depends on who made the call.

Similarly, a JavaScript function doesn't permanently belong to one object.

"Who called this function?"

Whatever object made the call becomes this.

Another Simple Example

const cat = {
  name: "Milo",

  introduce() {
    console.log("I am " + this.name);
  }
};

const rabbit = {
  name: "Snow",

  introduce: cat.introduce
};

cat.introduce();

Output:

I am Milo

Now:

rabbit.introduce();

Output:

I am Snow

The function didn't change.

Only the caller changed.

Therefore this changed as well.

A Common Mistake

Consider:

const user = {
  name: "John",

  greet() {
    console.log(this.name);
  }
};

const hello = user.greet;

hello();

Many beginners expect:

John

But that's usually not what happens.

When we assign:

const hello = user.greet;

The function is copied without its calling object.

Later we call:

hello();

Now no object is calling it.

So this is no longer user.

This is why this changes based on the calling context.

Key Rules to Remember

One simple question:

Who is calling this function?

Here's a 5 marks answer:

Situation	What this Refers To
Global context (browser)	window
Object method	The object calling the method
Regular function (non-strict browser)	window
Regular function (strict mode)	undefined
Same function called by different objects	The object that made the call

Conclusion

this is a topic that is always understood by errors. So make as many as you can. Hope you had a wonderful day, and a peaceful night shall await you.