Understanding the this Keyword in JavaScript

The this keyword is one of the most confusing topics for beginners, but it is also one of the most important concepts in JavaScript.
You will see this everywhere — in objects, classes, events, methods, and frameworks like React, Node.js, and Express.

So, let’s understand this in the simplest way.

What Is this in JavaScript?

This refers to the object that is currently calling the function.

Its value depends on how and where the function is called, not on its definition.

Case 1: Inside an Object (Most Common)

When a function (method) is defined within an object, it refers to that object.

let student = {
    name: "Aman",
    course: "BCA",

    show() {
        console.log(this.name);
        console.log(this.course);
    }
};

student.show();

Output:

Aman
BCA

Here, this refers to student.

Case 2: this in a Regular Function (Global Context)

In normal functions (NOT inside any object),
this refers to the global object.

• In browsers ? window

• In Node.js ? {} (global object)

Example in browser:

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

show();

Output (browser):

window object

Case 3: this Inside an Event Listener

In event listeners, this refers to the element that received the event.

button.onclick = function() {
    console.log(this); // button element
};

Case 4: this with Arrow Functions (Very Important)

Arrow functions do NOT have their own this.
They take this from the surrounding (outer) scope.

Example:

let obj = {
    name: "Riya",
    show: () => {
        console.log(this.name);
    }
};

obj.show();

Output:

undefined

Because arrow functions do NOT bind this to the object.

Correct way (use normal function):

let obj = {
    name: "Riya",
    show() {
        console.log(this.name);
    }
};

obj.show();

Output:

Riya

Case 5: this Inside a Constructor Function

When using new, this refers to the newly created object.

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

let u1 = new User("Aman");

console.log(u1.name);

Output:

Aman

Case 6: this in Classes

class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    show() {
        console.log(this.name, this.age);
    }
}

let s1 = new Student("Meera", 20);
s1.show();

Output:

Meera 20

Classes use this to refer to the class object.

Why Arrow Functions Don’t Have this?

They are designed to keep this from the outer function.

Example:

let person = {
    name: "Aman",
    print() {
        let inner = () => {
            console.log(this.name);
        };
        inner();
    }
};

person.print();

Output:

Aman

Arrow function takes this from print(), which refers to person.

Common Mistakes With this

Mistake 1: Using Arrow Functions as Object Methods

let obj = {
    name: "Aman",
    show: () => {
        console.log(this.name);
    }
};

obj.show(); // undefined

Use regular function instead.

Mistake 2: Losing this in Callbacks

let user = {
    name: "Aman",
    show: function () {
        setTimeout(function () {
            console.log(this.name);
        }, 1000);
    }
};

user.show();

Output:

undefined

Because this inside setTimeout refers to the global object.

Fix: Use arrow function

let user = {
    name: "Aman",
    show: function () {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

user.show();

Output:

Aman

Example Program (Complete)

let car = {
    brand: "Honda",
    model: "City",
    detail() {
        console.log("Car:", this.brand, this.model);

        setTimeout(() => {
            console.log("Inside Timeout:", this.brand);
        }, 500);
    }
};

car.detail();

Output:

Car: Honda City
Inside Timeout: Honda

Arrow function keeps the correct this.

Real-Life Example: Object with Methods

let account = {
    owner: "Riya",
    balance: 1000,
    deposit(amount) {
        this.balance += amount;
        console.log("Balance:", this.balance);
    }
};

account.deposit(500);

Output:

Balance: 1500

Practice Tasks (Do It Yourself)

1. Create an object with name and age, and print them using this.

2. Create a constructor function for a product and use this inside it.

3. Write a method inside an object and observe how this works.

4. Try using arrow function inside an object method and see the result.

5. Create a class Student and use this to store and print details.