You entered your interview room and the gatekeeper asks:

“Who called you?”

You show him the invitation letter, and he points you toward the interviewer.

That’s basically how this works in JavaScript.

The this keyword points to the object that invoked (called) the function.

Whenever a function is called, JavaScript internally asks:

“Who called this function?”

The answer becomes the value of this.

1. Global Context

In the global context, without any function call, this points to the global object of the environment.

Browser Environment

In browsers, the global object is window.

console.log(this);

Output

Window

Node.js Environment

Node.js behaves differently.

Node wraps your code inside a module wrapper function before execution and sets this to module.exports.

console.log(this);

Output

{}

Different Contexts of this

Global Context  → Global Object

Object Method   → Calling Object

Standalone Function
  ├─ Non Strict → Global Object
  └─ Strict     → undefined

2. this Inside Objects

Since this points to the caller object, inside object methods it refers to the object that called the method.

const user = {
  name: "Rahul",

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

user.greet();

Output

Rahul

Here:

this.name

ultimately becomes:

user.name

because user is the calling object.

Caller → Function Relationship

3. this Inside Functions

The value of this inside a function depends on how the function is called.

This is known as runtime binding.

3.1 Function Called Globally

If a function is called globally, then this behaves similarly to the global context.

Browser Environment

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

show();

Output

Window

Node.js Environment

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

show();

Output

{} // global object

Strict Mode

"use strict";

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

show();

Output

undefined

3.2 Function as a Method of an Object

If a function is called as a method of an object, then this points to that object.

const person = {
  name: "Aman",

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

person.sayHello();

Output

Aman

Here:

person ----calls----> sayHello()
           |
           ↓
         this

So:

this === person

How Calling Context Changes this

The same function can have different values of this depending on who calls it.

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

const user1 = {
  name: "Rahul",
  greet
};

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

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

Visual Understanding

user1 ----calls----> greet()
           |
           ↓
      this = user1


user2 ----calls----> greet()
           |
           ↓
      this = user2

Key Rule to Remember

this is not decided where the function is written.

this is decided by:

How the function is called.

Quick Summary

Final Takeaway

Whenever you get confused about this, ask:

“Who called the function?”

That caller becomes the value of this.