Alright… let’s talk about one of the most confusing things in JavaScript…

this 😵‍💫

Not because it is complex…

But because it behaves like that one friend who changes personality depending on who they are with.

---

So, what does this actually mean?

Technically (yes yes, MDN style)…

this refers to the object that is executing the current function.

Hmm… samajh aaya?

Nahi na…

So let’s understand it in our own Barun style.

---

In Simple Words

👉 this = “Who called me?”

बस… इतना ही।

---

Think Like This 👇

Imagine you are a waiter in a restaurant.

Customer calls:

“Bhaiya ek chai dena”

Now question is:

👉 Who called you?

• Table 1 → you serve Table 1

• Table 5 → you serve Table 5

You don’t decide your identity…

Caller decides your identity

Same thing happens with this.

---

1. this in Global Context

Sabse pehle simple case dekhte hai.

console.log(this);

In browser:

👉 this → window

In Node.js:

👉 this → {} (empty object)

---

Meaning?

Global level pe:

👉 this = global object

---

2. this inside Objects

Now things get interesting 😏

const student = {
  name: "Barun",
  age: 21,
  printName: function () {
    console.log(this.name);
  }
};

student.printName();

Output:

Barun

---

Why?

Because:

👉 student.printName() → caller is student

So:

👉 this = student

---

Real Life Example

You:

rahul.sayName()

👉 Rahul is speaking → “My name is Rahul”

amit.sayName()

👉 Amit is speaking → “My name is Amit”

Function same…

But this changes.

---

3. this inside Functions (Important ⚠️)

Now comes the confusing part.

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

show();

---

Output?

👉 In browser → window 👉 In strict mode → undefined

---

Why?

Because:

👉 No object called it

So default:

👉 this = global (or undefined in strict mode)

---

4. The Real Game — Calling Context

अब असली मज़ा यहाँ है 🔥

this is NOT about where function is written…

👉 It is about how function is called

---

Same Function, Different Results

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

const user1 = {
  name: "Barun",
  show: show
};

const user2 = {
  name: "Tiwary",
  show: show
};

user1.show(); // Barun
user2.show(); // Tiwary

---

Explanation

Function ek hi hai…

But caller alag hai:

• user1.show() → this = user1

• user2.show() → this = user2

---

Diagram Time 🧠

user1  ──calls──> show()
        this = user1

user2  ──calls──> show()
        this = user2

👉 Caller decides identity

---

5. Losing this (Classic Problem 😭)

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

const fn = user.greet;

fn(); // ❌ undefined

---

What happened?

👉 You removed the function from object

Now:

👉 Caller = nothing

So:

👉 this lost its identity

---

Golden Rule (Senior Dev Level 🧠)

👉 Don’t think:

❌ “Where is function defined?”

👉 Always think:

✅ “Who is calling the function?”

---

Visual Summary

Different Contexts of this

Global → window / global

Object Method → that object

Simple Function → global / undefined

Detached Function → lost this

---

Final Mental Model

If you remember ONLY one thing from this blog:

👉 this = caller of the function

बस।

---

Suggestions (Important for Interviews 💼)

✔ Always trace the caller ✔ Prefer simple object examples first ✔ Don’t overthink execution context ✔ Practice with small code snippets

---

Real World Analogy (Last One Promise 😅)

Think of this like a mic 🎤

Whoever holds the mic…

👉 That person becomes this

---

Tiny Assignment (Do It 😏)

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

const bike = {
  brand: "Yamaha",
  showBrand: car.showBrand
};

bike.showBrand(); // ?

👉 Answer in your head before running.

---

And yes…

If this blog helped you even a little…

👉 Share it with that friend who says:

“Bhai mujhe JS ka this samajh hi nahi aata”

अब आएगा 😏

---

Written in pure Barun style 😎 Keep learning… keep building 🚀