PrismitaLEARN · PRACTICE · GROW

What is the difference between an arrow function and a regular function?

JavaScript Functions & Scope Basic Fresher1–2 Yrs Conceptual 1 min read

Quick Answer

Arrow functions have no this of their own — they inherit it from the enclosing scope (lexical this). They also have no arguments object, can't be used as constructors (new), and have no prototype. Regular functions get this from how they're called.

The big one is this: an arrow function doesn't have its own this, it uses whatever this is in the surrounding code, which is exactly what you want in a callback. A regular function's this depends entirely on how it's called. Arrows also don't have the arguments object — you use rest parameters — and you can't new them. So I use arrows for callbacks and array methods, and regular functions for object methods where this should be the object, and for constructors.

  • Use an arrow for callbacks and array methods where you want this to stay as the outer this (React class methods, event handlers that access component state).
  • Use a regular function for object methods that need this to be the object, for constructors, and for generators.
  • Arrows can't be generators; use the rest parameter (...args) instead of arguments.
All JavaScript questions More on Functions & Scope