Array methods
map, filter, reduce, find and chaining.
Updated
What an array is
An array is an ordered list of values. Each value has a position numbered from 0 (the index).
const fruits = ['apple', 'pear', 'plum']
fruits[0] // 'apple'
fruits.at(-1) // 'plum' — the last one
fruits.length // 3An array can hold anything: numbers, objects, other arrays. In practice you almost always work with lists of objects (products, users, orders).
Two families of methods
The most important distinction:
| Changes the array (mutation) | Returns a new array | |
|---|---|---|
| Methods | push, pop, shift, unshift, splice, sort, reverse, fill |
map, filter, slice, concat, toSorted, toReversed, with, [...arr] |
| In React state | ✗ — the UI doesn't update | ✓ |
The rule: in UI code, prefer the methods that return a new array.
Transformation methods — what each one does
| Method | Receives | Returns | The question it answers |
|---|---|---|---|
map(fn) |
each element | a new array, the same length | "turn each element into something else" |
filter(fn) |
each element | a new array, shorter or equal | "keep only the elements that..." |
reduce(fn, start) |
accumulator + element | a single value (number, object, array) | "combine everything into one result" |
find(fn) |
each element | the first match or undefined |
"which is the first one that..." |
findIndex(fn) |
each element | the index or -1 |
"where is..." |
some(fn) |
each element | true if at least one passes |
"is there any that..." |
every(fn) |
each element | true if all pass |
"are they all..." |
includes(x) |
a value | true / false |
"does it contain the value..." |
forEach(fn) |
each element | undefined |
side effects only (log, send) |
flatMap(fn) |
each element | a new array, flattened one level | "each element becomes several" |
const products = [
{ name: 'Laptop', price: 4000, inStock: true },
{ name: 'Mouse', price: 100, inStock: false },
{ name: 'Monitor', price: 1200, inStock: true },
]
products.map(p => p.name) // ['Laptop', 'Mouse', 'Monitor']
products.filter(p => p.inStock) // Laptop, Monitor
products.find(p => p.price < 500) // { name: 'Mouse', ... }
products.some(p => !p.inStock) // true
products.reduce((sum, p) => sum + p.price, 0) // 5300map vs forEach
map |
forEach |
|
|---|---|---|
| Returns | a new array | nothing |
| You use it to | get transformed data (including JSX in React) | do something with each element |
arr.forEach(x => result.push(f(x))) is a badly written map.
reduce — explained step by step
[10, 20, 30].reduce((acc, n) => acc + n, 0)
// step 1: acc = 0, n = 10 → 10
// step 2: acc = 10, n = 20 → 30
// step 3: acc = 30, n = 30 → 60Use it for sums, grouping, building an object. If it gets hard to read, a for...of is perfectly acceptable.
Chaining
Methods that return an array can be chained — you read the transformation top to bottom:
const total = cart
.filter(item => item.inStock)
.map(item => item.price * item.qty)
.reduce((sum, x) => sum + x, 0)Sorting — the traps
[10, 9, 100].sort() // [10, 100, 9] — sorts as TEXT!
[10, 9, 100].toSorted((a, b) => a - b) // [9, 10, 100] ✓ new, numeric
users.toSorted((a, b) => a.name.localeCompare(b.name, 'en')) // correct alphabetical order, accents includedSpread and destructuring
const [first, second, ...rest] = [1, 2, 3, 4] // first=1, second=2, rest=[3,4]
const merged = [...a, ...b] // combining
const copy = [...arr] // a (shallow) copySummary
- An array = an ordered list, indexed from 0.
maptransforms,filterselects,reducecombines,findsearches,some/everycheck.- In UI code use the methods that return a new array;
sortwith a comparator.