Array methods: searching, sorting, and the async loop trap

Lesson 3 covered map, filter and reduce. The rest of the array API is mostly about asking questions of an array without writing the loop.

Searching

some and every stop at the first element that settles the answer. every on an empty array is true — there is no element that fails — which is logically right and still catches people out in validation code. includes uses SameValueZero, so it finds NaN; indexOf uses === and never does.

Sorting with a comparator

A comparator (a, b) => number returns a negative number if a goes first, positive if b goes first, and 0 if they tie. A comparator that returns a boolean (a > b) never returns a negative number, so it is wrong, sometimes in ways that only show on certain inputs. Strings compare with </> or localeCompare; numbers with subtraction.

sort has been stable since ES2019: elements that compare equal keep their original relative order. That is what makes a two-key sort work in one pass — compare the main key, and only on a tie compare the second.

sort, reverse and splice change the array in place. toSorted, toReversed, toSpliced and with(index, value) return a changed copy and leave the original alone.

1export function run() {2  const scores = [7, 12, 3, 12, 9];3  const people = [4    { name: "Zura", age: 30 },5    { name: "Ana", age: 25 },6    { name: "Gio", age: 30 },7  ];8  const byAge = people.toSorted((a, b) => a.age - b.age);9 10  return {11    firstOverTen: scores.find((n) => n > 10),12    lastIndexOf12: scores.findLastIndex((n) => n === 12),13    anyNegative: scores.some((n) => n < 0),14    everyOnEmpty: [].every((n) => n > 100),15    includesNaN: [NaN].includes(NaN),16    indexOfNaN: [NaN].indexOf(NaN),17    booleanComparator: [3, 1, 2].sort((a, b) => a > b),18    numericComparator: [3, 1, 2].sort((a, b) => a - b),19    byAgeStable: byAge.map((p) => p.name),20    originalUntouched: people.map((p) => p.name),21  };22}

forEach does not wait

forEach calls your callback and ignores what it returns. An async callback returns a promise, so forEach moves straight on: the loop "finishes" while every callback is still waiting. It also cannot be stopped early with break or return.

1const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));2 3export async function run() {4  const log = [];5 6  [1, 2].forEach(async (n) => {7    await wait(10);8    log.push(`forEach item ${n}`);9  });10  log.push("after forEach");11 12  for (const n of [1, 2]) {13    await wait(10);14    log.push(`for-of item ${n}`);15  }16  log.push("after for-of");17 18  return log;19}

for...of with await inside runs the steps one after another. To run them concurrently and still wait for all of them, use await Promise.all(items.map(async (x) => ...)) (lesson 5).

Common mistakes

• A boolean comparator. sort((a, b) => a.score > b.score) returns true/false, never a negative number; use b.score - a.score.
• Forgetting the tie-breaker. Equal scores stay in input order, not alphabetical order, unless the comparator says so.
• async callbacks in forEach. The code after the loop runs before any of them finish, as the second example shows.
• every on an empty list as a permission check. It is true, so "every selected item is allowed" passes when nothing is selected.

What interviewers ask

• What does [1, 2, 3].sort(() => 0) do, and what does it tell you? — Leaves the order unchanged: sort is stable, so ties keep their order.
• How do you sort by two keys? — One comparator that compares the first key and falls through to the second only when the first gives ( does this neatly, because is falsy).