reduce()
📚 What is reduce()? reduce() is the most powerful array method. It processes every item in an array and builds a single result - it can be a number, string, object, or even another array. The callback receives an accumulator (the running result) and the current item, and returns the next accumulat…
Appy Says…
map transforms, filter removes — but reduce does something different: it collapses an entire array down to a single value. A total, an object, a count, a string — reduce turns a list into anything you want.
What is Array reduce()?
reduce() iterates over an array, accumulating a single result by running a callback for each element. It takes an accumulator (running total) and the current element.
- •Syntax:
array.reduce((acc, curr) => newAcc, initialValue) - •acc = accumulator (result built up so far)
- •curr = current element being processed
- •initialValue = starting value for acc (always provide one)
- •Returns: the final accumulated value — not an array
- •Sum:
[1,2,3].reduce((acc, n) => acc + n, 0)→6 - •Count items:
reduce((acc, x) => { acc[x] = (acc[x]||0)+1; return acc; }, {})
Think of it like a Minecraft crafting inventory
reduce is like dragging items from a chest into a crafting grid one by one. Each item you add changes what you're making (the accumulator). At the end, you have one finished item — not a new chest of items.
How It Works
- •1. reduce starts with initialValue as acc
- •2. Calls callback(acc, arr[0]) → new acc
- •3. Calls callback(newAcc, arr[1]) → newer acc
- •4. Continues until every element is processed
- •5. Returns the final acc value
- •6. Without initialValue, first element becomes acc — dangerous, always provide one
Real-World Examples
- •Shopping cart total:
items.reduce((sum, item) => sum + item.price, 0) - •Group by category:
products.reduce((groups, p) => { groups[p.cat] = [...(groups[p.cat]||[]), p]; return groups; }, {}) - •Flatten nested array:
[[1,2],[3,4]].reduce((flat, arr) => flat.concat(arr), []) - •Spotify: counting plays per artist, grouping tracks by album — all reduce patterns
Key Facts
- •reduce is the most powerful array method — map and filter can both be implemented with reduce
- •Always provide an initialValue to avoid bugs on empty arrays
- •reduceRight() runs from right to left
- •Many functional programming patterns (like Redux state management) are based on reduce
Watch Out!
Skipping initialValue is a common trap. Without it, reduce uses the first element as the accumulator and skips it as curr. On an empty array, this throws a TypeError. Always provide an initial value: reduce((acc, x) => ..., 0).
Remember
array.reduce((acc, curr) => newAcc, initialValue). Use reduce to turn a list into a single value — number, string, object, or even another array.
What You Learned
- •reduce(callback, initialValue) collapses an array to one value by accumulating each element
- •Accumulator carries the running result; always provide an initialValue
- •Unlocks: totals, grouping, flattening, and any transformation that produces a single output
Key Facts
- →reduce is the most powerful array method — map and filter can both be implemented with reduce
- →Always provide an initialValue to avoid bugs on empty arrays
- →reduceRight() runs from right to left
- →Many functional programming patterns (like Redux state management) are based on reduce
Real-World Examples
Remember
array.reduce((acc, curr) => newAcc, initialValue). Use reduce to turn a list into a single value — number, string, object, or even another array.
Quick Quiz
reduce() returns?