Arrays + loops · MP2 Showcase (Part 1) · MP3 launch

Today we learned arrays (a container that holds many values) and the three ways to loop over one: the classic for, for...of, and forEach. Put a loop together with an if and an array of data and you have the engine behind almost every app you use. The full walkthrough is in the arrays and loops slides. The one habit to keep: when you see a list rendered on a page, picture the array and the loop underneath it. It is the same small pattern every time.

• Reviewed the JavaScript essentials from last class through five short poll questions (the string-and-number trap, return versus console.log, arrow functions, addEventListener, and && versus ||).
• Learned arrays: how to store many values in one variable and read them by index.
• Met the three loops: classic for, for...of, and forEach.
• Built a list on the page from an array of data, which is the pattern hiding inside your to-do app.
• Saw a live infinite loop freeze the browser, and why loop conditions matter.
• Started the MP2 Showcase (we got through the first few; the rest present Wednesday).
• Launched MP3, your API-powered app.

The slides have every example with a live editor, so here are the few things worth pinning rather than the full code.

Index starts at zero. The first item in an array is position 0, not 1. So in ["apple", "banana", "orange"], fruits[0] is "apple" and fruits[2] is the last one. Asking for fruits[3] gives undefined, because there is no fourth item.

Do not memorize the array methods, recognize them. When AI writes push, pop, shift, unshift, includes, or indexOf, you only need to know roughly what each does (add or remove at one end, check or find a value). You can always look up the exact one.

Three loops, pick the one that fits. for...of is the cleanest when you just want each value. The classic for (let i = 0; ...) is the one to reach for when you need the index number. forEach gives you both the item and its index, and it is handy for attaching the same click handler to many buttons at once.

Loops can be dangerous. A loop needs a correct start, stop, and step. Get the stop condition wrong and it never ends. In class one bad loop froze the browser tab and I had to close it. Before you run a loop, especially one AI wrote, read those three parts.

The pattern behind real apps. Take an array of data, loop over it, add an if. That is the engine behind a feed, a search, a gallery. Showing a feed is the whole list. Searching is a filter by a condition. Once you see the loop and the if underneath, the "magic" goes away. The slides walk through render, filter, and count versions of this.

1. Start MP3. Read the MP3 assignment. Create a new public repo first (lowercase, hyphens, named for what the app does), then write your PROPOSAL.md. Pick an API, open its URL in your browser, and read the raw JSON before you propose. Proposal due Sunday, 7/5. Final due Sunday, 7/12.
2. Build a small list app for practice. Make a playlist or a task list using today's render-from-data pattern: an array of items, a loop, and one list item per entry. Try adding push and unshift and watch what changes. First do a small version by hand, then ask AI to extend it, and read what it gives you back so you can explain it.
3. Play with the slide editors on the arrays and loops slides (pages 5 to 8). Change the values, run them, and watch the console.
4. Keep your weekly log (logs/wk07.md) current.
5. Sign up for a lightning talk if you have not yet. It is a required participation item.

Wednesday we start with fetch and pulling live data from an API, then keeping API keys safe, the rest of the MP2 Showcase, and a fun image-processing app.