The Number 12 Bus

Several values under one name

Every name so far has held one value. A bus route is several stops, in order, that belong together. An array holds them under one name:

const colours: string[] = ["red", "amber", "green"];

console.log(colours);
console.log(colours.length);

[ 'red', 'amber', 'green' ]
3

Square brackets make the array, and commas keep the values apart. The type string[] reads as an array of strings: square brackets after a type mean several of these, so number[] would be an array of numbers.

Printing a whole array shows its brackets and puts each piece of text in single quotes, so you can see where each value starts and stops. .length is how many values the array holds. It is something the array already knows, so there are no round brackets after it.

Every value must match

The type is a promise about every value in the array, not only the first. Slip in something else and the compiler points straight at it:

const colours: string[] = ["red", 2, "green"];

console.log(colours);

main.ts(1,35): error TS2322: Type 'number' is not assignable to type 'string'.

for...of hands you each value

const colours: string[] = ["red", "amber", "green"];

for (const colour of colours) {
  console.log(`Light: ${colour.padEnd(6)}|`);
}

console.log("Sequence done.");

Light: red   |
Light: amber |
Light: green |
Sequence done.

for (const colour of colours) means: for each value in colours, in order, put it in a fresh const called colour and run the block in the braces. Three values, three passes. The line after the closing brace runs once, after the loop has finished.

The compiler follows the types through the loop. Because colours is a string[], it knows colour is a string on every pass, which is why padEnd is allowed on it. You choose the name between const and of; a singular name for the one value and a plural for the array is the usual habit.

Your turn

Press Run first. The route card prints three identical lines reading o stop, because the line inside the loop has that word in double quotes.

1. Rewrite that line as a template literal, so each stop's own name appears after the o.
2. Add "Mill Road" and "Quayside" to the end of the array, each with a comma in front of it.

The footer needs nothing from you. It asks the array for its length, so it reports 5 by itself once the new stops are in.

If something goes wrong

If every line reads o ${stop}, dollar sign and braces included, the line is still in double quotes.

If every line shows all the stops joined by commas, the braces hold stops, the whole array, instead of stop, the one value for this pass.

If the lines show the numbers 0 to 4 instead of names, the loop says in where it should say of. That is a real kind of loop, which is why the compiler accepts it, but it walks through the positions in the array rather than the values.

If nothing prints and the compiler reports ',' expected., a comma is missing between two stops. If it reports This expression is not callable., round brackets have been added after length.