2. Arrays: a row of numbered boxes

Too many variables

Imagine tracking the scores of four players:

const score0 = 90;
const score1 = 72;
const score2 = 85;
const score3 = 64;

Now find the highest score. Or add a fifth player. Or a thousand. With one variable per value, the code grows with the data, and no function can take “however many scores there are”.

The picture

In code:

const scores = [90, 72, 85, 64];

console.log(scores[0]);      // 90
console.log(scores[2]);      // 85
console.log(scores.length);  // 4

Square brackets do two jobs here. [90, 72, 85, 64] makes an array holding those values, in that order. scores[2] reads the slot with index 2.

Why start counting at 0?

It feels odd at first, but the index isn’t “which locker in the line”. It’s how many steps from the start. The first locker is zero steps away. You’ll see in Part II that this is literally how the computer finds a slot: start where the array begins in memory, and step forward index slots. That’s also why reading a slot is just as quick whether it’s number 2 or number 2,000,000.

And reading past the end? There’s no locker there, so you get undefined, the “nothing” value from the last chapter:

console.log(scores[4]);  // undefined

Changing and growing

Writing to a slot looks like reading it, but with =:

const scores = [90, 72, 85, 64];
scores[1] = 75;
scores.push(100);

console.log(scores);
// [ 90, 75, 85, 64, 100 ]
console.log(scores.length); // 5

scores.push(100) adds a new slot at the end, and the length grows by one. (You might wonder how we can change scores when it was declared with const. const only means the name can’t be pointed at a different array. The array itself can still change. Chapter 4 explains exactly why.)

const scores = [90, 72, 85, 64];
console.log(scores[2]);

scores[1] = 75;
scores.push(100);

console.log(scores);
console.log(scores.length);
console.log(scores[scores.length - 1]);

Visiting every slot

Here is the loop you’ll write more often than any other code in this book:

for (let i = 0; i < a.length; i++) {
  // do something with a[i]
}

i starts at 0 (the first index). The test i < a.length stops the loop before i reaches length, which is one past the last index. Step through it and watch i walk along the array:

const a = [4, 8, 15];
let total = 0;
for (let i = 0; i < a.length; i++) {
  total = total + a[i];
}
console.log(total);

Notice the pattern: a variable outside the loop (total) collects something as i visits each slot. Summing, counting, finding the biggest: they’re all this same shape.

Arrays meet functions

Put the loop inside a function and it works for any array, of any length:

function sum(arr) {
  let total = 0;
  for (let i = 0; i < arr.length; i++) {
    total = total + arr[i];
  }
  return total;
}

console.log(sum([4, 8, 15]));  // 27
console.log(sum([1, 2]));      // 3
console.log(sum([]));          // 0

That last line matters. An empty array has length 0, so the test 0 < 0 fails straight away, the body never runs, and total stays 0. Good code handles the empty case without any special effort.

Your turn

function max(arr) {
  // your code here
}

console.log(max([3, 9, 2]));

function countAbove(arr, limit) {
  // your code here
}

console.log(countAbove([5, 12, 8], 10));

What you learned

• An array stores many values in order under one name.
• arr[i] reads or writes the slot at index i. Indexes start at 0, and the last one is arr.length - 1. Past the end you get undefined.
• push adds a value to the end, and length grows.
• for (let i = 0; i < arr.length; i++) visits every slot exactly once, in order. A variable outside the loop collects the answer.

Arrays hold values in numbered slots. Next: objects, which hold values in named ones. Combine the two and you get the shape this whole book is about.