How to Use 'this' in JavaScript

Use this when code inside an object method, class, or event handler needs access to the current context. The exact value depends on how the function is called, which makes call-site awareness the most important skill.

What you’ll build or solve

You’ll learn how to use this in JavaScript inside object methods, classes, and callbacks. You’ll also know why this changes based on function call style.

When this approach works best

This approach is the right choice when a function needs access to the object or instance that called it.

Common real-world scenarios include:

• Object methods
• Class instances
• DOM event handlers
• Timers and callbacks
• Reusable component methods

This is a bad idea when the function should always use the surrounding lexical scope. In that case, arrow functions are often cleaner.

Prerequisites

You only need:

• A JavaScript file or browser console
• Basic objects and functions knowledge

Step-by-step instructions

Step 1: Use this inside object methods

Inside an object method, this refers to the object before the dot.

const user = {
  name: "Alex",
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

user.greet();

This lets the same method work with the object’s own properties.

In classes, this refers to the current instance.

class User {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

What to look for:

• In object methods, this points to the calling object
• In classes, this points to the instance
• The call site decides the value
• Arrow functions do not create their own this
• Most bugs come from callbacks losing context

Examples you can copy

Object method

const cart = {
  total: 49,
  showTotal() {
    console.log(this.total);
  }
};

Class method

class Product {
  constructor(price) {
    this.price = price;
  }
}

DOM event

button.addEventListener("click", function () {
  console.log(this);
});

Common mistakes and how to fix them

Mistake 1: Using this inside an arrow method on an object

What the reader might do:

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

Why it breaks: arrow functions inherit this from the outer scope instead of the object.

Corrected approach:

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

Mistake 2: Losing this inside a callback

What the reader might do:

setTimeout(user.greet, 1000);

Why it breaks: the method runs without the original object as its caller.

Corrected approach:

setTimeout(() => user.greet(), 1000);

Mistake 3: Using this in a plain standalone function

What the reader might do:

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

Why it breaks: in strict mode, this becomes undefined.

Corrected approach:

Use object methods, classes, or explicit binding when context matters.

Troubleshooting

If this is undefined, check how the function was called.

If object methods lose context in callbacks, wrap them in an arrow callback or bind them.

If arrow functions behave strangely, remember they inherit outer this.

If class properties are missing, verify this.property is assigned in the constructor.

Quick recap

• this depends on call site
• In methods, it points to the calling object
• In classes, it points to the instance
• Arrow functions inherit outer this
• Most bugs come from callback context loss