Arrays: many values under one name

Everything you have written so far gave one name to one value. `const first = 'Ada'` holds a single piece of text; `const total = 12` holds a single number. That works right up until you have three of something, and it falls apart completely at three hundred.

Suppose you are storing the stops on a train route. You could invent `stop1`, `stop2`, `stop3` and keep going — but you would have to know how many stops there are before you wrote the program, and every function you wrote would have to name each variable separately. Add a stop and you edit the whole file.

What you actually need is a container: one name for the whole group, plus a way to say which member of the group you mean. JavaScript's container for an ordered group is called an array. This lesson is only about getting values into one and back out again. Nothing else.

An array is a single value that holds other values in a fixed order. You write one with square brackets, and commas between the items: `const scores = [10, 8, 9];`. That is one statement creating one value. `scores` is not three variables — it is one variable whose value happens to contain three numbers, in that order.

The values inside are called elements. They can be any kind of value you have already met: numbers, strings, booleans, `null`, `undefined`, and later on other arrays and objects. They do not have to match each other. `[1, 'two', true]` is a perfectly legal array, though mixing types like that usually means you have not yet decided what the list represents.

The order you write them in is the order they stay in. An array is not a bag you tip values into; it is a numbered row of slots.

To read one element you write the array's name followed by a number in square brackets: `scores[0]`. That number is the index, and this is the part that catches every beginner exactly once — the first element is at index 0, not 1.

The mental model that makes it stick is distance from the start, not place in a queue. Index 0 means zero steps along from the beginning, which is the first element, because you have not moved yet. Index 2 means two steps along, which lands on the third element. Think of house numbers measured in metres from the corner rather than counted first, second, third.

So for `const scores = [10, 8, 9]`: `scores[0]` is 10, `scores[1]` is 8, and `scores[2]` is 9. There is no `scores[3]` — you have run out of steps.

Every array knows how many elements it holds. You read that with `.length` — no parentheses, because it is a property of the array and not a function you call. For `[10, 8, 9]`, `scores.length` is 3.

MDN defines `length` as a number that is always greater than the highest index in the array. That one sentence gives you the formula you will use constantly: because indexes start at 0, the last element sits at `length - 1`. A three-element array has `length` 3 and a last index of 2.

Write it as `list[list.length - 1]` rather than typing the number yourself. `scores[2]` is correct today and silently wrong the moment the array gains or loses an element. `scores[scores.length - 1]` stays correct forever, which is the whole reason `length` exists.

Reading an index that does not exist does not stop your program. JavaScript hands you `undefined` and carries on. `scores[3]` is `undefined`, and so is `scores[99]`.

This is worth dwelling on, because it is the most common source of baffling array bugs. The program does not fail where the mistake is. It fails much later, somewhere that looks unrelated, when that `undefined` is finally used for something — `undefined + 1` is `NaN`, and reading a property off `undefined` throws a TypeError several lines further down. When you see `NaN` or a TypeError about `undefined`, suspect an index that went off the end.

The other half of the same mistake: `scores[-1]` is not the last element. Negative numbers in square brackets are not positions at all, so you get `undefined` there too.

Because `list[list.length - 1]` is tedious to write and easy to get wrong, arrays also have an `at()` method. `scores.at(-1)` is the last element and `scores.at(-2)` the one before it. A non-negative index behaves exactly like square brackets, so `scores.at(0)` is the first element.

MDN states that `at()` returns `undefined` if the index is below `-array.length` or at or above `array.length`, so it fails the same gentle way square brackets do — no error, just `undefined`. Reach for `at()` when you are counting from the end, and square brackets the rest of the time.

An array is one value holding an ordered row of values. Square brackets with a number read one of them. Indexes count from zero, so the last element is at `length - 1`, or more simply `at(-1)`. Reading a position that is not there gives `undefined` instead of stopping the program — which is exactly why array bugs tend to surface late, and somewhere else.