Table of Contents

1. Introduction

2. Why this Exists

3. What this Represents

4. this in Global Context

5. this Inside Objects

6. this Inside Regular Functions

7. How Calling Context Changes this

8. Understanding the Caller

9. Losing the Context

10. this in Arrow Functions

11. Regular Function vs Arrow Function

12. Real-World Examples

13. Common Beginner Mistakes

14. Best Practices

15. Quick Summary Table

16. Final Thoughts

17. Practice Questions

---

Introduction

If you have started learning JavaScript, you have probably seen the this keyword in many places:

• Inside objects

• Inside functions

• Inside classes

• Inside event listeners

• Inside React components

• Inside callbacks

And most beginners get confused because the value of this changes depending on the situation.

Unlike many programming languages, JavaScript decides the value of this when the function is called, not when it is created.

But once you understand one simple idea, the entire concept becomes much easier.

---

The Golden Rule of this

this depends on HOW a function is called.

OR

this refers to the object that is calling the function.

This single rule helps you understand most situations in JavaScript.

---

Why this Exists

Imagine you are building an application with multiple users.

Without this, you would need separate variables for every user.

const user1Name = "Anil";
const user2Name = "Rahul";
const user3Name = "Kiran";

This quickly becomes difficult to manage.

Instead, JavaScript allows objects to access their own data using this.

const user = {
  name: "Anil",

  greet() {
    console.log("Hello " + this.name);
  }
};

user.greet();

Output:

Hello Anil

Here:

this.name

means:

user.name

This makes objects reusable and dynamic.

---

What this Represents

this represents the current execution context.

In simple words:

this points to the object that is currently calling the function.

The value of this is determined at runtime.

It depends on:

• How the function is called

• Who is calling the function

• The calling context

---

Understanding the Caller

The caller is the most important thing when learning this.

Look carefully at this example:

const user = {
  name: "Anil",

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

user.showName();

The caller is:

user

Because the function is called like this:

user.showName()

So:

this = user

---

Diagram: Caller Relationship

user  ------>  showName()
  |               |
  |               |
  ------ this -----

The object before the dot (.) becomes this.

---

this in Global Context

In browsers, the global object is window.

So if you write:

console.log(this);

Output:

Window object

That means:

this === window

is:

true

---

Global Context Example

var name = "Anil";

console.log(window.name);
console.log(this.name);

Output:

Anil
Anil

Because in browser global scope:

this === window

---

this Inside Objects

Inside object methods, this refers to the object itself.

Example

const person = {
  name: "Anil",

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

person.greet();

Output:

Anil

Because:

this === person

---

Multiple Objects Using the Same Function

One powerful thing about this is that the same function can work for multiple objects.

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

const user1 = {
  name: "Anil",
  greet
};

const user2 = {
  name: "Rahul",
  greet
};

user1.greet();
user2.greet();

Output:

Anil
Rahul

Why?

Because:

user1.greet()

makes:

this = user1

and:

user2.greet()

makes:

this = user2

---

Diagram: Different Calling Contexts

user1 -----> greet()
               |
               |---- this = user1

user2 -----> greet()
               |
               |---- this = user2

---

this Inside Regular Functions

Now let us look at normal functions.

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

test();

In Browser (Non-Strict Mode)

Output:

Window object

Because the global object calls the function.

---

Strict Mode Behavior

In strict mode, JavaScript behaves differently.

"use strict";

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

test();

Output:

undefined

Why?

Because strict mode prevents JavaScript from automatically using the global object.

This makes code safer.

---

How Calling Context Changes this

The most important thing to understand:

The same function can have different values of this.

Example

function showRole() {
  console.log(this.role);
}

const admin = {
  role: "Admin",
  showRole
};

const user = {
  role: "User",
  showRole
};

admin.showRole();
user.showRole();

Output:

Admin
User

Even though the function is the same, the caller changes.

---

Losing the Context

Sometimes this gets lost.

Example

const user = {
  name: "Anil",

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

const fn = user.greet;

fn();

Output:

undefined

Why?

Because now the function is called independently:

fn()

There is no object before the dot.

So the original context is lost.

---

Real-World Problem Example

This issue commonly happens with callbacks.

const user = {
  name: "Anil",

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

setTimeout(user.greet, 1000);

Output:

undefined

Because setTimeout calls the function separately.

---

this in Arrow Functions

Arrow functions behave differently.

Arrow functions do NOT create their own this.

Instead, they inherit this from the surrounding scope.

---

Arrow Function Example

const user = {
  name: "Anil",

  greet: () => {
    console.log(this.name);
  }
};

user.greet();

Output:

undefined

Why?

Because arrow functions do not use the object as this.

They inherit this from the outer scope.

---

Regular Function vs Arrow Function

Regular Function

const user = {
  name: "Anil",

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

Uses the caller object.

---

Arrow Function

const user = {
  name: "Anil",

  greet: () => {
    console.log(this.name);
  }
};

Does not use the caller object.

---

Best Practice

For object methods:

✅ Use regular functions

const user = {
  greet() {}
};

❌ Avoid arrow functions

const user = {
  greet: () => {}
};

---

Real-World Example: Music Player

const musicPlayer = {
  song: "Shape of You",

  play() {
    console.log("Playing " + this.song);
  }
};

musicPlayer.play();

Output:

Playing Shape of You

Here:

this.song

refers to:

musicPlayer.song

---

Real-World Example: Shopping Cart

const cart = {
  items: 3,

  showItems() {
    console.log("Items in cart:", this.items);
  }
};

cart.showItems();

Output:

Items in cart: 3

---

Common Beginner Mistakes

1. Using Arrow Functions as Object Methods

❌ Bad

const user = {
  name: "Anil",

  greet: () => {
    console.log(this.name);
  }
};

✅ Better

const user = {
  name: "Anil",

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

---

2. Forgetting About the Caller

Always ask:

Who is calling the function?

That decides the value of this.

---

3. Confusing this With the Function Itself

this does NOT refer to the function.

It refers to the object calling the function.

---

Quick Summary Table

Situation	Value of this
Global scope (browser)	window
Object method	The object itself
Regular function	window or undefined in strict mode
Arrow function	Inherited from parent scope
Event handler	The element receiving the event
Different caller	this changes

---

Easy Trick to Remember

Look at the object before the dot (.).

user.greet();

The object before the dot is:

user

So:

this = user

---

Final Example

const car = {
  brand: "BMW",

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

car.showBrand();

Output:

BMW

Because:

this = car

---

Conclusion

The this keyword is one of the most important JavaScript concepts.

At first, it feels confusing because its value changes.

But remember this simple rule:

this depends on how a function is called.

Key takeaways:

• this refers to the caller object

• Object methods use the object as this

• Regular functions behave differently

• Arrow functions inherit this

• The calling context changes the value of this

Once you focus on the caller, understanding this becomes much easier.

---

Practice Questions

1. What does this represent in JavaScript?

2. What is the value of this in global scope?

3. How does this behave inside objects?

4. Why does this change in different calling contexts?

5. What happens to this inside regular functions?

6. What is the difference between regular functions and arrow functions?

7. Why does this become undefined in strict mode?

8. What happens when an object method is stored in another variable?

9. Why should arrow functions be avoided as object methods?

10. How can you identify the value of this quickly?