Arrays, the Picture: Ordered Lists and the map, filter, reduce Pipeline

Maria teaches a quiz class of thirty students. After every quiz she has thirty marks to keep. With what you know so far, that means thirty variables: mark1, mark2, and so on to mark30. Finding the average means typing thirty names in one long line. Adding a thirty-first student means changing the program in four places.

You have already met the fix, quietly. The starter that reads your input keeps every word of it in tokens, and tokens is an array. In this module you learn arrays properly: what they are and every method they have. You also learn the pipeline of map, filter and reduce, which turns most list jobs into one readable line.

An array is an ordered list

An array is one value that holds a list of other values, in order. Each value in it is an element. You write an array with square brackets and commas between the elements. This is called an array literal, because you write its contents literally in the code.

const marks = [72, 45, 88, 91, 60];
console.log(marks);
console.log(marks.length);

[ 72, 45, 88, 91, 60 ]
5

The first line prints the whole array. The second prints length, the number of elements. Order matters: [72, 45] and [45, 72] are two different arrays.

An array can hold any values, even a mix: numbers, strings, booleans, other arrays. In practice, keep one kind per array. A list of marks should hold only marks, so every element can be treated the same way.

Indexes start at 0

Each element sits at a numbered position called its index. The first element is at index 0, the second at index 1, and the last at index length - 1. You read an element with the array's name and the index in square brackets.

const marks = [72, 45, 88, 91, 60];
console.log(marks[0]);
console.log(marks[2]);
console.log(marks[marks.length - 1]);
console.log(marks[5]);

72
88
60
undefined

The last line asks for index 5, one past the end. JavaScript does not stop the program. It gives undefined, the value that means "nothing here". That is kind, and also dangerous: a wrong index does not shout, it just quietly gives you nothing.

Counting from 0 feels odd for a day or two. Think of the index as "how many elements come before this one". The first element has zero elements before it.

at(-1) reads from the end

Reading the last element as marks[marks.length - 1] is long, and Bob gets the - 1 wrong about once a week. Since ES2022, arrays have at. With a positive number it works like the brackets. With a negative number it counts from the end: at(-1) is the last element, at(-2) the one before it.

const marks = [72, 45, 88, 91, 60];
console.log(marks.at(0));
console.log(marks.at(-1));
console.log(marks.at(-2));

72
60
91

Square brackets do not count from the end. marks[-1] is undefined, because -1 is not an index at all.

An array grows

An array is not fixed in size. push adds an element to the end and makes length one bigger. This is how the starter builds out: every line of your answer is pushed onto it, then joined at the end.

const marks = [];
console.log(marks.length);
marks.push(72);
marks.push(45);
marks.push(88);
console.log(marks);
console.log(marks.length);

0
[ 72, 45, 88 ]
3

Notice the const. It does not freeze the array. It only means the name marks always points to the same array. The contents of that array can still change, which is why push works on a const array. Module 8 explains this in detail, with references and copies.

You can also write to an index directly: marks[1] = 50 replaces the second element. Writing far past the end leaves gaps, and Lesson 02 shows why that is a trap.

The pipeline picture

Most list jobs are one of three shapes. You want a new value for every element, like a mark with 5 grace marks added. You want only some elements, like the marks of 80 or more. Or you want one answer from all of them, like a total or a count.

JavaScript gives each shape its own method:

• map calls your function once per element and builds a new array of the answers. The new array has the same length.
• filter calls your function once per element and keeps the elements for which it returned true. The new array can be shorter.
• reduce walks the array with a running value, and returns that one value at the end.

None of the three changes the array you call it on. Each returns something new, so you can chain them: the output of one stage is the input of the next. That chain is the pipeline.

const marks = [72, 45, 88, 91, 60];
const graced = marks.map((m) => m + 5);
const high = graced.filter((m) => m >= 80);
const count = high.reduce((c, m) => c + 1, 0);
console.log(graced);
console.log(high);
console.log(count);
console.log(marks);

[ 77, 50, 93, 96, 65 ]
[ 93, 96 ]
2
[ 72, 45, 88, 91, 60 ]

The last line proves the point: marks is exactly as it was. The function you pass to each stage is the arrow function of Module 5. (m) => m + 5 takes one element and returns its new value.

Watch the same pipeline one element at a time. Each step moves one element through one stage. The element 45 becomes 50 in map, then fails the test in filter, so it never reaches reduce.

A reduce step is easier to trust when you see its running value. Here is a total of the same marks, one row per element.

The last row's "sum after" is what reduce returns. The 0 at the end of the call is the start value: the running sum before the first element.

const a = [x, y, z];                    // an array literal
a[0]          a.at(-1)      a.length    // first element, last element, size
a.push(v);                              // add v at the end
a.map((el) => newValue)                 // new array, same length
a.filter((el) => trueOrFalse)           // new array, the elements that passed
a.reduce((soFar, el) => next, start)    // one value

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
const marks = tokens.slice(1).map(Number);

const total = marks.reduce((sum, m) => sum + m, 0);
const best = marks.reduce((hi, m) => (m > hi ? m : hi), marks[0]);
const high = marks.filter((m) => m >= 80);

console.log("average " + total / marks.length);
console.log("best " + best);
console.log("80 or more: " + high.join(" "));

average 73.33333333333333
best 91
80 or more: 88 91 84

const marks = [72, 45, 88, 91, 60, 84, 39, 77];
const graced = marks.map((m) => m + 5);
const high = graced.filter((m) => m >= 80);
console.log("input " + marks.length);
console.log("map " + graced.length);
console.log("filter " + high.length);

input 8
map 8
filter 4

const marks = [72, 45, 88];
for (let i = 0; i <= marks.length; i++) {
  console.log(marks[i]);
}

72
45
88
undefined

let marks;
marks.push(72);
console.log(marks);

TypeError: Cannot read properties of undefined (reading 'push')

const marks = [72 45 88];
console.log(marks.length);

const a = [10, 20, 30];
a[6] = 70;
console.log(a.length);

6
3 0 -2 10 1 0

15 50 5
70

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

5
40 75 50 120 30

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

80 150 100 240 60
2
630

6
21 25 19 19 30 27

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

11 5

Next: every array method, one by one, with what it returns and whether it changes the array.