Lesson 11 · about 15 minutes

🧠 Variables: Memory Boxes

Welcome to the JavaScript Deep Dive! In lesson 8 you wired a button. Today you learn how JavaScript REMEMBERS things: little labeled boxes in the computer's brain. Prices, names, how many sneakers are left — all live in boxes.

🎬 Watch first (90 seconds)

Boxes with labels

Imagine a shelf full of boxes. Each box has a label on the front and one thing inside. That's exactly what a variable is: a labeled box in the computer's memory.

const price = 5;
let count = 0;

Read it like a kid, not like a robot:

const price = 5; — "Make a box, glue the label price on it, put a 5 inside, and seal it shut forever." const boxes can NEVER be refilled.
let count = 0; — "Make a box labeled count with a 0 inside, but leave the lid open." let boxes can be refilled later: count = 3;

Rule of thumb: use const almost always. Only use let when you KNOW the box needs refilling — like a score, or how many items are left in stock.

Two kinds of stuff (so far)

For now, boxes hold two kinds of things:

Numbers — just write them: 5, 100, 3.5. No quotes!
Strings — that's coder-speak for text. Always in quotes: "hello", "Robo Sneakers". Think of the quotes as the gift wrap around words.

Numbers can do math with + - * / (yes, * means times and / means divide). And + has a second job: it glues strings together:

const price = 5;
const sentence = "Price: " + price + " dollars";
// the box "sentence" now holds: Price: 5 dollars

💡 The one idea of this lesson The + sign checks for quotes before it works:

5 + 5      →  10      (two numbers: MATH)
"5" + 5    →  "55"    (a string is there: GLUE!)

Whoa. "5" + 5 is "55", not 10! Why? Because "5" is wearing quotes, so it's text, not a number. And when text meets +, JavaScript stops doing math and starts gluing. The quotes decide everything: quotes = words, no quotes = math. Half the weird bugs in real shops on the internet come from this one trap — and now YOU know it.

🔌 NEW superpower: the preview box now has electricity! Big news: from this lesson on, the "Try it right here" preview RUNS your <script>! Your code runs live, again and again, on every single keystroke. That means your sentence will appear in the preview as you type — magic! One rule: never use alert() in the preview, or it will pop up on every letter you type and drive you bananas.

🛠️ Build it (the fun part)

🧪 Your mission Make your shop write its own price tag. You'll store the product name, the price, and the stock in memory boxes — then glue them into one sentence on the page.

Open practice/myshop.html in VS Code.
Inside the <body>, add an empty sign for the sentence:
```
<p id="info"></p>
```
Inside your <script> at the end of the body (or make a new one there), add three memory boxes (type them, don't copy-paste!):
```
const productName = "Robo Sneakers";
const price = 5;
let stock = 10;
```
Name and price are sealed with const. Stock uses let because it will go down when people buy!

Right under the boxes, glue everything into the sign:

document.getElementById("info").textContent =
  productName + " costs " + price + " dollars — " + stock + " left!";

Save (⌘S), open myshop.html in the browser, refresh (⌘R). You should see: Robo Sneakers costs 5 dollars — 10 left!
Now the cool part: change price to 9, save, refresh. The sentence updates itself! You changed ONE box and the page rewrote its own words. That's why coders love variables. 🧠🎉

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

Remember: the preview now RUNS your script live. Watch your sentence appear while you type, then press Check my code ✔.

🔨 Now break it!

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

Wrap a number in quotes. Change const price = 5; to const price = "5"; — then add + price twice somewhere in your sentence, like price + price. Save, refresh. Math just turned into gluing: "55"! Take the quotes off and it's 10 again. Quotes decide: words or math.
Break a label. Rename price to prise in ONE place only (the box line, not the sentence). Save, refresh — the sentence is GONE. Right-click → Inspect → Console: a red error saying price is not defined. The browser looked for a box labeled price and found nothing. Fix it back.
Do shop math. Try price * 2 in your sentence (price for TWO pairs), or 100 / price (how many pairs 100 dollars buys). * is times, / is divide — your shop can now calculate!

⚠️ If your sentence doesn't show up Check three things: does the id in getElementById("info") match your <p id="info"> EXACTLY? Is every string wearing BOTH its quotes? And peek in the Console (right-click → Inspect) — one red line up top usually names the exact problem and even the line number.

🎮 Quiz time

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

📚 Want more?

⭐ Best thing to read next MDN: Storing the information you need — Variables — the official guide from Mozilla (the Firefox people). It goes a little deeper into boxes and what fits inside them. Reading it counts as a lesson block! And the JS Cheat Sheet now needs a new corner: write const vs let on it yourself.