The this keyword of JavaScript seems confusing to the beginners — but once you understand who is calling the function, everything becomes easy.

Golden Rule:
this always refers to the caller of the function.

---

🔹 1. What does this represent?

this is a special keyword which represent current execution context .

In Simple words :
this = "who call the function"

---

🔹 2. this in Global Context

When you use this in global scope:

console.log(this);

In Browser → window object
In Node.js → {} (empty object)

So:

• Browser: this === window

• Node: different behavior

---

🔹 3. this inside Objects

When function is inside the object:

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

user.greet();

Output: "Radhika"

Here, this = user object
because user call the greet function.

---

🔹 4. this inside Functions

In normal function this shows tricky behaviour :

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

show();

Browser → window
Strict mode → undefined

"use strict";

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

show(); // undefined

There is no specific caller here → default behavior

---

🔹 5. How Calling Context Changes this

Same function, different this:

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

const user1 = { name: "Rr", sayHello };
const user2 = { name: "Alex", sayHello };

user1.sayHello(); // Rr
user2.sayHello(); // Alex

Function are same
But caller changes → as this changes

---

🔹 Visual Understanding

user1 ----calls----> sayHello()  → this = user1

user2 ----calls----> sayHello()  → this = user2

So this depends on who calls the function, not where it is written

---

🔹 6. Common Mistake

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

user.greet();

Output: undefined

As we call inner() directly.
So this = global (or undefined in strict mode)

---

🔹 7. Fix Using Arrow Function

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

user.greet();

Output: "Rr"

Arrow function don't create their own this
They use this of their parent.

---

🔹 8. Quick Summary

Situation	this value
Global scope	window (browser)
Object method	Object itself
Normal function	window / undefined
Strict mode	undefined
Arrow function	Parent's this

---

🔹 Final Takeaway

this is never decided inside the function.
this is always decided at the time of calling function.

Remember this line:

“this is not about where the function is written, it's about who calls it.”

Hope you got the ides about this.

Thank you for reading this blog. I am open to feedback and suggestions.