Closure CavesISSUE #2 of 61

arrow functions · shorthand

LambdaVSThe Mutator

Lambda saysArrow functions are concise and inherit this from their surrounding scope.

const add = (a, b) => a + b — no function keyword, implicit return for one expression. Crucially, arrows don't have their own this; they use the enclosing scope's, which fixes the classic callback-this bug. They can't be used as constructors and have no arguments object.

Power-ups you unlock

Concise: (a,b) => a + b · implicit return
No own this — inherits from the surrounding scope
Great for callbacks (fixes this bugs)
Not for constructors; no arguments object

The Mutator attacks — common mistakes

Using an arrow as an object method needing its own this
Forgetting parens around an object literal return
Expecting an arguments object inside an arrow

Boss battleConvert a function expression callback to an arrow and use it in map.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre id="o"></pre>
<script>const doubled=[1,2,3].map(n=>n*2);
document.getElementById('o').textContent=doubled.join(' ');</script></body></html>

▶ Open the interactive comic issue

‹ Functions · Declaration · Expression Parameters · Default · Rest ›