Understanding the this Keyword in JavaScript

If there’s one JavaScript topic that confuses almost everyone at the beginning… it’s this.

Honestly, when I first saw code like this:

console.log(this);

…I thought: “Okay but… who exactly is this?”

And the confusing part is: this changes depending on how a function is called. Same function. Different caller. Different this.
Which feels weird initially.

But once you stop thinking of this as something magical… and start thinking of it as: “Who called this function?”

Everything suddenly starts making sense.

---

What Does this Represent?

The easiest way to understand this is:

this = the object that is calling the function

That’s it. Not where the function is written. Not where it was created.
It depends on HOW the function is called. And this tiny detail changes everything.

---

this in Global Context

Let’s start simple.

console.log(this);

If you run this in the browser:

this refers to the window object.

this → window

Because in the browser, the global object is window.

Why Does This Happen?

Because globally… there’s no specific object calling the code.

So JavaScript defaults to the global object.

---

this Inside an Object

Now this is where things start getting interesting.

const user = {
  name: "Sumit",

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

user.greet();

Output:

Nausheen

Why?

Because:

user.greet()

user is calling the function.

So inside that function:

this → user

Which means:

this.name

becomes:

user.name

---

This Is the Biggest Understanding

Most beginners think:

"this belongs to the function"

No.

this depends on the caller.

And that’s a HUGE difference.

Visual Understanding

user ----calls----> greet()

therefore:

this = user

---

Same Function, Different this

This is where JavaScript becomes interesting.

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

Now call it normally:

sayHello();

this becomes global object (window in browser)

But now:

const person = {
  sayHello,
};

person.sayHello();

Now:

this becomes person

Same function.
Different caller.
Different this.

And this is the core behavior of this.

---

this Inside Regular Functions

Here’s something important.

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

test();

In browsers (non-strict mode):

this → window

But in strict mode:

"use strict";

this becomes undefined

Why?

Because JavaScript avoids accidentally attaching things to the global object in strict mode.

---

Inside Nested Functions

Look at this:

const user = {
  name: "Sumit",

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

    inner();
  },
};

user.greet();

What do you expect?
Most people think: this will still be user

But nope.
Inside inner(): this becomes global object (or undefined in strict mode)

Why?
Because:

inner()

is being called like a normal function.

Not as:

user.inner()

And remember: caller decides this

---

This Is Why Arrow Functions Became Popular

Arrow functions behave differently. They do NOT create their own this.
Instead: they inherit this from surrounding scope.

Example:

const user = {
  name: "Sumit",

  greet() {
    const inner = () => {
      console.log(this.name);
    };

    inner();
  },
};

user.greet();

Output:

Nausheen

Because arrow function borrowed:

this → user

from greet()

---

Real Mental Model

This makes everything easier:

Who called the function?
          ↓
That becomes `this`

---

Another Simple Example

const car = {
  brand: "BMW",

  showBrand() {
    console.log(this.brand);
  },
};

car.showBrand();

Here:

car called showBrand()

So:

this = car

---

Why this Actually Matters

Without this… objects wouldn’t be able to refer to their own data dynamically.

Imagine this:

const user1 = {
  name: "Sumit",
};

and:

const user2 = {
  name: "Rohan",
};

If methods used fixed object names instead of this… code wouldn’t be reusable.

But with this:

console.log(this.name);

the same method works for multiple objects.

---

Common Beginner Mistake

People think:

this = current object

Not always. this depends on calling context. That’s the real rule.