Understanding the this Keyword in JavaScript

JavaScript’s this keyword is one of those concepts that confuses almost every developer at the beginning, not because it is complex by nature, but because it changes its meaning depending on how a function is called, and if you try to memorize rules instead of understanding the core idea, it quickly becomes frustrating.

So instead of boring definitions, let’s understand this using a One Piece analogy, because once you see it this way, everything becomes clear and actually fun to reason about.

The Core Idea of this

Before jumping into examples, remember this one simple rule:

this refers to the object that is calling the function.

Think of it like this:

In the One Piece world, whenever an action happens, the question is:

Who is performing this action?

That “who” is exactly what this represents in JavaScript.

Luffy Sets the Rule

Imagine Monkey D. Luffy as a function, and whoever calls Luffy determines his role.

If Luffy is called by the Straw Hat crew, he acts as their captain.

If Marines capture him (hypothetically), then the context changes.

So Luffy doesn’t define himself — the caller defines his role.

That’s exactly how this works.

this in Global Context

When code runs in the global scope, this refers to the global object.

In the browser:

console.log(this);

Output:

window

In our analogy:

If no crew is calling Luffy, he’s just standing in the world itself.

So this = global world

this Inside Objects

Now let’s say we have a pirate crew.

const luffy = {
  name: "Luffy",
  sayName: function () {
    console.log(this.name);
  }
};

luffy.sayName();

Output:

Luffy

Why?

Because:

luffy is calling sayName()

So:

this = luffy

One Piece Interpretation

Straw Hat crew calls Luffy:

“Captain, introduce yourself!”

Luffy responds:

“I am Luffy!”

Because the caller is the Straw Hat crew, so this points to Luffy.

Caller → Function Relationship (Diagram)

This is the most important diagram.

Always ask:

Who called the function?

this Inside Regular Functions

Now things get tricky.

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

sayHello();

Output (browser):

window

Why?

Because no object is calling it.

So default:

this = global object

One Piece Analogy

Luffy shouts something in the open sea.

Nobody called him.

So the world hears it, not a specific crew.

this = global

this Changes Based on Calling Context

This is where most confusion happens.

Look at this:

const zoro = {
  name: "Zoro",
  speak: function () {
    console.log(this.name);
  }
};

const sanji = {
  name: "Sanji"
};

sanji.speak = zoro.speak;

sanji.speak();

Output:

Sanji

Wait… what?

Why not Zoro?

Because:

Function was called by sanji

So:

this = sanji

One Piece Explanation

Zoro teaches a move.

Sanji uses the move.

Now Sanji is the one performing it.

So the identity becomes Sanji.

That’s exactly how this behaves.

Different Contexts of this (Visual)

1. Global Scope → this = window
2. Object Method → this = object calling it
3. Normal Function → this = global (or undefined in strict mode)
4. Reassigned Method → this = new caller 

this Inside Arrow Functions (Important)

Arrow functions behave differently.

They do NOT have their own this.

They take this from their surrounding context.

Example:

const luffy = {
  name: "Luffy",
  sayName: () => {
    console.log(this.name);
  }
};

luffy.sayName();

Output:

undefined

Why?

Because arrow function doesn’t use luffy as this.

It takes this from outside (global).

One Piece Analogy

Arrow function is like a messenger.

It doesn’t act on its own identity.

It follows the identity of where it came from.