this in Arrow Functions vs Regular Functions

this in Arrow Functions vs Regular Functions

The biggest difference between arrow functions and regular functions is how they handle this. Getting this wrong causes real bugs.

Regular Functions: this at Call Time

A regular function's this is determined by how it is called:

function Foo() {
  this.value = 1;
  setTimeout(function () {
    console.log(this.value); // undefined (this is window/undefined)
  }, 100);
}
new Foo();

The callback is a plain call, so this is the global object (or undefined in strict mode). It does not inherit from Foo.

Arrow Functions: this at Definition Time

Arrows do not have their own this. They inherit from the enclosing lexical scope:

function Foo() {
  this.value = 1;
  setTimeout(() => {
    console.log(this.value); // 1 (this is the Foo instance)
  }, 100);
}
new Foo();

The arrow captures this from Foo's scope, where this is the instance.

Common Bug: Method Defined as Arrow

const obj = {
  name: "Kunal",
  greet: () => console.log(this.name),
};
obj.greet(); // undefined

The arrow's this is the enclosing scope's this (the global/module scope), not obj. For methods, use regular functions:

const obj = {
  name: "Kunal",
  greet() { console.log(this.name); }, // regular function
};
obj.greet(); // "Kunal"

Common Bug: Method Defined as Regular, Used as Callback

const obj = {
  name: "Kunal",
  greet() { console.log(this.name); },
};
setTimeout(obj.greet, 100); // undefined (this is lost)

Fix with bind or an arrow wrapper:

setTimeout(obj.greet.bind(obj), 100); // "Kunal"
setTimeout(() => obj.greet(), 100);   // "Kunal"

Rule of Thumb

• Object methods: use regular functions (so this is the object).
• Callbacks inside methods/constructors: use arrows (so this is preserved).
• Top-level functions: use whatever you prefer; this is rarely needed.

The Takeaway

Regular functions get this at call time (from how they are invoked). Arrows inherit this lexically from where they are written. Use regular functions for object methods, arrows for callbacks inside methods.