4.1 — Arrays

So far, every variable held one value. Now imagine tracking exam scores for a class of thirty. Thirty separate variables — score1, score2, score3… — would be unbearable to write and impossible to loop over. What we want is one name for many values, kept in order.

That is an array: an ordered collection of values under a single variable name. Each value inside is called an element, and each element sits at a numbered position called its index.

Arrays are the data structure you will meet most often for the rest of your career — every list of test results Playwright hands you is one.

watch it happen

const scores = [82, 95, 71];

console.log(scores[0]);
console.log(scores.length);

scores[1] = 96;
console.log(scores);

console.log(scores[3]);

Line 1 builds the array: three elements, in order, under the single name scores. The square brackets [ ] are the array literal — “make an ordered collection of what’s between the brackets.” The order you write is the order it keeps: 82 first, 95 second, 71 third.

under the hood

The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”

An array keeps its elements in order, in memory. The index is what makes that useful: when you write scores[2], the engine doesn't search — it jumps straight to position 2. Reading by index is instant with three elements or three million. The address arithmetic behind that jump is the whole story of the next lesson.

That's the trade arrays make: you find things by position, not by name.

.length is not something you compute — the array maintains it live, always equal to the number of elements.

The last element therefore always sits at length - 1. Asking for any index at length or beyond returns undefined — no error, which is both convenient and sneaky.

Fun fact: indexes start at 0 for the same reason many buildings call the ground floor “floor 0”. The number says how far you climb, not which room you are in. You climb zero flights to the ground floor — and you step zero elements to reach the first one.

your turn

⌨️ the last song, wherever it is

You manage a music playlist. Print its final song in a way that keeps working when the playlist grows to 50 songs — then swap the opener.

requirements:

Create an array named playlist holding exactly these three strings, in this order: "Shape of You", "Believer", "Perfect".
Print the LAST element — its index must be computed from the array's length, not typed as a number. (Imagine the playlist had 50 songs tomorrow: your line must still print the last one.)
Replace the FIRST element with "Golden Hour", then print element 0.

when you press RUN, the console must show exactly:

Perfect

Golden Hour

✏️ Quick check 1

Type exactly what this prints:

const colors = ["red", "green", "blue"];
console.log(colors[1]);

✏️ Quick check 2

a.length is 4. Type the INDEX where the last element lives.

const a = [10, 20, 30, 40];

✏️ Quick check 3

Type exactly what this prints:

const list = ["a", "b"];
console.log(list[2]);

teach it back

🗣️ Now teach it back

A friend sees fruits[0] and asks: “why 0? The banana is obviously the FIRST fruit.” Explain what an index really measures, and how they can always find the last element of any array.

Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.

a few sentences, minimum — you’ve got this

to remember

An array is an ordered collection of elements under one variable name: const scores = [82, 95, 71].

An index measures distance from the start — first element at 0, last at length - 1. Read with scores[i], replace with scores[i] = newValue.

.length is the live element count. Reading past the end gives undefined — no error, so watch for it.

next: 4.2 Inside an array: memory & O(1) →