Understanding the this Keyword in JavaScript

1) What this Represents

In JavaScript, this refers to the object that is calling the function.

-->> Simple way to remember:
this = “Who called me?”

It does not always mean the same thing.
Its value changes depending on how the function is called.

---

2) this in Global Context

In the global scope, this usually refers to the global object.

In Browser:

console.log(this); // window

In Node.js:

console.log(this); // {}

📌 Important:

• In browsers → global object is window

• In Node.js modules → top-level this behaves differently

---

3) this Inside Objects

When a function is called as a method of an object, this refers to that object.

Example:

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

user.greet(); // Ritu

Why?

Because greet() is called by user.

-->> So here:
this === user

---

4) this Inside Regular Functions

Inside a normal function, this depends on how the function is called.

Example:

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

show();

In Browser (non-strict mode):

window

In Strict Mode:

"use strict";

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

show(); // undefined

📌 Important:

• Non-strict mode → this becomes global object

• Strict mode → this becomes undefined

---

5) How Calling Context Changes this

The value of this is determined by how the function is called, not where it is written.

---

A) Method Call:-

const person = {
  name: "Ritu",
  sayHi() {
    console.log(this.name);
  }
};

person.sayHi(); // Ritu

this = person

---

B) Standalone Function Call

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

sayHi();

this = global object (or undefined in strict mode)

---

C) Function Assigned to Another Object

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

const user1 = { name: "Ritu", greet };
const user2 = { name: "Aman", greet };

user1.greet(); // Ritu
user2.greet(); // Aman

Same function, different caller
So this changes based on caller

---

6) Arrow Functions and this

Arrow functions do not have their own this.

They inherit this from the surrounding scope.

Example:

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

user.greet(); // undefined (in most cases)

Arrow functions are not good for object methods when you need this.

Better:

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

user.greet(); // Ritu

Real-Life Example:-

Imagine a function says:

“Tell me my name.”

Who is “my”?

It depends on who called the function.

const student = {
  name: "Ritu",
  intro() {
    console.log(this.name);
  }
};

const teacher = {
  name: "Suraj",
  intro: student.intro
};

student.intro(); // Ritu
teacher.intro(); // Suraj

Diagrams:-

1. Caller → Function Relationship

user.greet()  --->  greet()
   |
   ---> this = user

---

2) Different Contexts of this

Global Scope
   this -> window

Object Method
   obj.method()
   this -> obj

Regular Function
   func()
   this -> window / undefined

Arrow Function
   this -> inherited from outer scope