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: "Nausheen",

  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: "Nausheen",

  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: "Nausheen",

  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: "Nausheen",
};

and:

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

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.

---

Quick Context Summary

Situation	this Value
Global scope (browser)	window
Object method	The object
Regular function	Global object / undefined
Arrow function	Inherits surrounding this

---

Assignment Practice

Try these yourself:

1. Create an object with a method using this
2. Call the method normally
3. Store the method in another object and call again
4. Create nested regular function
5. Replace nested function with arrow function

Observe how this changes. That’s where the real learning happens.

---

Final Understanding

At first, this feels unpredictable. But honestly… JavaScript is following one simple rule the entire time: this depends on who called the function.

Once that clicks…
object methods, constructors, classes, event handlers… everything starts making way more sense.
And suddenly… this stops feeling scary.