Array and Iterator Methods Cheat Sheet

Transform, search, and reshape data without loops. Learn the mental models behind map, filter, reduce, iterator helpers, and generators so you can write, read, and review modern JavaScript, whether you or an AI wrote it. You can also download the information as a printable cheat sheet:

Free Bonus: Array and Iterator Methods Cheat Sheet

Get the Array and Iterator Methods Cheat Sheet (PDF), a printable reference to map, filter, reduce, find, some, every, flat, non-mutating methods like toSorted and with, Object.groupBy, Array.from ranges, iterator helpers, and generators:

Want a guided path instead of a reference? Start learning at realjs.com.

Transform

Most array methods return a new array and leave the original alone
Callbacks receive (item, index, array)
Chain methods to describe a pipeline, one step per line

const n = [1, 2, 3, 4];
n.map((x) => x * 2)       // [2, 4, 6, 8]
n.filter((x) => x % 2 === 0)  // [2, 4]
["a", "b"].map((s, i) => s + i)
// ["a0", "b1"]

n.reduce((sum, x) => sum + x, 0)  // 10
n.reduce((a, x) => Math.max(a, x))  // 4

n.filter((x) => x > 1)
  .map((x) => x ** 2)
  .reduce((s, x) => s + x, 0);  // 29

["1", "2", "3"].map(Number)   // [1, 2, 3]
["1", "2", "3"].map(parseInt)
// [1, NaN, NaN]

Search & Test

find* returns an item and findIndex* an index
They return undefined or -1 when nothing matches
every() on an empty array is true

const u = [
  { id: 1, ok: true },
  { id: 2, ok: false },
  { id: 3, ok: true },
];
u.find((x) => x.ok)       // { id: 1, ... }
u.findLast((x) => x.ok)   // { id: 3, ... }
u.findIndex((x) => !x.ok) // 1
u.findLastIndex((x) => x.id > 9)  // -1

n.some((x) => x > 3)      // true
n.every((x) => x > 1)     // false
n.includes(2)             // true
[NaN].includes(NaN)       // true
[NaN].indexOf(NaN)        // -1

Flatten

[1, [2, [3]]].flat()          // [1, 2, [3]]
[1, [2, [3]]].flat(Infinity)  // [1, 2, 3]
["a b", "c"].flatMap((s) => s.split(" "))
// ["a", "b", "c"]
[1, 2].flatMap((x) => (x === 1 ? [] : [x]))
// [2]

Copy vs. Mutate

Prefer the to* methods and with(): they return a copy
sort(), reverse(), and splice() change the array in place
Without a compare function, sort() orders values as strings

const s = [3, 1, 2];
s.toSorted()          // [1, 2, 3]
s.toReversed()        // [2, 1, 3]
s.with(0, 9)          // [9, 1, 2]
s.toSpliced(1, 1)     // [3, 2]
s.toSpliced(1, 0, "x")  // [3, "x", 1, 2]
// s is still [3, 1, 2]

const a = [3, 1, 2];
a.sort();             // a is [1, 2, 3]
a.reverse();          // a is [3, 2, 1]
a.splice(1, 1);       // returns [2]
// a is now [3, 1]

[10, 9, 1].toSorted()  // [1, 10, 9]
[10, 9, 1].toSorted((a, b) => a - b)
// [1, 9, 10]

Free Bonus: Download the Array and Iterator Methods Cheat Sheet PDF and keep the essentials at hand.

Group

const items = [
  { t: "a", n: 1 },
  { t: "b", n: 2 },
  { t: "a", n: 3 },
];
Object.groupBy(items, (i) => i.t)
// { a: [{...}, {...}], b: [{...}] }

Map.groupBy([1, 2, 3, 4], (x) =>
  x % 2 ? "odd" : "even"
);
// Map(2) { "odd" => [1, 3],
//          "even" => [2, 4] }

Build Arrays

Array.from() accepts any iterable or array-like object
Its second argument maps while it builds
new Array(3) makes empty slots, not values

Array.from("abc")         // ["a", "b", "c"]
Array.from(new Set([1, 1, 2]))  // [1, 2]
Array.from([1, 2], (x) => x * 2)  // [2, 4]

Array.from({ length: 4 }, (_, i) => i)
// [0, 1, 2, 3]
Array.from({ length: 3 }, (_, i) => i * i)
// [0, 1, 4]
[...Array(3).keys()]      // [0, 1, 2]
Array(3).fill(0)          // [0, 0, 0]

[..."ab"].keys().toArray()  // [0, 1]
for (const [i, v] of ["a", "b"].entries()) {
  console.log(i, v);      // 0 a, then 1 b
}

Iterator Helpers

Iterator helpers are lazy: each item flows through the whole chain one at a time
That makes infinite sequences safe, as long as you take()
Arrays are iterable, but .values() gives you an iterator

const it = [1, 2, 3, 4].values();
it.map((x) => x * 2)
  .filter((x) => x > 2)
  .toArray();             // [4, 6, 8]

Iterator.from([1, 2, 3, 4])
  .drop(1).take(2).toArray();  // [2, 3]
Iterator.from([1, 2]).flatMap((x) => [x, x])
  .toArray();             // [1, 1, 2, 2]
Iterator.from([1, 2, 3])
  .reduce((a, b) => a + b);  // 6

const v = [1, 2, 3].values();
v.toArray();              // [1, 2, 3]
v.toArray();              // []

Generators

function* returns an iterator without running any code yet
yield pauses; next() resumes
Generators are lazy, so they can be infinite

function* count() {
  yield 1;
  yield 2;
  return "done";
}
const g = count();
g.next();   // { value: 1, done: false }
g.next();   // { value: 2, done: false }
g.next();   // { value: "done", done: true }
[...count()]  // [1, 2] (return is skipped)

function* naturals() {
  let n = 0;
  while (true) yield n++;
}
naturals().take(3).toArray();  // [0, 1, 2]
naturals()
  .filter((x) => x % 2)
  .map((x) => x * x)
  .take(3)
  .toArray();             // [1, 9, 25]

function* both() {
  yield* [1, 2];
  yield* "ab";
}
[...both()]   // [1, 2, "a", "b"]

Want to go deeper on JavaScript?

RealJS teaches the mental models that let you write, read, and review modern JavaScript with confidence, whether you or an AI wrote it.

Learn more at realjs.com 💡

You can download this information as a printable cheat sheet:

Free Bonus: Array and Iterator Methods Cheat Sheet