JS Sketchbooksee JavaScript think ✏️
← back to phase 3

3.3 — return

Our greet machine could only shout at the console. Useful — but a real machine should hand you something back. A juicer doesn't display a picture of juice; it gives you juice you can pour into something else. That handing-back is return — the machine's output chute.

And this lesson meets the single most common beginner confusion in all of JavaScript head-on: return is not console.log. One hands a value back to your program; the other shows a value to you, the human. Mixing them up produces the mysterious undefined that has haunted every beginner since 1995. After today, it will never haunt you.

watch it happen
function double(n) {
  return n * 2;
}

let result = double(5) + 1;
console.log(result);

function shout(word) {
  console.log(word + "!");
}

let y = shout("hi");
console.log(y);

Meet double: one slot (n), and a body whose only job is return n * 2. The keyword return names what leaves through the chute. Note there’s no console.log anywhere in this machine — it produces a value, silently.

doublereturn n * 2return chutethe call site — where the value landslet result = double(5) + 1;console(nothing printed yet)
under the hood

The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”

The one rule to keep: wherever you write a call like double(5), JavaScript replaces it with whatever the function hands back. And every call hands back something. Wrote no return? The call hands back undefined.

Even console.log hands back undefined — try console.log(console.log("hi")) in your F12 console: it prints hi, then undefined.

This idea is the heart of your future job. A test line like expect(getTotal()).toBe(42) means "run getTotal, take what it hands back, check it's 42" — which only works if getTotal returns its answer. A function that only prints its answer can't be tested this way: the text went to the screen, and no program can read the screen.

your turn

⌨️ returned values are ingredients

The proof that return beats console.log: use ONE function’s answers twice, inside a bigger calculation. Printed text could never do this.

requirements:

  • A function named half with one parameter n — it RETURNS n ÷ 2. Nothing printed inside.
  • One single console.log that prints half(10) + half(6) — two calls, their returned values ADDED together before printing.
  • Trace it first: what travels back from each call, and what does + see?

when you press RUN, the console must show exactly:

8

✏️ Quick check 1

When does "checked!" print? Type your answer in one word.

function check(n) {
  return n > 10;
  console.log("checked!");
}

✏️ Quick check 2

Type what a holds:

function mystery() {
  3 + 4;
}

let a = mystery();

✏️ Quick check 3

console.log shows a value to the human. return hands the value back to the ___ — type the one word.

teach it back

🗣️ Now teach it back

A friend writes a function that console.logs the answer, then wonders why let x = theirFunction() gives undefined. Explain the window vs chute difference — and what return actually does when it fires.

Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.

a few sentences, minimum — you’ve got this
to remember
return does two things at once: stops the machine instantly, and sends its value back to REPLACE the call expression.
Every call produces a value. No return (or bare return;) → undefined. Even console.log returns undefined.
console.log = window (shows the human). return = chute (hands the program). To USE a result, it must be returned.