When should you use an arrow function?

Arrow functions shine whenever you need a callback that keeps the surrounding this. A regular function creates its own this binding, so inside a callback it no longer points at the object you expected. An arrow function has no this of its own — it reads the one from the scope where it was written.

The classic case is a method that schedules work:

class Timer {
  constructor() {
    this.seconds = 0;
  }

  start() {
    // Arrow: `this` is still the Timer instance.
    setInterval(() => {
      this.seconds += 1;
    }, 1000);
  }
}

Written with function () { ... } instead, this inside the interval would be undefined in modules/strict mode (or the global object otherwise), and this.seconds would throw. Before arrow functions you had to work around it with const self = this or .bind(this).

The second everyday use is short data transformations, where the concise body removes noise:

const prices = [10, 20, 30];
const withTax = prices.map((p) => p * 1.1);

When not to use one

• Object methods — this would refer to the enclosing scope, not the object.
• Constructors — arrow functions cannot be called with new.
• Functions needing arguments — arrows do not have it; use rest parameters (...args).
• Event handlers that need this as the element — a regular function gives you the DOM node.