Functionsbeginner
Arrow Functions vs Regular Functions
Syntax differences aside, arrow functions differ from regular functions in how they bind this, whether they can be constructors, and whether they have their own arguments object.
Arrow functions, introduced in ES6, are often taught as 'shorter syntax for functions,' but the meaningful differences from regular functions go well beyond syntax, and interviewers specifically probe these differences because misunderstanding them causes real bugs in callback-heavy code.
A regular function's `this` is like an actor who plays whatever role they're handed at each show (dynamic per performance); an arrow function is like an actor's own personality peeking through no matter the costume — it never actually changes based on where it's used.
Key Concepts
1
The most important difference is how this is determined. A regular function's this is dynamic — it's determined by how the function is *called* (as a method, with call/apply/bind, or as a bare function call), which means the same function can have a different this depending on the call site. An arrow function has no this of its own at all; it lexically inherits this from the enclosing scope at the time it was defined, exactly like a regular variable would be looked up via the scope chain. This makes arrow functions ideal for callbacks inside methods where you want this to keep referring to the enclosing object, avoiding the classic 'this is undefined inside my callback' bug.
thiscallapplybind
2
Arrow functions also cannot be used as constructors — calling one with new throws a TypeError — and they don't have their own arguments object, super, or new.target; referencing arguments inside an arrow function looks it up in the enclosing non-arrow function's scope instead, if one exists. Regular functions get this, arguments, and all of that rebound freshly on every call, based purely on how they're invoked.
newTypeErrorargumentssupernew.target
3
The practical rule of thumb many teams follow: use arrow functions for callbacks and anything that should inherit the surrounding this (array methods inside class methods, event handler callbacks that need the component's this), and use regular functions (or method shorthand) for object methods and anything that needs its own dynamic this, arguments, or that needs to be a constructor.
thisarguments