JavaScript this Keyword Explained

The this keyword is one of the most confusing topics in JavaScript.

The important rule is:

this depends on how a function is called,
not where the function is written.

Understanding this is important for:

Objects
Functions
Classes
Event Handlers
Arrow Functions
React
Interviews
What is this?

this is a special keyword that refers to the current execution context.

Simple meaning:

this points to the object that is calling the function.

Example:

const user = {
    name: "Venu",

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

user.greet();

Output:

Venu

Here, this refers to user.

Why Do We Need this?

Without this:

const user = {
    name: "Venu",

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

This works, but it tightly depends on the object name.

With this:

const user = {
    name: "Venu",

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

Now the method can refer to the current object dynamically.

How this Works
Function Call
     |
     v
Who called the function?
     |
     v
That object becomes this
this in Global Scope

In browser global scope:

console.log(this);

Output:

window

In Node.js, global behavior is different because Node modules have their own module scope.

this Inside Object Method
const employee = {
    name: "Venu",

    getName() {
        return this.name;
    }
};

console.log(employee.getName());

Output:

Venu

Here:

employee.getName()

means employee is calling the function.

So:

this = employee
this in Regular Function
function show() {
    console.log(this);
}

show();

In non-strict browser mode:

this = window

In strict mode:

"use strict";

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

show();

Output:

undefined
this Rule
obj.method()      -> this = obj

functionCall()    -> this = window or undefined in strict mode

new Constructor() -> this = new object

arrow function    -> this = outer scope
Losing this

Common issue:

const user = {
    name: "Venu",

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

const fn = user.greet;

fn();

Output:

undefined

Why?

Because function is called as:

fn();

not:

user.greet();

So this is no longer user.

this with Arrow Functions

Arrow functions do not have their own this.

They use this from the surrounding scope.

Example:

const user = {
    name: "Venu",

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

user.greet();

Output:

undefined

Why?

Because arrow function does not bind this to user.

Correct Object Method

Use regular method syntax:

const user = {
    name: "Venu",

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

user.greet();

Output:

Venu
Arrow Function Useful Case

Arrow functions are useful inside callbacks.

const user = {
    name: "Venu",

    greet() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

user.greet();

Output:

Venu

The arrow function uses this from greet().

this with Constructor Function
function User(name) {
    this.name = name;
}

const user = new User("Venu");

console.log(user.name);

Output:

Venu

When using new:

this points to the newly created object.
this with Class
class User {
    constructor(name) {
        this.name = name;
    }

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

const user = new User("Venu");

user.greet();

Output:

Venu
call()

call() invokes a function with a specific this.

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

const user = {
    name: "Venu"
};

greet.call(user);

Output:

Venu
apply()

apply() is similar to call(), but arguments are passed as an array.

function introduce(city, state) {
    console.log(`${this.name} lives in ${city}, ${state}`);
}

const user = {
    name: "Venu"
};

introduce.apply(user, ["San Antonio", "Texas"]);

Output:

Venu lives in San Antonio, Texas
bind()

bind() returns a new function with fixed this.

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

const user = {
    name: "Venu"
};

const boundGreet = greet.bind(user);

boundGreet();

Output:

Venu
call vs apply vs bind
Method	Executes Immediately	Arguments
call	Yes	Comma separated
apply	Yes	Array
bind	No	Returns new function
Real World Example
const button = {
    label: "Save",

    click() {
        console.log(`${this.label} clicked`);
    }
};

button.click();

Output:

Save clicked
Common Mistakes
Using Arrow Function as Object Method
const user = {
    name: "Venu",
    greet: () => console.log(this.name)
};

Avoid this when you need object-level this.

Passing Method Without Binding
const fn = user.greet;
fn();

Fix:

const fn = user.greet.bind(user);
fn();
Confusing Definition and Invocation

Wrong assumption:

this depends on where function is defined.

Correct:

this depends on how function is called.
Best Practices
Use regular functions for object methods.
Use arrow functions for callbacks when you want lexical this.
Use bind() when passing methods as callbacks.
Avoid relying on global this.
Use classes carefully with method binding.
Interview Questions
What is this in JavaScript?

this refers to the current execution context and depends on how a function is called.

Does arrow function have its own this?

No.

Arrow functions use lexical this from the surrounding scope.

What is the difference between call, apply, and bind?

call() and apply() execute immediately.

bind() returns a new function.

Why does this become undefined?

Because the method may be called as a normal function, not as an object method.

What does this refer to inside a constructor?

It refers to the newly created object.

Cheat Sheet
this Rules
----------

obj.method()
this = obj

normalFunction()
this = window or undefined in strict mode

new Function()
this = new object

arrowFunction()
this = outer lexical scope

call()
sets this and executes

apply()
sets this and executes with array args

bind()
sets this and returns new function
Summary

The this keyword is dynamic in JavaScript.

Key points:

this depends on how a function is called.
Object methods use the calling object as this.
Arrow functions do not have their own this.
Constructors use this for the new object.
call, apply, and bind manually control this.

Mastering this is essential for understanding objects, classes, callbacks, React, and advanced JavaScript interviews.