3.4 — Function expressions & arrows
Time for a bombshell. In Phase 1 you learned that memory slots hold values — numbers, strings, booleans. Ready? Functions are values too. A whole machine — hopper, gears, chute — can sit inside a memory slot, with a variable label tied to it, exactly like the number 25 or the string "hello".
This sounds like trivia. It is the opposite: it's the idea that powers half of modern JavaScript. Because functions are values, they can be stored, handed to other functions ("run this when the button is clicked"), and returned from functions. Every Playwright test you'll write leans on this.
Today: two new ways to write a function that make the value-ness impossible to miss — including the famous => arrow.
const double = function (n) {
return n * 2;
};
const triple = (n) => n * 3;
console.log(double(4));
console.log(triple(4));
console.log(typeof double);Line 1 reads like any variable creation: const label, = , and a right-hand side. But the right-hand side is function (n) { return n * 2; } — an expression that PRODUCES A MACHINE as its value. That value drops into a memory slot and the label double ties onto it.
The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”
There's a proper name for "functions are values": first-class functions. It means a function has the same rights as a number or a string. It can live in a variable. It can be handed to another function, and handed back from one.
One honest disclosure: typeof says "function". But deep down a function value is a special kind of object — a bundle of stuff that happens to be runnable. Objects are Phase 4; keep this footnote for then.
The arrow rules, all of them: two or more parameters need parentheses — (a, b) => a + b. One parameter can skip them — n => n * 2.
No braces means the result comes back automatically. Braces mean "normal body" — you must write return yourself, or you get undefined. That last one causes real bugs, which is why the quiz drills it.
⌨️ an arrow with a decision inside
Arrows meet the ternary from 2.4: a one-line function that PICKS the bigger of two numbers. No braces, no return keyword — the expression does everything.
requirements:
- An arrow function stored in a variable named
bigger, taking TWO parameters:aandb. - Its whole body is one ternary expression: if
a > bthe result isa, otherwiseb. Brace-less, so it auto-returns. - Print
bigger(3, 7), thenbigger(9, 2).
when you press RUN, the console must show exactly:
✏️ Quick check 1
Type exactly what prints:
const add1 = (x) => x + 1; console.log(add1(2));
✏️ Quick check 2
One pair of braces added — now type exactly what prints:
const add1 = (x) => { x + 1; };
console.log(add1(2));✏️ Quick check 3
A function is a value with its own type tag. Type what this prints:
const double = (n) => n * 2; console.log(typeof double);
🗣️ Now teach it back
Explain to a friend what it means that "functions are values" — use the memory-slot picture — and show them how an arrow function is just a shorter way to write one.
Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.