What is the difference between arrow functions and regular functions?

Question

Accepted Answer

Arrow functions are a compact syntax introduced in ES6, but they differ from regular functions in several important behaviours, not just appearance. The biggest distinction is how they treat this . Binding of this Regular functions get their own this , determined by how they are called. Arrow functions do not; they inherit this lexically from the surrounding scope. This makes arrows ideal for callbacks inside methods or constructors. class Timer { constructor() { this.secs = 0; setInterval(() => { this.secs++; }, 1000); // "this" is the Timer } } The arguments object Regular functions expose an arguments object containing all passed-in arguments. Arrow functions do not; use rest parameters ( ...args ) instead. Usage as constructors Regular functions can be called with new ; arrow functions cannot. An arrow function has no [[Construct]] internal method and no prototype property, so new Arrow() throws a TypeError . The new.target meta-property Arrows have no new.target binding of their own and inherit it from the enclosing function, which is useful when building constructor helpers. Methods on objects Arrows are a poor choice for object methods that need to reference the owning object, because this will point to whatever was in scope at definition time — typically the module or global context. const user = { name: "Ada", greet: () => console.log(this.name) // undefined }; Implicit return and compact syntax A single-expression arrow omits braces and returns the expression automatically: const double = x => x * 2 . Regular functions always require return . Arrows with a single parameter can even drop the parentheses. Hoisting Function declarations are hoisted fully, so they can be called before their definition. Arrow functions, assigned to const or let , sit in the temporal dead zone and are not usable before their declaration line. Quick choice guide Use arrows for short callbacks, inside array methods, and whenever you want to preserve the surrounding this . Use regular functions for object methods that depend on their caller, for constructors, and whenever you need arguments or new . this is the #1 difference: arrow functions inherit this lexically. Show the setTimeout callback use case (why arrows are useful). Know the three things arrows cannot do: own this, arguments object, and constructor (new). Arrow functions as object methods is a common bug to demonstrate.