Understanding the `this` Keyword in JavaScript

The most confusing word in JavaScript — explained by asking one simple question.

---

If there's one concept that made me stare at my screen in genuine confusion, it's this. Not because the idea is complicated, but because this changes its meaning depending on where and how you use it. The same keyword can refer to completely different things in different situations.

I'd write this.name inside a function and get undefined. Then I'd write the exact same thing inside an object method and get the correct value. Why? What changed? Is JavaScript just messing with me?

Turns out, no. There's a clear rule. And once I learned it in the ChaiCode Web Dev Cohort 2026, this stopped being scary and started making complete sense. Let me share that mental model with you.

---

What Does this Represent?

Here's the one-line explanation that makes everything click:

this refers to the object that is calling the function.

That's it. Not where the function was written. Not where it was defined. But who is calling it at the moment of execution.

Think of it like the word "I" in English. When I say "I am Pratham," the word "I" refers to me. When you say "I am [your name]," the same word "I" refers to you. The word doesn't change — the speaker changes.

this works the same way. It's a pronoun for the caller.

"Who is calling this function right now?"

The answer to that question IS the value of `this`.

---

this in the Global Context

When you use this outside any function or object — just floating in the global scope — it refers to the global object.

In the Browser

console.log(this); // Window object
console.log(this === window); // true

In Node.js

console.log(this); // {} (module's exports object in Node)

Global Variables and this

var name = "Pratham"; // var attaches to the global object

console.log(this.name); // "Pratham" (in browser)
console.log(window.name); // "Pratham" (same thing)

Note: let and const do not attach to the global object. Only var does.

let age = 22;
console.log(this.age); // undefined — let doesn't attach to window

In practice, you'll rarely use this in the global context deliberately. It's mostly important for understanding why things behave unexpectedly.

---

this Inside Objects — Where It Makes the Most Sense

This is where this is the most intuitive. When a function is called as a method of an object, this refers to that object.

const user = {
  name: "Pratham",
  age: 22,
  greet() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
  },
};

user.greet(); // "Hi, I'm Pratham and I'm 22 years old."

Who is calling greet()? → user is. So this = user.

That means this.name is user.name → "Pratham", and this.age is user.age → 22.

Another Example

const car = {
  brand: "Toyota",
  model: "Camry",
  year: 2024,
  describe() {
    return `${this.year} ${this.brand} ${this.model}`;
  },
};

console.log(car.describe()); // "2024 Toyota Camry"

Who called describe()? → car did. So this = car.

Multiple Objects, Same Function

Here's where it gets interesting — the same function can be used by different objects, and this changes accordingly:

function introduce() {
  console.log(`I'm ${this.name} from ${this.city}`);
}

const person1 = { name: "Pratham", city: "Delhi", introduce };
const person2 = { name: "Arjun", city: "Mumbai", introduce };

person1.introduce(); // "I'm Pratham from Delhi"
person2.introduce(); // "I'm Arjun from Mumbai"

Same function. Different callers. Different this.

Visual: Caller → Function Relationship

person1.introduce()
   ↑         ↑
 caller    method
   │
   └──→ this = person1
         └──→ this.name = "Pratham"
         └──→ this.city = "Delhi"

person2.introduce()
   ↑         ↑
 caller    method
   │
   └──→ this = person2
         └──→ this.name = "Arjun"
         └──→ this.city = "Mumbai"

---

this Inside Regular Functions

Here's where things get confusing — and where most beginners trip up.

When a regular function is called on its own (not as a method of an object), this defaults to the global object in non-strict mode, or undefined in strict mode.

Non-Strict Mode

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

showThis(); // Window (in browser) — no one is calling it, so this = global

Who is calling showThis()? → Nobody specific. There's no object.showThis(). So this falls back to the global object.

Strict Mode

"use strict";

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

showThis(); // undefined — strict mode doesn't default to global

Strict mode is more honest about it: if no one is explicitly calling the function, this is undefined instead of silently becoming the global object.

The Classic Gotcha: Nested Functions

const user = {
  name: "Pratham",
  greet() {
    console.log(`Hello, ${this.name}`); // ✅ Works — this = user

    function inner() {
      console.log(`Inner: ${this.name}`); // ❌ undefined!
    }
    inner();
  },
};

user.greet();
// "Hello, Pratham"
// "Inner: undefined"

Wait, what? inner() is called inside a method of user, so why isn't this still user?

Because inner() is called as a standalone function, not as user.inner(). There's no object before the dot. So this defaults to the global object (or undefined in strict mode), where name doesn't exist.

The Fix: Arrow Functions or that/self

Arrow function fix (modern, preferred):

const user = {
  name: "Pratham",
  greet() {
    const inner = () => {
      console.log(`Inner: ${this.name}`); // ✅ "Pratham"
    };
    inner();
  },
};

user.greet(); // "Inner: Pratham"

Arrow functions don't have their own this. They inherit this from the surrounding scope — which in this case is greet(), where this is user. Problem solved.

that/self fix (older pattern, still common):

const user = {
  name: "Pratham",
  greet() {
    const that = this; // Save the reference

    function inner() {
      console.log(`Inner: ${that.name}`); // ✅ "Pratham"
    }
    inner();
  },
};

user.greet(); // "Inner: Pratham"

You save this into a regular variable (that or self) before the inner function, so it's accessible via normal closure rules.

---

How Calling Context Changes this

This is the key insight: this is NOT determined by where a function is written. It's determined by HOW the function is called.

Let me prove it:

