Arrays

The idea#

Think of an array like a train with numbered cars. The engine sits in car 0. Coal sits in car 1. That number is the index, and the first car is always 0. You couple a new car onto the back, or onto the front, and you uncouple from either end. The train grows and shrinks by itself. You never reserve a fixed number of cars and then get stuck when one more passenger shows up.

That train is an ordered list, and the list is one object in memory. Two variables can name the same train. Push a car through one name and the other name sees it. That shared name is an alias. A shallow copy is a new train whose cars are still the same objects. If one car holds a bin of luggage, both trains share the bin. structuredClone builds a deep copy of plain data, bins included.

Some methods change the train in place: push, pop, shift, unshift, splice, sort, reverse, fill, and copyWithin. sort, reverse, fill, and copyWithin hand the same train back. splice hands back the cars it removed. Copying methods leave the old train alone: slice, concat, map, filter, flat, flatMap, a spread [...cars], and on newer engines toSorted and toReversed.

map, filter, and reduce are higher-order. You pass a function in. The function you give filter is a predicate, a yes-or-no test for each car. The running value inside reduce is the accumulator. Pass the starting value on every reduce.

Why it matters#

The bugs that survive a quick glance are sharing, holes, and a search that uses the wrong equality.

fill copies a reference. new Array(2).fill(new Array(2).fill(0)) looks like a blank 2 by 2 grid. Both rows are the same inner array. Write grid[0][0] = 9 and both rows show 9 in that cell, because there was only one row object. Build each row inside its own callback: Array.from({ length: n }, () => new Array(m).fill(0)).

new Array(3) is three holes. Empty couplers. The slots do not hold undefined until something writes them. map and forEach skip holes, so a map that means "put a 1 in every car" leaves the holes empty. Fill the train first, or build it with Array.from({ length: 3 }, () => 1). Spread is the operation that turns those holes into real undefined values.

indexOf uses ===. NaN === NaN is false, so indexOf never finds NaN. includes does. sort() with no comparator orders the cars by their string labels, so 10 sits before 9. reverse() rearranges the train you already hold. shift and unshift make every later car step forward. That cost is O(n), linear in the length. A queue that only takes from the front should remember a head index and push new work onto the back.

every on an empty train is true. No car fails the test. That is vacuous truth. Math.max(...[]) is -Infinity, so check the length before you spread a list into Math.max. Walk values with for...of. for...in walks keys, which is the tool you use on objects, and it can see inherited names. forEach cannot stop early. When you need to bail out, use for...of, some, or every.

A small example#

const morning = ['engine', 'coal', 'passengers']; function addCaboose(cars) {  const next = cars.slice();  next.push('caboose');  return next;} const evening = addCaboose(morning);const shared = morning;shared.pop(); const board = [  { car: 'engine', seats: ['A'] },  { car: 'passengers', seats: ['B'] },];const copy = board.slice();copy[1].seats.push('C');

evening is a new train, so morning is still the morning consist until shared.pop() runs. shared is an alias, so that pop removes passengers from morning. copy is a new list of the same car objects. Pushing 'C' changes board[1].seats too. Same bins, two trains. That is a shallow copy.

What the code below is doing#

The code below walks the yard in ten sections.

Building makes trains with fill, with Array.from over a length, a string, or a Set, and with a small range helper. The 2D grid section is the shared-row trap, then the version where each row is its own array. Copy versus alias puts an alias, a shallow spread, and structuredClone side by side. Slice versus splice: slice copies a half-open window, and a negative start counts from the caboose. splice deletes and inserts in place and returns the removed cars. A delete count of 0 inserts without uncoupling.

Workhorses run filter, map, reduce with an initial value, find, findIndex, findLast, indexOf beside includes on NaN, some, every on an empty list, flat, flatMap, a copied reverse, at, join, concat, and the key and entry iterators. Max, min, sum, and average follow, including Math.max on an empty spread. Then unique values, a counting Map, group-by, zip, chunk, and partition. Loops add with for...of. The queue keeps a head index, because shift on a real array is O(n). Holes come last: map skips them, Array.from writes real elements, and spread materializes undefined.

Say shallow copy, in place, higher-order, predicate, and accumulator. The traps in this run: fill shares one inner array, sort() is lexicographic, reverse() mutates, shift() is O(n), indexOf never finds NaN, and holes from new Array(n) are skipped by map and forEach.

Everything below is the demonstration. Same idea, written as code you can run.