JS Sketchbooksee JavaScript think ✏️
← back to phase 3

3.1 — What is a function?

Imagine your program greets visitors. Sam arrives — you write a line that prints “Hello Sam, very good morning!”. Maya arrives — you write the whole line again. Then Priya. A hundred visitors, a hundred nearly identical lines:

Hello Sam, very good morning!

Hello Maya, very good morning!

Hello Priya, very good morning!

Everything except one word is identical. That feeling — “I’m writing the same thing again and again with one tiny change” — is the exact signal that a function should exist: a machine you build once and use forever. Programmers even have a rule about it — DRY: Don’t Repeat Yourself.

And you’ve been using such machines since your very first lesson: console.log is one. Today you stop just pressing other people’s buttons and start building.

watch it happen
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Sam");
greet("Maya");

The engine reads lines 1–3 and does something surprising: it does NOT run the code inside the braces. Defining is construction, not execution.

values ride in →→ result rides outgreetin: namethe work: glue the sentence"Hello, "name"!"
console(nothing logged 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 proper vocabulary, worth owning: the whole recipe from function to the closing brace is a function declaration. greet is its name. name is a parameter — the input slot; next lesson is all about these. The code between the braces is the body — the work.

Writing greet("Sam") is called calling the function; the parentheses are the GO button, and without them nothing runs.

Inside there’s no real belt, of course. What actually happens: the engine saves the body’s lines in memory. It remembers “greet means this saved code” — the same label-on-a-box picture from Phase 1, with code in the box. A call makes the engine jump to the saved lines, run them top to bottom, and jump back to where the call was. That’s the entire trick — and every Playwright line you’ll write someday, page.click(), expect(), is pressing GO on a machine someone else built.

Fun fact: JavaScript has almost nothing to do with Java. The language was born as LiveScript — and Netscape renamed it “JavaScript” in December 1995 purely to surf the hype of Java, the hottest language of the moment. Pure marketing, zero family relation. Programmers still groan about it in one line: “Java is to JavaScript as ham is to hamster.”

your turn

⌨️ a function with a loop inside

Not another greeting — this function’s body holds a whole LOOP (Phase 2 pays a visit). Tell it a number; it cheers exactly that many times.

requirements:

  • A function named cheer with one input slot: times.
  • Calling it prints Hip hip hooray! exactly times times — and your whole program may contain only ONE console.log. (DRY: the repetition is the function’s job.)
  • Prove it with cheer(3).

when you press RUN, the console must show exactly:

Hip hip hooray!
Hip hip hooray!
Hip hip hooray!

✏️ Quick check 1

A function is defined but NOBODY ever calls it. How many times does its body run? Type the number.

function tellJoke() {
  console.log("…");
}

✏️ Quick check 2

No options — type exactly what the console shows:

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

shout("tools");

✏️ Quick check 3

You have been pressing one machine’s GO button since lesson 0.3. Type its full name.

teach it back

🗣️ Now teach it back

Explain to a friend what a function is, using the machine picture — and make sure you explain why defining one prints nothing, but calling it does something.

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
Writing the same thing over and over with one small change = a function’s job. DRY: Don’t Repeat Yourself.
Four parts: the word function, a name, an input slot (parameter), and a body — the work.
Defining runs NOTHING. The parentheses are the GO button: greet("Sam") runs the body with "Sam" in the slot.
You’ve called functions since day one — console.log is a machine someone else built.