Lesson 13 · JavaScript Deep Dive · about 20 minutes

🪄 Functions: Your Own Spells

So far you've been casting OTHER people's spells. Today you learn to write your OWN: a chunk of code with a name, that you write once and cast a thousand times. This is the biggest power-up in all of programming.

🎬 Watch first (90 seconds)

Write the spell once, cast it forever

Imagine you invent an amazing recipe for robot cookies. Do you re-invent it every time you're hungry? No way — you write it down once, give it a name ("Robot Cookies"), and then just say the name whenever you want cookies.

A function is exactly that: a recipe with a name. Here's one:

function cheer(name) {
  return "Go " + name + "!";
}

Read it like a wizard would:

• function — "I'm writing a new spell!"
• cheer — the spell's name. You pick it, like a variable name.
• (name) — an ingredient slot. Fancy word: parameter. It's an empty bowl waiting for whatever you pour in later.
• { ... } — the spell's steps, between the curly braces (you know these from if/else!).
• return — "hand the answer back to whoever cast me." The spell's result comes flying back out.

And here's how you CAST it — this is called calling the function:

cheer("Robo Sneakers")   // ➡️ gives back "Go Robo Sneakers!"
cheer("Tugay")           // ➡️ gives back "Go Tugay!"

Same recipe, different ingredients, different cookies. One spell, endless cheers!

One more secret: you've been calling functions since lesson 8! document.getElementById("buy")? That's a function call — getElementById is a spell somebody at the browser factory wrote for you, "buy" is the ingredient you pour in, and the brick it hands back is its return. You've been a spell-caster all along. Today you become a spell-writer.

🛠️ Build it (the fun part)

1. Open practice/myshop.html in VS Code and find your <script> at the end of the body.
2. At the TOP of the script, write your first-ever spell (type it, don't copy-paste!):

   function priceWithTax(price) {
     return price * 2;   // 100% kid-tax! 😈
   }

   Save and refresh. Notice: nothing happens. That's correct! You only wrote the recipe — nobody cooked it yet.
3. Now write a second spell right below it. This one doesn't return anything — it DOES something instead:

   function announce(text) {
     document.getElementById("message").textContent = text;
   }

   (You need your <p id="message"></p> from lesson 8 — add it back if it's gone.)
4. Time to COOK. Change your Buy button's click listener so the inside becomes:

   btn.addEventListener("click", function () {
     announce("Total: " + priceWithTax(5) + " coins");
   });

   Look closely — that's a spell calling a spell: priceWithTax(5) runs first and hands back 10, then announce writes the whole sentence on the page.
5. Save (⌘S), refresh (⌘R), click Buy now. Does it say Total: 10 coins? You just wrote, cast, and CHAINED your own spells. 🪄🎉

🕹️ Try it right here — the lesson checks your code!

Good news: THESE preview boxes have their electricity ON — your scripts really run as you type. Build it, watch it appear, then press Check my code ✔.

🔨 Now break it!

Do these in your real myshop.html file. Predict what will happen BEFORE you refresh!

1. Cast it three times. Under your button wiring, add three calls with different ingredients: console.log(priceWithTax(5));, console.log(priceWithTax(50));, console.log(priceWithTax(100));. Refresh and open the Console (right-click → Inspect → Console). Three answers from ONE recipe — that's the whole point of functions.
2. Steal the return. Delete the word return from priceWithTax (keep price * 2;). Refresh, click Buy. It says Total: undefined coins! Meet undefined — JavaScript's way of saying "the box came back empty." Without return, the spell still ran, but it handed nothing back. You will meet this word 1000 more times in your coding life — now you know it just means "empty box". Put return back.
3. Rename only the recipe. Change the definition to function priceWithTaxx(price) but leave the CALL as priceWithTax(5). Refresh, click Buy, check the Console: a red error — priceWithTax is not defined. The browser looked for a recipe with that exact name and the cookbook page was missing. Fix the name back.

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

📚 Want more?