# Understanding this in JavaScript (Simple Guide)

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.

```js
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 😏

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

student.printName();
```

Output:

```plaintext
Barun
```

* * *

### Why?

Because:

👉 `student.printName()` → caller is `student`

So:

👉 `this` = `student`

* * *

### Real Life Example

You:

```js
rahul.sayName()
```

👉 Rahul is speaking → “My name is Rahul”

```js
amit.sayName()
```

👉 Amit is speaking → “My name is Amit”

Function same…

But `this` changes.

* * *

# 3\. `this` inside Functions (Important ⚠️)

Now comes the confusing part.

```js
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

```js
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 🧠

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

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

👉 Caller decides identity

* * *

# 5\. Losing `this` (Classic Problem 😭)

```js
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`

```plaintext
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 😏)

```js
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 🚀