Codectionary / Developer documentation / JavaScript

The this Keyword

this refers to the object that is currently executing a function, but its value depends entirely on how the function is called, not where it is defined. In a regular method call, this is the object before the dot. In a standalone function call, this is undefined in strict mode. Arrow functions do not have their own this - they inherit it from the enclosing scope.

Syntax

this.property

Examples

this in Object Methods

this refers to the object the method is called on.

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

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

The Common this Pitfall

Losing the correct this when a method is detached from its object.

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);
  }
};

Explicitly Setting this

Using call, apply, and bind to control what this refers to.

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

Runtime & versions

Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

ECMAScript specification

Specifications & further reading