Arrow functions are the modern standard for writing concise function expressions in JavaScript. Introduced in ES6, they combine compact syntax with lexical 'this' binding — solving one of the language's oldest headaches.
1From Traditional to Arrow — The Syntax Transformation
Arrow functions use the => (fat arrow) symbol instead of the function keyword. The transformation is straightforward: remove the function keyword, place => after the parameter list, and keep the body. This alone saves characters, but the real gains come from implicit return and parameter shortcuts.
2Syntax Rules: Parentheses, Braces, and Return
Parentheses: required with zero or multiple parameters; optional with exactly one. Braces and return: if the body is a single expression, omit { } and return — the value is returned implicitly. If the body has multiple statements, braces and an explicit return are mandatory.
3Lexical 'this' — The Killer Feature
Traditional functions create their own this binding, which changes depending on how the function is called. Arrow functions have no own this — they capture this from the enclosing lexical scope at the time they are defined. This is called lexical binding.
4When NOT to Use Arrow Functions
Arrow functions are not universal replacements. Object methods: arrows inherit this from the module scope, not the object — use method shorthand instead. Constructors: arrows cannot be called with new (TypeError). Arguments: arrows don't have the arguments object — use rest parameters (...args) instead.
5Decision Framework: Arrow vs Traditional
Use arrows: callbacks (.map(), .filter(), event listeners inside classes), IIFEs that don't need this, and any inline function where you want to preserve the parent's this. Use traditional/shorthand: object methods that access this, constructor functions, generator functions, and functions that use arguments.
