Understanding the `this` Keyword in JavaScript

When we start writing JavaScript, everything feels simple. Variables, functions, objects all good.

Then suddenly we see this.

And things start getting confusing.

Sometimes it works, sometimes it doesn’t. Same code, different output.

So what actually is this?

In this blog I will share how I understand this and why it behaves differently in different places.

---

What this actually represents

The easiest way to think about this is:

this means who is calling this function

Not where the function is written Not where it is defined

But who is calling it

That’s the whole game.

---

this in global context

If you use this outside any function:

console.log(this)

In browser, this points to:

window

So here:

this === window // true

So global level → this = global object

---

this inside an object

Now the interesting part.

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

user.greet()

Output:

Dhiraj

Why?

Because:

user is calling greet()

So:

this = user

Simple.

---

this inside a normal function

Now this is where confusion starts.

function show() {
  console.log(this)
}

show()

Here:

No object is calling this function

So in browser:

this = window

Because it falls back to global object.

---

Same function, different caller

Now see this carefully:

const obj1 = {
  name: "A",
  show() {
    console.log(this.name)
  }
}

const obj2 = {
  name: "B",
  show: obj1.show
}

obj1.show() // ?
obj2.show() // ?

Output:

A
B

Same function.

Different output.

Why?

Because caller changed

So:

• obj1.show() → this = obj1

• obj2.show() → this = obj2

This proves:

this depends on caller, not function

---

Calling context changes everything

Let’s break it more.

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

const fn = user.greet
fn()

Output:

undefined

Why?

Because now:

function is called directly no object is calling it

So:

this = window window.name is undefined

That’s why output is undefined

---

Simple way to remember

Just ask:

Who is calling this function?

That’s your this.

---

---

One more simple example

const car = {
  brand: "BMW",
  show() {
    console.log(this.brand)
  }
}

car.show()

car is calling → this = car

---

Where people get confused

Main confusion happens when:

• function is detached from object

• function is passed somewhere

• function is called without object

Because then:

this changes

---

this is not complicated.

We just overthink it.

Just remember one line:

this = who is calling the function