JavaScript this Keyword: How It Works and When to Use It

By the end of this page, you will know that JavaScript this is usually determined by how a function is called, not where the function was written. You will be able to use this in object methods and classes, avoid common callback problems, and choose between regular functions and arrow functions.

this is a special JavaScript value available inside many functions. It usually refers to the object associated with the current function call.

The most important rule is:

For a regular function, this is determined by the call site: the code that calls the function.

For example, when user.greet() is called, this inside greet is user:

const user = {
  name: "Ava",
  greet() {
    return `Hello, ${this.name}!`;
  }
};

console.log(user.greet()); // Hello, Ava!

Here, this.name means user.name because user is the object before the dot in user.greet().

this is useful when code needs to work with the particular object that received a method call. Instead of writing separate functions for every user, product, or account, one method can refer to the current instance through this.

Think of a regular function as an employee who looks at who handed it the current task.

• In car.start(), the employee sees that car handed over the task, so this means car.
• In bike.start(), the same function can see that bike handed over the task, so this means bike.
• If the function is called by itself, such as start(), nobody is identified as the caller. In strict mode, this is undefined.

An arrow function is different: it is like an employee who always follows the instructions of the office where they were hired. It keeps the surrounding this rather than receiving a new one from its caller.

A method can use this to access properties on the object that called it:

const counter = {
  count: 0,

  increment() {
    this.count += 1;
    return this.count;
  }
};

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2

this.count refers to counter.count because increment was called as counter.increment().

The same reusable function can behave differently for different objects:

function describe() {
  return `${this.brand} ${this.model}`;
}

 phone = { : , : , describe };
 laptop = { : , : , describe };

.(phone.());  
.(laptop.()); 

Consider this example:

const playlist = {
  name: "Morning Focus",
  songs: 12,

  addSong() {
    this.songs += 1;
    console.log(`${this.name}: ${this.songs} songs`);
  }
};

playlist.addSong();

Execution trace:

1. JavaScript creates the playlist object with name, songs, and addSong.
2. playlist.addSong() calls the addSong method through playlist.
3. Because playlist is before the dot, this inside addSong is playlist.
4. reads , which is initially .

this commonly appears in these situations:

• Class instances: A ShoppingCart instance uses this.items and this.total to manage its own state.
• Object methods: A configuration object uses this to read related settings.
• UI event handlers: In a regular browser event listener, this can refer to the element receiving the event. event.currentTarget is often clearer and more reliable.
• Reusable methods: One function can operate on multiple compatible objects when called as their method.
• Framework and library code: Some older APIs and class-based code use this to refer to a component or instance.

Example: a simple cart class:

class ShoppingCart {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  itemCount() {
    return ..;
  }
}

In production code, developers use this mostly in methods and classes, while avoiding unclear or accidental bindings.

Use methods for object-owned behavior

const session = {
  userId: null,

  isAuthenticated() {
    return this.userId !== null;
  }
};

Use guard clauses with instance state

class FileUploader {
  constructor(file) {
    this.file = file;
  }

  upload() {
    if (!this.file) {
      throw new Error("A file is required.");
    }

    return `Uploading ${this.file.name}`;
  }
}

Preserve this in callbacks when necessary

A common pattern is an arrow callback inside a class method. The arrow captures the method's :

Losing this by separating a method from its object

"use strict";

const user = {
  name: "Ava",
  greet() {
    console.log(this.name);
  }
};

const greet = user.greet;
greet(); // TypeError: Cannot read properties of undefined

greet() is a plain function call, so it has no object receiver. Call user.greet() instead, or bind the method:

const greet = user.greet.bind(user);
greet(); // Ava

Using an arrow function as an object method when dynamic this is needed

const user = {
  name: "Ava",
  greet: () => console.log(.)
};

user.(); 

• this is a special value available in regular functions and methods.
• For regular functions, inspect how the function is called.
• object.method() means this is usually object.
• new Constructor() means this is the new instance.
• functionName() in strict mode means this is undefined.
• Arrow functions do not get their own this; they capture the surrounding one.
• Use method shorthand when an object method needs this:

const object = {
  value: 1,
  getValue() {
    return this.value;
  }
};

• Use arrow callbacks to retain a surrounding method's this:

setTimeout(() => .(), );

Is this the same as the current object in JavaScript?

Often, but not always. In object.method(), it is usually the object. In a plain function call, it is undefined in strict mode. Arrow functions inherit it from their surrounding scope.

Why is this undefined in my JavaScript function?

The function was likely called without an object receiver, such as fn() rather than object.fn(), and strict mode is active.

Should I use an arrow function for an object method?

Usually no if the method needs this to refer to the object. Use method syntax or a regular function. Arrow functions are useful for callbacks that should retain the surrounding this.

How do I keep this in a callback?

Use an arrow callback, such as setTimeout(() => this.run(), 0), or bind a regular method with this.run = this.run.bind(this).

What does this mean in a class constructor?

It refers to the new instance being created. Assignments like this.name = name store data on that instance.

• JavaScript functions — this behavior depends heavily on how functions are declared and called.
• Object methods — Methods commonly use this to access properties of their object.
• JavaScript classes — Class constructors and instance methods use this for instance state.
• Arrow functions — Arrow functions capture lexical this rather than receiving dynamic this.
• Scope and closures — Useful for understanding what arrow functions capture from surrounding code.
• call, apply, and bind — These methods explicitly control this for regular functions.
• Strict mode — It changes plain function-call behavior so this is undefined.
• Event handling — Event callbacks can have different this behavior depending on function type and API.