The this Keyword

Syntax

this.property

Examples

const person = {
  name: "Alice",
  greet() {
    console.log(`Hi, I am ${this.name}`);
  }
};

person.greet(); // "Hi, I am Alice" - this === person

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

const greetFn = person.greet;
// greetFn(); // undefined - this is no longer bound to person

// Arrow functions solve this in callbacks, since they inherit this
const timer = {
  seconds: 0,
  start() {
    setInterval(() => {
      this.seconds++; // "this" correctly refers to timer
    }, 1000);
  }
};

function introduce() {
  console.log(`I am ${this.name}`);
}

const user = { name: "Charlie" };

introduce.call(user);   // "I am Charlie" - calls immediately with this = user
introduce.apply(user);  // same as call, but takes args as an array

const boundIntroduce = introduce.bind(user);
boundIntroduce(); // "I am Charlie" - permanently bound, callable later

Best practices

• Use regular functions for object methods where you need this to refer to the calling object
• Use arrow functions for callbacks inside methods where you want this to stay bound to the outer context
• Use .bind() when passing a method as a callback and you need to preserve its original this
• Avoid relying on this in top-level standalone functions - it is undefined in strict mode and easy to misuse

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation