CodeZettaInterview Hub

JavaScript · this · Mid-Level · Best Practice

When should you use an arrow function vs a regular method regarding `this`?

Short Interview Answer

Use arrows to preserve outer `this` (callbacks); use regular functions/methods when you want `this` set by the receiver or `new`.

Detailed Explanation

Arrow functions shine as callbacks inside methods/constructors where you need the enclosing `this` (`this.setState` style). They cannot be used as constructors and have no `arguments` object (use rest). Object methods that should use the calling object as `this` should be regular methods — an arrow as an object literal method would capture the outer `this` (often `undefined`/global), which is usually wrong. Class fields as arrows bind per instance (convenient for React) but cost memory vs prototype methods.

Example

const obj = {
  n: 1,
  regular() { return this.n; },
  arrow: () => this.n, // outer this, not obj
};
obj.regular(); // 1
obj.arrow(); // undefined (or global) in modules/strict

Interview Tip

State a rule: 'arrows for lexical this, methods for dynamic this.'

Common Mistake

Using arrow functions for every object method 'because modern'.

Did you know this answer?