Understanding the this Keyword in JavaScript

JavaScript has a handful of concepts that tease almost every developer at some point. this is one of them.

It looks simple, it shows up everywhere, and yet it behaves in ways that feel completely unpredictable until you understand one core idea.

Let's break it down.

---

What is this?

this is a special keyword in JavaScript that refers to the object that is currently calling the function.

That's it. That's the whole idea. this doesn't refer to the function itself. It doesn't refer to where the function was defined. It refers to who called it.

Think of it like this ( when someone calls your name, "you" respond. )

If your manager calls you, you're responding to your manager.

If your friend calls you, you're responding to your friend.

The caller determines the context.

---

this in the Global Context

When you're not inside any function or object you're just writing code at the top level this refers to the global object.

In browsers, that's window. In Node.js, it's global.

console.log(this); // In browser: Window {...}

Think of it like standing in the middle of an empty room. No one handed you a specific role. You just... exist. The room itself is your context.

console.log(this === window); // true (in browser)

this.username = "Samad";
console.log(window.username); // "Samad"

Output:

true
Samad

When you attach something to this at the global level, it becomes a property of the global object. That's why global variables can sometimes leak onto window it's all the same context.

---

this Inside Objects

Here's where this starts to actually do useful work.

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

const user = {
  name: "Samad",
  greet() {
    console.log("Hello, my name is " + this.name);
  }
};

user.greet();

Output:

Hello, my name is Samad

user.greet() the caller is user. So inside greet, this is user.

So this.name is "Samad".

This is the most natural use of this. It lets methods refer back to the object they belong to without hardcoding the object name.

---

this Inside Regular Functions

Here's where it gets slippery.

When you call a plain function not as a method, just functionName() so this defaults to the global object (or undefined in strict mode).

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

showThis(); // Window {...} in browser, undefined in strict mode

Output (non-strict):

Window { ... }

Output (strict mode):

undefined

No object called this function.

It was called standalone. So this has no specific caller it falls back to the global object, or gets cut off entirely in strict mode.

"use strict";

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

showThis(); // undefined

This catches a lot of people off guard. They define a method on an object, pull the function out, call it separately and suddenly this isn't what they expected.

---

How Calling Context Changes this

This is the most important thing to understand: this is not determined by where a function is defined. It's determined by how and where it's called.

Same function, different callers, different this.

const person = {
  name: "Samad",
  introduce() {
    console.log("I am " + this.name);
  }
};

person.introduce(); // Called as a method → this = person

const fn = person.introduce;
fn(); // Called as a plain function → this = global (or undefined in strict mode)

Output:

I am Samad
I am        ← this.name is undefined here

The function is identical in both cases. What changed is the calling context.

This is also why passing methods as callbacks can break this when the callback gets invoked later, it's no longer being called on the original object.

const timer = {
  name: "Countdown",
  start() {
    setTimeout(function () {
      console.log(this.name); // undefined - called by setTimeout, not timer
    }, 1000);
  }
};

timer.start();

Output:

undefined

setTimeout calls the function internally, not as timer.start(). So this loses the timer context entirely.

---

Wrapping Up

this stops being confusing the moment you stop asking "where is this function defined?" and start asking "who is calling this function right now?"

• Global context → this is the global object

• Inside an object method → this is that object

• Standalone function call → this is global (or undefined in strict mode)

• Calling context determines everything the same function behaves differently depending on how it's invoked

Once that clicks, a whole class of JavaScript bugs starts making sense.

FIN ✌️