How do arrow functions differ from regular functions?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Arrow functions don't get their own this, arguments, or prototype, can't be used as constructors, and inherit this lexically from their surrounding scope.
Detailed explanation
The biggest difference is this. Regular functions receive this dynamically based on how they're called (as a method, standalone, with new, etc.), while arrows capture this from where they're written — perfect for callbacks inside methods where you want to keep referring to the object. Arrows also have no arguments object (use rest parameters instead), cannot be called with new (no [[Construct]] behavior or prototype property), and cannot be used as generators. They're always anonymous expressions. Because this is fixed, call/apply/bind cannot change an arrow's this. Use arrows for short callbacks and functional style; prefer regular functions (or methods) when you need dynamic this, constructors, or object methods that rely on being invoked via their owner.
Example
const timer = {
seconds: 0,
start() {
// arrow keeps `this` = timer from start()
setInterval(() => {
this.seconds++;
console.log(this.seconds);
}, 1000);
},
};
timer.start();
// Regular method form would lose `this` inside setInterval:
// setInterval(function () { this.seconds++; }, 1000); // NaN errorInterview tip
Lead with the lexical this difference, then list the missing features (arguments, prototype, new). A timer example makes it concrete instantly.
Common mistakes
- Using arrows as object methods and losing access to the object via this.
- Saying arrows are 'just shorter syntax' without mentioning binding differences.