What Is this?

this refers to the object that is calling the function.

Simple rule:

"Who called the function?"

That usually determines this.

this in Global Context

In the browser global scope:

console.log(this);

Output

Window object

In Node.js:

{}

or module-related object.

this Inside an Object

When a function is called as an object method:

this = that object

Example

const user = {
  name: "Ali",

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

user.greet();

Output

Ali

Why?

Because:

user called greet()

So:

this = user

Caller → Function Relationship

flowchart LR
    A[user object] --> B[greet()]
    B --> C[this = user]

this Inside Normal Functions

In regular standalone functions:

Browser Example

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

show();

Output (Browser)

Window object

Node.js Example

Global object or undefined

depending on mode.

this Changes Based on Calling Context

The same function can have different this values.

Example

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

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

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

user1.greet();
user2.greet();

Output

Ali
Sara

Why?

Because different objects called the same function.

Different Contexts of this

Common Beginner Confusion

Incorrect thinking:

this belongs to function definition

Correct:

this depends on how function is called

Practical Object Example

const car = {
  brand: "Toyota",

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

car.showBrand();

Output

Toyota

Losing this Context

Problem example:

const user = {
  name: "Ali",

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

const fn = user.greet;

fn();

Output

undefined

Why Did This Happen?

Because:

fn() was called without object

So this changed.

Real-Life Analogy

Imagine:

Person speaks → "I"

Who "I" refers to depends on who is speaking.

Similarly:

this depends on caller

this Inside Constructor Functions

function User(name) {
  this.name = name;
}

const user1 = new User("Ali");

console.log(user1.name);

Output

Ali

Why?

With new:

this refers to newly created object

Arrow Functions and this

Arrow functions behave differently.

They do not create their own this.

Example

const user = {
  name: "Ali",

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

user.greet();

Output

undefined

Beginner Rule

For object methods:

Prefer regular functions

instead of arrow functions initially.

Simple Comparison

Practice Example

const student = {
  name: "Sara",

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

student.showName();

Output

Sara

Key Takeaways

Final Notes

this is one of the most important JavaScript concepts because it appears heavily in:

• Classes

• Objects

• React

• Event handlers

• Node.js applications

The core idea to remember:

`this` depends on how the function is called