Functions

The big question: “How do we package behavior — and what are scope and closures, really?”

but why do we need this?

Real programs are thousands of instructions. Without functions you’d copy-paste the same lines everywhere — and fixing one mistake would mean hunting it down in fifty places. Functions let you build a piece of behavior once, name it, trust it, and reuse it forever. They’re how big programs stay sane, and how you’ll structure every automated test you ever write.

in plain words

Imagine writing the same 10 lines every time you need them — or building a machine once and pressing its button forever. A function is that machine: it takes inputs, does its work, and hands back an output. Name it once, use it a thousand times.

Functions also introduce the two ideas people call “hard” — scope and closures. Scope just answers: “from this line, which variables can I see?” (Picture soap bubbles inside bubbles: inner bubbles can see out, outer ones can’t see in.) A closure is a function that walks away carrying a little backpack of the variables from where it was born.

They’re only hard when described in words. Watched as pictures, they’re almost obvious — and they’re the favorite interview questions in JavaScript, so we’ll master them properly.

words you’ll own after this

function

A named, reusable machine: inputs go in, work happens, one output comes back.

parameter vs argument

A parameter is the machine’s labeled input slot; an argument is the actual value you drop into it for one call.

return value

What the function hands back to whoever called it. Different from printing to the console!

scope

The region of code where a variable is visible. Inner code sees outer variables; never the other way.

closure

A function that remembers the variables from the place it was created — even after that place has finished running.

callback

A function you hand to another function, saying “run this when it’s time.”

after this phase, you can…

✓Write and call functions with parameters and return values
✓Explain the return-vs-console.log difference (the classic confusion)
✓Draw scope bubbles for a piece of code and predict what each line can see
✓Explain a closure with the backpack picture — well enough to teach it

this phase’s lab — see it move

✏️ This phase’s interactive lab is still being drawn — it arrives together with the phase’s lessons.

the lessons

3.1
What is a function?
A reusable machine: inputs → work → output. Defining and calling are different moments.
3.2
Parameters vs arguments
Slot names vs the values dropped in — and every call gets fresh slots.
3.3
return
The output chute: the value travels back and replaces the call. Not the same as console.log!
3.4
Function expressions & arrows
Functions are values — stored in variables like any number or string.
3.5
Scope
Where a name can be seen from: nested bubbles and the outward lookup.
3.6
The call stack (first look)
Every call gets its own frame; frames stack up and pop off.
3.7
Closures
The inner function walks away wearing a backpack of outer variables.
3.8
Higher-order functions & callbacks
Functions that accept other functions — “call this back when it’s time.”
3.9
Recursion
A function calling itself — and the base case that stops the tower.
3.10
Default parameters & pure functions
Fallback values for silent slots — and sealed functions with no leaky pipes.
3.11
Checkpoint: the tip calculator brain
Compose small pure functions into one working brain — your first testable unit.