Techie BabajiLearn to Code. Build Real Skills.
JavaScript · How JavaScript Works

this Keyword

“this” is decided by HOW a function is called, not where it is written. Once you remember that rule, this stops being mysterious.

Beginner 5 min Lesson 21 of 49 Runnable examples
Before you start:Object MethodsArrow Functions
0/49 in JavaScript
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 27, 2026

Related tutorials

Interview questions

Learning objectives#

  • Determine this for method calls
  • Recognise when this is lost
  • Understand arrow functions and this
  • Fix lost this with bind

Explanation#

Method call: in user.greet(), this is the object before the dot — user.

Plain call: if you copy the method into a variable and call greet(), there is no object before the dot. In strict mode this is undefined.

Arrow functions do not have their own this; they use the this of the surrounding code. That makes them ideal for callbacks inside methods.

bind creates a new function with this permanently fixed.

Code example: Who is “this”?#

JavaScriptWho is “this”? Runnable
'use strict';
const user = {
  name: 'Asha',
  greet() { return `Hi, I am ${this.name}`; },
  greetLater() {
    setTimeout(() => console.log('Arrow keeps this:', this.name), 0);
  },
};


console.log(user.greet());


const greet = user.greet;          // copied without the object
try { greet(); } catch (e) { console.log('Lost this:', e.message); }


const bound = user.greet.bind(user);
console.log(bound());


user.greetLater();
Expected output
Hi, I am Asha
Lost this: Cannot read properties of undefined (reading 'name')
Hi, I am Asha
Arrow keeps this: Asha
Opens this example in the full playground

Step-by-step explanation#

  1. user.greet() has user before the dot, so this.name is "Asha".
  2. greet() has nothing before the dot; in strict mode this is undefined, so reading .name throws.
  3. bind(user) returns a function whose this is always user.
  4. The arrow inside setTimeout uses greetLater’s this, which is user.

Real-world use case#

Passing object methods as event handlers or callbacks (button.addEventListener('click', obj.handle)) loses this — a very common bug fixed with bind or arrow functions.

Common mistakes#

Passing a method as a callback

setTimeout(user.greet, 0) calls greet without user. Use () => user.greet() or user.greet.bind(user).

Arrow functions as methods

An arrow function method cannot see the object as this.

Best practices#

  • Use method shorthand for object methods
  • Use arrow functions for callbacks inside methods
  • Use bind (or class field arrows) when passing methods around
  • Enable strict mode (ES modules and classes are strict automatically)

Remember this#

this = whoever is before the dot when the function is CALLED.

No dot → no this (undefined in strict mode).

Arrows don’t have their own this — they borrow it.

Practice exercise#

Your task: Fix this bug so it prints "Counter: 1": const c = { n: 0, inc() { this.n++; console.log('Counter:', this.n); } }; setTimeout(c.inc, 0);

Show solution
JavaScript Runnable
const c = { n: 0, inc() { this.n++; console.log('Counter:', this.n); } };
setTimeout(() => c.inc(), 0); // or setTimeout(c.inc.bind(c), 0)
Opens this example in the full playground

Mini quiz#

this Keyword quizMultiple choice Question 1 of 1

In obj.method(), what is this?

Score so far: 0/0

Want more? Practise all JavaScript MCQs · JavaScript interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.