Two questions every budgeting app has to answer: “how much did I spend on food?” and “what were my biggest expenses?”. The first turns a list into one number per category. The second puts the list in a useful order. JavaScript has a method for each, and each has one famous trap.
\nYou already know the accumulator pattern: start with a value, update it for each item, use it at the end. reduce is that pattern as a method:
const expenses = [\n { label: \"Coffee\", amount: 450, category: \"food\" },\n { label: \"Train\", amount: 1220, category: \"travel\" },\n { label: \"Lunch\", amount: 1350, category: \"food\" },\n];\n\nconst total = expenses.reduce((sum, e) => sum + e.amount, 0);\nconsole.log(total);reduce takes two arguments: a callback and an initial value (here 0). It calls the callback once per item with the current accumulator (sum) and the item (e). Whatever the callback returns becomes the accumulator for the next call. After the last item, that final accumulator is the result.
Always pass the initial value. Without it, reduce uses the first item as the starting accumulator, which here would be a whole expense object rather than a number, and on an empty list it throws TypeError: Reduce of empty array with no initial value.
The accumulator can be anything, including an object. That is how you build per-category totals:
\nconst expenses = [\n { label: \"Coffee\", amount: 450, category: \"food\" },\n { label: \"Train\", amount: 1220, category: \"travel\" },\n { label: \"Lunch\", amount: 1350, category: \"food\" },\n];\n\nconst byCategory = expenses.reduce((totals, e) => {\n totals[e.category] = (totals[e.category] ?? 0) + e.amount;\n return totals;\n}, {});\n\nconsole.log(byCategory);For each expense, read the category’s running total (or 0 if this is the first time the category appears; the ?? operator gets its own explanation next lesson), add the amount, and store it back with bracket notation, since the property name is in a variable. Then return the same object so the next call receives it.
When you want the expenses themselves grouped, rather than a total per group, there is a built-in shortcut since 2024: Object.groupBy(expenses, (e) => e.category) returns an object whose properties are the categories and whose values are arrays of the matching expenses. It is supported in all current browsers and Node.js, and it reads better than the equivalent reduce. Totals still need reduce (or a loop over the groups).
reduce is powerful, and that is a reason to use it with restraint. If a map, filter or a short for...of says the same thing more plainly, prefer it. Totals and grouping are where reduce reads best.
Sorting looks easy and contains the most famous trap in JavaScript:
\nconst amounts = [450, 1220, 99];\namounts.sort();\nconsole.log(amounts);Without instructions, sort converts every item to a string and orders them as text, like words in a dictionary. As text, “1220” comes before “450” because the character “1” comes before “4”. That is fine for words and wrong for numbers.
The fix is a comparator: a function that receives two items, a and b, and returns a number that says which comes first.
| Comparator returns | \nResult | \n
|---|---|
| a negative number | \na goes before b | \n
| a positive number | \nb goes before a | \n
0 | \nkeep their current order | \n
For numbers, subtraction produces exactly that:
\nconst amounts = [450, 1220, 99];\nconsole.log([...amounts].sort((a, b) => a - b)); // ascending\nconsole.log([...amounts].sort((a, b) => b - a)); // descendingWhen a is 450 and b is 99, a - b is positive, so 99 moves first. Flip it to b - a for biggest first.
Text needs its own comparison, because < compares character codes and puts every uppercase letter before every lowercase one. localeCompare compares the way a dictionary in a real language does:
const labels = [\"lunch\", \"Train\", \"coffee\", \"Éclair\"];\nconsole.log(labels.toSorted((a, b) => a.localeCompare(b)));Objects are sorted by one of their properties, using the same patterns: (a, b) => b.amount - a.amount for most expensive first, (a, b) => a.label.localeCompare(b.label) for alphabetical.
sort rearranges the array in place and returns that same array. If other code is reading the list, perhaps to show expenses in the order they were added, it is now sorted too. That is why the examples above sort a copy, [...amounts]. The newer toSorted method (part of JavaScript since 2023 and supported by all current browsers) returns a sorted copy directly, so you do not have to remember the copy step:
const expenses = [\n { label: \"Coffee\", amount: 450 },\n { label: \"Train\", amount: 1220 },\n { label: \"Lunch\", amount: 1350 },\n];\nconst biggestFirst = expenses.toSorted((a, b) => b.amount - a.amount);\nconsole.log(biggestFirst.map((e) => e.label), expenses.map((e) => e.label));Next you deal with data that is not there at all: missing properties, empty values, and two collections, Map and Set, built for lookups and uniqueness.
\n","toc":[{"id":"sec-1","text":"reduce: many values into one","level":2},{"id":"sec-2","text":"Grouping: reduce into an object","level":3},{"id":"sec-3","text":"sort: putting things in order","level":2},{"id":"sec-4","text":"sort changes the original","level":3}],"takeaways":["reduce walks a list carrying an accumulator; the callback returns the next accumulator, and the last one is the result.","Always pass reduce an initial value, such as 0 for totals or {} for grouping; without one, an empty list throws.","Without a comparator, sort compares items as strings, so [450, 1220, 99] sorts to [1220, 450, 99].","A comparator returns a negative number to put a first, positive to put b first; (a, b) => a - b sorts numbers ascending.","sort mutates the array in place; use toSorted (or sort a copy) when the original must stay as it is."],"further":[{"title":"Array.prototype.reduce() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce"},{"title":"Array.prototype.sort() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"},{"title":"Array.prototype.toSorted() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted"}],"quiz":[{"q":"What does [450, 1220, 99].sort() return?
[99, 450, 1220]","why":"That needs a numeric comparator. The default sort turns each number into a string and compares the text."},{"text":"[1220, 450, 99]","why":"Correct. As strings, “1220” comes before “450” because “1” comes before “4”, and “450” before “99” because “4” comes before “9”."},{"text":"[1220, 99, 450]","why":"Text is compared character by character from the left, so “450” sorts before “99”."}],"answer":1},{"q":"Which comparator sorts expenses from the most expensive to the cheapest?
","options":[{"text":"(a, b) => a.amount - b.amount","why":"This returns a negative number when a is cheaper, putting cheaper items first. That is ascending order."},{"text":"(a, b) => a.amount > b.amount","why":"This returns a boolean, not a number. Comparators must return negative, zero or positive; booleans give unreliable results."},{"text":"(a, b) => b.amount - a.amount","why":"Correct. When b costs more, the result is positive, so b is placed before a. Bigger amounts come first."}],"answer":2},{"q":"[].reduce((sum, e) => sum + e.amount) is called on an empty list. What happens?
reduce(fn, 0), makes it return 0 for an empty list instead."},{"text":"It returns 0.","why":"Only if you pass 0 as the initial value. Without it, reduce has nothing to start the accumulator with."},{"text":"It returns undefined.","why":"reduce does not quietly return undefined here; it throws “Reduce of empty array with no initial value”."}],"answer":0},{"q":"You show expenses sorted by amount in one panel and in the order they were added in another. Both panels read the same expenses array. What goes wrong with expenses.sort(byAmount)?
sort returns a sorted copy.","why":"sort returns the same array it sorted. It reorders the original in place."},{"text":"The “order added” panel also becomes sorted, because sort mutated the shared array.","why":"Correct. Use expenses.toSorted(byAmount) or [...expenses].sort(byAmount) to sort a copy."},{"text":"It throws, because the array is declared with const.","why":"const does not prevent changes to the array’s contents, and sorting only rearranges contents."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const expenses = [\n { label: \"coffee\", amount: 450, category: \"food\" },\n { label: \"Train\", amount: 1220, category: \"travel\" },\n { label: \"Lunch\", amount: 1350, category: \"food\" },\n { label: \"Museum\", amount: 99, category: \"fun\" },\n];\n\n// Sum of all amounts (0 for an empty list)\nfunction totalCents(expenses) {\n return 0;\n}\n\n// An object like { food: 1800, travel: 1220, fun: 99 }\nfunction totalsByCategory(expenses) {\n return {};\n}\n\n// A NEW array, most expensive first; do not reorder the original\nfunction biggestFirst(expenses) {\n return expenses.sort();\n}\n\n// A NEW array sorted by label, A to Z, ignoring upper/lower case\nfunction alphabetical(expenses) {\n return expenses;\n}\n\nconsole.log(totalCents(expenses), totalsByCategory(expenses));\n"},"solution":{"js":"const expenses = [\n { label: \"coffee\", amount: 450, category: \"food\" },\n { label: \"Train\", amount: 1220, category: \"travel\" },\n { label: \"Lunch\", amount: 1350, category: \"food\" },\n { label: \"Museum\", amount: 99, category: \"fun\" },\n];\n\nfunction totalCents(expenses) {\n return expenses.reduce((sum, e) => sum + e.amount, 0);\n}\n\nfunction totalsByCategory(expenses) {\n return expenses.reduce((totals, e) => {\n totals[e.category] = (totals[e.category] ?? 0) + e.amount;\n return totals;\n }, {});\n}\n\nfunction biggestFirst(expenses) {\n return expenses.toSorted((a, b) => b.amount - a.amount);\n}\n\nfunction alphabetical(expenses) {\n return expenses.toSorted((a, b) => a.label.localeCompare(b.label));\n}\n\nconsole.log(totalCents(expenses), totalsByCategory(expenses));\n"},"checks":[{"id":"total","test":"return totalCents(expenses) === 3119 && totalCents([]) === 0;\n"},{"id":"by-category","test":"const t = totalsByCategory(expenses);\nreturn t.food === 1800 && t.travel === 1220 && t.fun === 99 && Object.keys(t).length === 3;\n"},{"id":"biggest","test":"const out = biggestFirst(expenses);\nreturn Array.isArray(out) && out.map((e) => e.amount).join() === '1350,1220,450,99';\n"},{"id":"alpha","test":"const out = alphabetical(expenses);\nreturn Array.isArray(out) && out.map((e) => e.label).join() === 'coffee,Lunch,Museum,Train';\n"},{"id":"no-mutation","test":"const list = [{ label: 'b', amount: 1 }, { label: 'a', amount: 2 }];\nconst a = biggestFirst(list);\nconst b = alphabetical(list);\nreturn list[0].label === 'b' && a !== list && b !== list;\n"}],"title":"Totals and rankings","prompt":"Fill in four functions for Pocket’s summary screen:
\ntotalCents(expenses) returns the sum of every amount (and 0 for an empty list). Use reduce.totalsByCategory(expenses) returns an object with one property per category holding that category’s total, such as { food: 1800, travel: 1220, fun: 99 }.biggestFirst(expenses) returns a new array sorted by amount, largest first.alphabetical(expenses) returns a new array sorted by label from A to Z, treating “coffee” and “Coffee” alike.Neither sort may reorder the array it receives.
\n","hints":["reduce((sum, e) => sum + e.amount, 0): the 0 at the end is the initial value, and it is what makes the empty list work.","For the categories, start from {} and in the callback do totals[e.category] = (totals[e.category] ?? 0) + e.amount; return totals;.","toSorted returns a sorted copy. Largest first is (a, b) => b.amount - a.amount; by label is (a, b) => a.label.localeCompare(b.label)."],"explanation":"Both totals are the accumulator pattern written with reduce. The initial value decides the shape of the result: 0 for a number, {} for an object of totals. In the grouping callback, bracket notation creates each category’s property the first time it appears, and returning totals passes the same object on to the next call. The starter’s expenses.sort() failed twice: it sorted the objects as text (every object becomes the string “[object Object]”) and it reordered the caller’s array. toSorted with a comparator fixes both. localeCompare puts “coffee” before “Lunch”, where < would put every capitalised label first.
totalCents sums the amounts and returns 0 for an empty list","by-category":"totalsByCategory totals each category","biggest":"biggestFirst sorts by amount, largest first","alpha":"alphabetical sorts by label, ignoring case","no-mutation":"The original array keeps its order"}},"words":776,"readMinutes":4}