Packing List

An array is many values under one name

Every name you have made so far has held one thing: one greeting, one score. A packing list is several things, kept in the order you wrote them, all answering to the same name.

JavaScript writes that with square brackets and a comma between the values:

const items = ["Passport", "Charger"];

One const called items, holding two pieces of text: Passport first, Charger second, and they stay that way for as long as the program runs. Adding a third means typing a comma and another value inside the same brackets. The brackets make it an array; the commas keep the values apart.

A loop whose variable is not a number

for (let i = 5; i >= 1; i--) counts. You wrote the start, the test and the step, and everything it handed you was a number.

for (const item of items) counts nothing. It walks along the array and hands you the value sitting there — the text "Passport", then the text "Charger". You never say how many passes to take, because the array already knows how long it is. And the name between const and of holds a piece of text, which is new: until now, the variable a loop handed you was always a number.

const is right there even though the value differs on every pass. The counting loop needed let because one name was changed over and over; here each pass gets a fresh name with the next value already in it, so nothing is ever assigned twice.

for (let n = 1; n <= 3; n++) {
  console.log(n);
}

for (const word of ["yes", "no", "maybe"]) {
  console.log(word);
}

1
2
3
yes
no
maybe

Two loops that look alike on the page and behave nothing alike. The name after const is yours to choose — item, word, chore — and JavaScript puts the next value into it each pass.

.length says how many

items.length is the number of values in the array. It is a property, not something you call: it gives 2 here, while items.length() stops the program with TypeError: items.length is not a function. It is read fresh every time, so an array that grows reports a bigger number on its own.

A worked example

A chore board rather than a suitcase, so the checklist stays yours to finish:

const chores = ["Sweep", "Wash up", "Bins"];

for (const chore of chores) {
  console.log(`Today: ${chore}`);
}

console.log(`${chores.length} jobs on the board`);

Today: Sweep
Today: Wash up
Today: Bins
3 jobs on the board

Three values, three lines, then one line that counted them. Put a fourth chore inside the brackets and you get a fourth line and a 4 at the bottom.

Your turn

The editor holds a checklist with two items on it. Press Run before changing anything.

The loop is already doing its half: two items, two passes, two lines. But both lines read [ ] item, because the line inside the braces prints the word item in double quotes, and double quotes mean ordinary characters.

Two things to do:

1. Rewrite that line as a template literal, so it prints the value instead. Keep the [ ] box and the space after it — those square brackets sit inside the quotes, so they make no array.
2. Add "Socks" and "Towel" to the array, in that order, each with a comma in front of it.

The footer needs no attention: it already asks the array how many values it holds, so it says 4 by itself once the new items are in place.

If something goes wrong

If every line reads [ ] ${item} back at you, braces and all, the line is still in double quotes. Nothing has broken; the quotes need to be backticks.

If nothing appears at all — no banner, no lines — JavaScript refused to start, because the whole file has to make sense before any of it runs. Two slips do that here. A missing comma between two items inside the square brackets gives SyntaxError: Unexpected string. A line that opens with a backtick but closes with a double quote, or the other way round, leaves the text unfinished, so the quotes on both sides of the box must match. An empty panel is nearly always punctuation rather than a wrong idea.

And if every line reads [ ] Passport,Charger,Socks,Towel, the braces hold items where they should hold item. The array turns itself into text without complaint; the singular name is the one the for line hands you.

Change the list, run it again, and read your own checklist.