const user = {
  name: "Pratham",
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  },
};

// Called as a method — this = user
user.greet(); // "Hi, I'm Pratham" ✅

// Extracted into a variable — context is lost
const greetFn = user.greet;
greetFn(); // "Hi, I'm undefined" ❌ (or error in strict mode)

When we assign user.greet to greetFn, we're taking the function out of the object. Now greetFn() is called without any object in front of it. No caller → this falls back to global → this.name is undefined.

The Different Calling Contexts — A Summary

┌─────────────────────────────────────────────────────────────┐
│              HOW IS THE FUNCTION CALLED?                     │
├─────────────────────┬───────────────────────────────────────┤
│ Calling Pattern      │ What `this` refers to                │
├─────────────────────┼───────────────────────────────────────┤
│ obj.method()         │ obj (the object before the dot)      │
│ function()           │ global object (or undefined strict)  │
│ arrow function       │ inherited from surrounding scope     │
│ new Constructor()    │ the new object being created         │
│ .call(obj) / .apply(obj) │ explicitly set to obj           │
│ .bind(obj)           │ permanently set to obj               │
├─────────────────────┴───────────────────────────────────────┤
│                                                             │
│  The SIMPLE RULE: Look at what's LEFT of the dot.           │
│  person.greet() → this = person                             │
│  car.start()    → this = car                                │
│  greet()        → this = ??? (no dot = global/undefined)    │
│                                                             │
└─────────────────────────────────────────────────────────────┘

---

Arrow Functions and this — The Exception

Arrow functions are the one case where the "who's calling" rule doesn't apply. Arrow functions don't have their own this. They permanently inherit this from whatever scope they were defined in.

const team = {
  name: "ChaiCode",
  members: ["Pratham", "Arjun", "Priya"],
  listMembers() {
    // Arrow function inherits `this` from listMembers()
    this.members.forEach((member) => {
      console.log(`${member} is on team ${this.name}`);
    });
  },
};

team.listMembers();
// "Pratham is on team ChaiCode"
// "Arjun is on team ChaiCode"
// "Priya is on team ChaiCode"

If we used a regular function inside forEach, this.name would be undefined because the callback wouldn't have team as its caller. Arrow functions bypass this problem entirely.

When NOT to Use Arrow Functions

Don't use arrow functions as object methods:

// ❌ Bad — arrow function as method
const user = {
  name: "Pratham",
  greet: () => {
    console.log(`Hi, ${this.name}`); // undefined!
  },
};

user.greet(); // "Hi, undefined"

Why? Because the arrow function doesn't get this from user. It inherits this from the surrounding scope, which is the global scope. And this.name in the global scope is undefined.

// ✅ Good — regular function as method
const user = {
  name: "Pratham",
  greet() {
    console.log(`Hi, ${this.name}`); // "Pratham"
  },
};

Rule of thumb: Use regular functions for object methods. Use arrow functions for callbacks inside those methods.

---

Let's Practice: Hands-On Assignment

Part 1: this in Object Methods

const student = {
  name: "Pratham",
  course: "Web Dev Cohort 2026",
  introduce() {
    console.log(`I'm ${this.name}, enrolled in ${this.course}`);
  },
};

student.introduce(); // "I'm Pratham, enrolled in Web Dev Cohort 2026"

Part 2: Same Function, Different Callers

function displayInfo() {
  console.log(`${this.title} by ${this.author}`);
}

const book1 = { title: "Clean Code", author: "Robert Martin", displayInfo };
const book2 = { title: "Eloquent JS", author: "Marijn Haverbeke", displayInfo };

book1.displayInfo(); // "Clean Code by Robert Martin"
book2.displayInfo(); // "Eloquent JS by Marijn Haverbeke"

Part 3: The Lost Context Problem

const app = {
  name: "FeedPulse",
  start() {
    console.log(`${this.name} is starting...`);
  },
};

app.start(); // "FeedPulse is starting..." ✅

const startFn = app.start;
startFn(); // "undefined is starting..." ❌ — context lost!

Part 4: Arrow Function Fix

const playlist = {
  name: "Chill Vibes",
  songs: ["Lo-fi Beat", "Ocean Waves", "Night Drive"],
  display() {
    this.songs.forEach((song) => {
      console.log(`${song} — from "${this.name}"`);
    });
  },
};

playlist.display();
// "Lo-fi Beat — from "Chill Vibes""
// "Ocean Waves — from "Chill Vibes""
// "Night Drive — from "Chill Vibes""

---

Key Takeaways

1. this refers to the object that is calling the function. Ask: "What's to the left of the dot?"
2. In the global context, this is the global object (window in browsers). In strict mode standalone functions, this is undefined.
3. Inside object methods, this is the object that owns the method. user.greet() → this = user.
4. In regular standalone functions, this loses its context and falls back to global. Extracting a method from an object also loses context.
5. Arrow functions don't have their own this — they inherit it from the surrounding scope. Use them for callbacks, not for object methods.

---

Wrapping Up

this is one of those concepts that seems unnecessarily complicated until you learn the one rule that governs it: this is determined by the caller, not the author. Once that clicks, you stop guessing and start knowing what this will be in any situation.

I'm working through these concepts in the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and understanding this became critical the moment we started working with object methods, event handlers, and class-based patterns. It's a fundamental piece of JavaScript that touches everything.

Connect with me on LinkedIn or visit PrathamDEV.in. More articles on the way as I keep building and learning.

Happy coding! 🚀

---

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode