Stop 04 · JavaScriptTopics · 8/36

this keyword

In short

this is JavaScript's way of saying 'whoever called me'. It changes depending on how a function is called, which is why it confuses almost everyone at first.

A special reference whose value depends on how a function is called (method call, plain call, `new`, or `bind`/`call`/`apply`) — one of JS's most confusing quirks. The key is to reason from the call site: regular functions receive `this` based on invocation, while arrow functions capture `this` lexically from their surrounding scope.

The jaadu mascot and a friend each point at themselves while holding similar phones.

Think of it like this

The word 'mine'

When Priya says "this phone is mine", it's Priya's phone. When Rahul says the exact same sentence, it's Rahul's. The words don't change, the speaker does. With this, the caller decides the meaning, not the place the function was written.

Watch it happen

Who called hello()?

student

hello()

lost

student.hello()

1/5student is left of the dot, so inside hello, this is student.

The big ideas

What you need to know

Look left of the dot

In student.hello(), this is student. The object before the dot at call time is what this points to.

No dot, no owner

Call a function plainly, like hello(), and this is undefined in strict mode (modules and classes are strict).

Arrows borrow this

Arrow functions don't have their own this. They use the this of the code around them.

You can set it yourself

call, apply and bind let you choose this. bind returns a new function with this locked in.

See it in code

Walk through the code

1"use strict";2const student = {3  name: "Priya",4  hello() { return "Hi, I'm " + this.name; },5};6 7console.log(student.hello());   // "Hi, I'm Priya"8 9const lost = student.hello;10// lost();  // TypeError: Cannot read properties of undefined (reading 'name')11 12const fixed = student.hello.bind({ name: "Rahul" });13console.log(fixed());           // "Hi, I'm Rahul"

1/4A strict-mode object with a regular method that reads this.name.

Copying the method into lost cuts it off from student. There's no dot at call time, so this is undefined and reading .name fails.

Save yourself the pain

Common mistakes

Oops

Passing a method directly as a callback, like setTimeout(student.hello, 1000).

Do this instead

Wrap it so the dot stays: setTimeout(() => student.hello(), 1000), or pass student.hello.bind(student).

Oops

Writing object methods as arrow functions and expecting this to be the object.

Do this instead

Use the method shorthand hello() { } for object methods. Save arrows for callbacks inside them.

Your mission

Who is this?

~15 min

Quick check

const bike = { brand: "Royal Enfield", show() { return this.brand; } }; const scooty = { brand: "Honda", show: bike.show }; What does scooty.show() return?

Go deeper

1Log `this` inside a regular function vs an arrow function vs an object method. Validate your understanding by applying it in a small practical example.
2Practice `bind`, `call` and `apply` to explicitly set `this`. Test it with at least one normal case and one edge case so you can explain the behavior confidently.
3Learn why arrow functions in class methods are often used to avoid `this` bugs.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download