The this keyword in JavaScript

If there is one keyword in JavaScript that causes most confusion for developers, it is this. In natural language, the word "this" gets its meaning from context. If someone says, "Look at this," you have to see what they are pointing at to understand what they mean.

this works the exact same way. It is simply a reference to caller of function. Instead of trying to memorize rules, the easiest way to master this is to always ask one question -> Who is calling this function right now?

What this Represents

this is a special identifier that is defined inside the scope of every function. It points to the object that is executing the current function.

You can think of this as the subject of the sentence. If user.speak() is the sentence, the user is the subject doing the speaking. Therefore, inside the speak function, this refers to the user.

this in the Global Context

Before we even put this inside a function lets look at it in the global execution space.

When you use this outside of any function, it refers to the global object. In a web browser environment, the global object is the window.

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

this.color = "Blue";
console.log(window.color);    // "Blue"

this Inside Objects

The most common place to use this is inside an object method. When a function is stored as a property of an object we call it a method. When you call that method this points to the object that owns the method.

const user = {
  name: 'Shushil',
  role: 'Developer',
  introduce: function() {
    // 'this' points to the user object
    console.log(`Hi, I am \({this.name} and I am a \){this.role}.`);
  }
};

// The user object is calling the function
user.introduce(); // Output: "Hi, I am Shushil and I am a Developer."

In the example above because user is directly to the left of the dot when introduce() is called this becomes the user object.

this Inside Regular Functions

What happens when a function isnt attached to an object ?

If you call a standalone function, there is no explicit object calling it. In this scenario, the behavior depends on whether you are using JavaScript's "strict mode."

Execution Mode	What this refers to
Non-Strict Mode	The global object (window in browsers)
Strict Mode ("use strict";)	undefined

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

// Called as a standalone function, not an object method
showContext(); 
// Output: Window {...} (or undefined in strict mode)

How Calling Context Changes this

This is where this gets its reputation for being tricky. this is not assigned when a function is written it is assigned when a function is called.

You can take a method directly out of an object assign it to a new variable, and the value of this will completely change because the caller has changed.

The "Left of the Dot"

Let's see what happens when a function loses its context:

const player = {
  score: 100,
  printScore: function() {
    console.log(`Score: ${this.score}`);
  }
};

player.printScore(); // Output: "Score: 100" (Caller is 'player')

// Now, we extract the function into a standalone variable
const standalonePrint = player.printScore;

// We call it without an object to the left of the dot
standalonePrint(); // Output: "Score: undefined"

Why did it output undefined?

Because when we executed standalonePrint() there was no object calling it. It became a regular standalone function call. this fell back to the global object and since window.score does not exist it returned undefined.

Summary Rule of Thumb

To instantly know what this is look at the exact moment the function is executed:

• If there is a dot before the function call (e.g., obj.method()) this is the object to the left of the dot.

• If there is no dot (e.g., method()) this is the global object (or undefined in strict mode).

Thanks for Reading.