Skip to content

Module Recap

Module 01 introduced the array methods that replace manual for loops with expressive, declarative function calls. Here is what you covered and how each piece fits into the BudgetBuddy app.

forEach iterates for side effects — no return value. Use it to log, update the DOM, or call a function for each item.

map transforms every item and returns a new array of the same length. Use it to extract fields, reshape objects, or build HTML strings.

filter returns a new array of items that pass a test. Use it to narrow down a collection — by category, by amount, by date.

find returns the first matching item (or undefined). Use it to look up a specific record by ID or unique field.

reduce collapses an array into a single accumulated value. Use it for sums, grouped totals, and lookup objects.

sort reorders an array in place. Use a comparator function; sort a copy first to avoid mutating the original.

some / every return a boolean about the array. some — at least one match. every — all items match.

FeatureMethod(s)
Render all expenses to the DOMmap → HTML strings → join
Show only Food expensesfilter
Delete an expensefilter (keep everything except that id)
Calculate total spendingreduce
Total by categoryfilter + reduce
Look up expense by idfind
Sort by date or amountsort on a copy
Validate: any expense over budget?some

Every one of these is a one- or two-method call, not a loop.

map, filter, find, reduce, some, and every never change the original array. sort does. When you write code that handles data, defaulting to non-mutating methods makes your logic safer and easier to reason about — the array going in is always the same as the array you started with.

Module 02 introduces ES6 classes. Rather than managing your expense objects as raw data shapes { id, description, amount, category, date }, you will define an Expense class that gives every expense consistent structure, validation, and behavior. The array methods from this module do not change — they just start operating on class instances instead of plain objects.

ES6 Classes →