Closure CavesISSUE #1 of 61

functions · declaration · expression

LambdaVSThe Mutator

Lambda saysFunctions package reusable logic — declared with function or assigned as expressions.

A declaration (function add(a,b){…}) is hoisted and callable anywhere in scope. A function expression (const add = function(){…}) is not hoisted — it exists only after the line runs. Functions are first-class values: you can store them, pass them, and return them.

Power-ups you unlock

Declarations hoist; expressions do not
Functions are first-class values
Pass them as arguments, return them
Parameters in, return value out

The Mutator attacks — common mistakes

Calling a function expression before it’s assigned
Forgetting to return (function yields undefined)
Confusing the two forms’ hoisting behavior

Boss battleWrite the same function as a declaration and as an expression; note the hoisting difference.

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>function add(a,b){return a+b;} const mul=function(a,b){return a*b;};
document.getElementById('o').textContent='add(2,3)='+add(2,3)+' mul(2,3)='+mul(2,3);</script></body></html>

▶ Open the interactive comic issue

Arrow Functions · Shorthand ›