Lesson 14 · JavaScript Deep Dive · about 20 minutes

🔁 Lists & Loops

So far, one variable holds ONE thing. Today you get a variable that holds a whole TRAIN of things — and a loop that does work for every wagon. Then your page starts drawing itself. Seriously.

🎬 Watch first (90 seconds)

An array is a train 🚂

Imagine a little train where every wagon is a box with something inside. In JavaScript that train is called an array, and the whole train fits in ONE variable:

const features = ["fast", "cool", "cheap"];

Square brackets [ ] build the train, commas separate the wagons. Three strings, one variable. Nice and tidy.

Want to peek into one wagon? Use its number:

features[0]   // "fast"
features[1]   // "cool"
features[2]   // "cheap"

One more train trick: features.length tells you how many wagons there are. For our train that's 3. (Yes, it says 3 even though the last number is 2 — because counting starts at 0.)

A loop repeats work for every wagon

What if you want to do something with EVERY wagon? You could write three lines… but what about a train with 100 wagons? No way. You need a loop:

for (const f of features) {
  console.log(f);
}

Read it out loud like English: "for each thing f of the features train, do this." The loop grabs "fast", runs the code, grabs "cool", runs it again, grabs "cheap", runs it once more, then stops. Three wagons, three runs — automatically.

const features = ["fast", "cool", "cheap"];

let html = "";
for (const f of features) {
  html = html + "<li>" + f + "</li>";
}
document.getElementById("list").innerHTML = html;

🛠️ Build it (the fun part)

1. Open practice/myshop.html in VS Code and find your feature list (the <ul> with your product's 3 features).
2. Give the <ul> an id and delete the hand-written <li>s inside it (brave, I know):

   <ul id="feature-list"></ul>

3. In your <script> at the end of the body, build the train with YOUR three features (type them, don't copy-paste!):

   const features = ["super grippy", "glows in dark", "robot laces"];

4. Now the loop that draws the list:

   let html = "";
   for (const f of features) {
     html = html + "<li>" + f + "</li>";
   }
   document.getElementById("feature-list").innerHTML = html;

5. Save (⌘S) and refresh (⌘R). Your list looks… exactly the same as before. Boring? NO — wait for it…
6. Add a 4th feature to the array only — just one string, one comma, nothing else. Save. Refresh. The page grew a new list item BY ITSELF. You didn't touch the HTML. The data changed, the loop did the rest. That's how every real shop site on the internet works. 🎉

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

These previews run your JavaScript for real. Type an extra string into your array and watch the list grow the moment you type the closing quote. Then press Check my code ✔.

🔨 Now break it!

Do these in your real myshop.html file (or in the Task A box above). Predict what will happen BEFORE you refresh!

1. Summon the ghost box. Somewhere in your script, add:

   document.getElementById("feature-list").innerHTML += "<li>" + features[99] + "</li>";

   Wagon 99 doesn't exist, so the page literally prints the word undefined. That word on a webpage is a famous clue: somebody grabbed a box that isn't there. Now you know what it means when you see it in the wild! Remove the line after your laugh.
2. Double the train. Copy your whole for loop and paste it right below itself (before the innerHTML line). Refresh — every feature shows up TWICE. The loop doesn't know or care; it just runs for every wagon, every time you ask. Delete the copy.
3. Let the array brag about itself. Add a <p id="count"></p> under your list, then in the script:

   document.getElementById("count").textContent =
     "We have " + features.length + " amazing features!";

   Now add a 5th feature to the array and refresh. The sentence updates its own number. The page counts FOR you.

🎮 Quiz time

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

📚 Want more?