1.22 — Array Methods: Quick Revision

Compact cheat sheet. Print-friendly.

How to use this material (instructions)

1. Skim before labs or interviews.
2. Drill gaps — reopen README.md → 1.22.a…1.22.j.
3. Practice — 1.22-Exercise-Questions.md.
4. Polish answers — 1.22-Interview-Questions.md.

---

Method overview table

Method	Returns	Mutates?	Purpose
map(fn)	New array (same length)	No	Transform each element
filter(fn)	New array (subset)	No	Select elements by test
reduce(fn, init)	Single value (any type)	No	Accumulate / aggregate
forEach(fn)	undefined	No	Side effects only
some(fn)	boolean	No	Any element passes?
every(fn)	boolean	No	All elements pass?
find(fn)	Element or undefined	No	First match
findIndex(fn)	Index or -1	No	Index of first match
slice(s, e)	New array (portion)	No	Extract without mutating
splice(s, d, ...i)	Array of deleted items	Yes	Insert / remove / replace
sort(fn)	Same array (sorted)	Yes	Order elements
reverse()	Same array (reversed)	Yes	Reverse order
flat(depth)	New array (flattened)	No	Flatten nesting
flatMap(fn)	New array (map+flat 1)	No	Map and flatten one level
concat(...arrs)	New array (merged)	No	Join arrays
includes(val)	boolean	No	Contains value?
indexOf(val)	Index or -1	No	First index of value

---

ES2023 non-mutating counterparts

Mutating	Non-mutating
sort(fn)	toSorted(fn)
reverse()	toReversed()
splice(s, d, ...i)	toSpliced(s, d, ...i)
arr[i] = val	arr.with(i, val)

---

Callback signatures

map:      (element, index, array) => newValue
filter:   (element, index, array) => boolean
reduce:   (accumulator, current, index, array) => newAccumulator
forEach:  (element, index, array) => void
some:     (element, index, array) => boolean
every:    (element, index, array) => boolean
find:     (element, index, array) => boolean
sort:     (a, b) => number  (negative = a first, 0 = equal, positive = b first)

---

Key patterns

Filter then map (narrow then transform)

arr.filter(x => x.active).map(x => x.name)

Frequency counter

arr.reduce((acc, val) => { acc[val] = (acc[val] || 0) + 1; return acc; }, {})

Group by key

arr.reduce((g, item) => { (g[item.key] ??= []).push(item); return g; }, {})

Sum

arr.reduce((sum, n) => sum + n, 0)

Remove falsy values

arr.filter(Boolean)

Unique values

[...new Set(arr)]

Immutable remove at index

[...arr.slice(0, i), ...arr.slice(i + 1)]

Immutable insert at index

[...arr.slice(0, i), newItem, ...arr.slice(i)]

Sort numbers (not lexicographic)

arr.sort((a, b) => a - b)          // ascending
arr.sort((a, b) => b - a)          // descending

Sort strings properly

arr.sort((a, b) => a.localeCompare(b))

Flatten all levels

arr.flat(Infinity)

---

Gotchas to remember

Gotcha	What happens	Fix
map without return	Array of undefined	Add return or use concise arrow
Returning object in arrow	n => { key: n } → undefined	Wrap: n => ({ key: n })
forEach return value	Always undefined	Use map if you need results
await in forEach	Fires concurrently, does not wait	Use for...of or Promise.all
reduce no initial value	Crashes on empty array	Always pass second argument
reduce no return	Accumulator becomes undefined	Always return acc
sort() default	Lexicographic: [1,10,2]	Pass compare function
sort() mutates	Original array changed	Copy first: [...arr].sort()
splice() mutates	Original array changed	Use slice + spread for immutable
slice vs splice names	Easy to confuse	slice = copy, splice = cut/place
filter(Boolean) with 0	Removes 0 (it is falsy)	Use explicit check if 0 is valid
some([]) / every([])	false / true	Vacuous truth — intentional

---

Decision flowchart

Need new array of same length?     → map
Need subset of elements?           → filter
Need single value from array?      → reduce
Just doing something per element?  → forEach
Any element matches?               → some
All elements match?                → every
Find first match?                  → find / findIndex
Extract portion (no mutate)?       → slice
Insert/remove in place?            → splice (or toSpliced for immutable)
Sort?                              → toSorted (or [...arr].sort())
Flatten nesting?                   → flat / flatMap

---

Chaining order

source data
  .filter(...)     ← narrow the set (fewer elements = less work downstream)
  .map(...)        ← transform each element
  .sort(...)       ← order the results
  .slice(0, n)     ← take top N (pagination)
  .reduce(...)     ← aggregate into final value

---

Empty array behavior

Method	Empty array result
[].map(fn)	[]
[].filter(fn)	[]
[].reduce(fn, init)	init
[].reduce(fn)	TypeError
[].forEach(fn)	undefined (callback never runs)
[].some(fn)	false
[].every(fn)	true
[].find(fn)	undefined
[].sort()	[]
[].flat()	[]

---

Master workflow

1. Identify — Do you need to transform, filter, accumulate, or just iterate?
2. Pick method — Use the decision flowchart above.
3. Chain — Compose methods in a pipeline: filter → map → reduce.
4. Immutability — Prefer non-mutating methods. Copy before sort/splice.
5. Optimize later — Only collapse chains into a single loop if profiling shows a bottleneck.

---

End of 1.22 quick revision.