Functional array methods are the most powerful tool in day-to-day JavaScript – this chapter uses them to build our budget app's entire evaluation logic.

map(): transform every element

map() produces a NEW array of the same length, where EVERY element has been replaced by the callback function's result:

const amounts = [2400, -850, -120];

const formatted = amounts.map(amount => `${amount} EUR`);
console.log(formatted); // ['2400 EUR', '-850 EUR', '-120 EUR']
console.log(amounts);   // unchanged: [2400, -850, -120] - map() does NOT mutate

filter(): select elements

filter() produces a NEW array containing only the elements for which the callback function returns true:

const amounts = [2400, -850, -120, -60, 300];

const expenses = amounts.filter(amount => amount < 0);
console.log(expenses); // [-850, -120, -60]

const income = amounts.filter(amount => amount > 0);
console.log(income); // [2400, 300]

reduce(): aggregate an array into a single value

reduce() is the most versatile method, but also the hardest to read at first. It iterates over the array while accumulating a single value – exactly what we needed for the manual summing loop from chapter 10:

const amounts = [2400, -850, -120, -60, 300, -45];

const balance = amounts.reduce((accumulator, amount) => accumulator + amount, 0);
console.log(balance); // 1625 - identical to the manual loop's result from chapter 10!

The callback's first parameter (accumulator) carries the running result so far, the second parameter (amount) is the current element. reduce()'s own second call argument (here 0) is the accumulator's STARTING value.

// Advanced example: sum PER category with reduce()
const transactions = [
  { category: 'Rent', amount: -850 },
  { category: 'Groceries', amount: -60 },
  { category: 'Groceries', amount: -45 },
  { category: 'Salary', amount: 2400 },
];

const totalsByCategory = transactions.reduce((accumulator, transaction) => {
  const soFar = accumulator[transaction.category] ?? 0;
  accumulator[transaction.category] = soFar + transaction.amount;
  return accumulator;
}, {});

console.log(totalsByCategory);
// { Rent: -850, Groceries: -105, Salary: 2400 }

More commonly used methods

• find(callback) – returns the FIRST matching element (not an array!), or undefined.
• some(callback) – true if AT LEAST one element matches.
• every(callback) – true if ALL elements match.
• sort(callback) – sorts (CAUTION: mutates the original!), callback returns negative/0/positive.
• forEach(callback) – like a for...of loop, but with NO return value – not a substitute for map()/filter().

const transactions = [
  { category: 'Rent', amount: -850 },
  { category: 'Salary', amount: 2400 },
];

const salary = transactions.find(t => t.category === 'Salary');
console.log(salary); // { category: 'Salary', amount: 2400 }

const hasLargeExpense = transactions.some(t => t.amount < -500);
console.log(hasLargeExpense); // true

const sortedByAmount = [...transactions].sort((a, b) => a.amount - b.amount);
console.log(sortedByAmount.map(t => t.amount)); // [-850, 2400]

Chaining methods: the real payoff

These methods really pay off when CHAINED – a single, readable expression chain instead of several manual loops:

const transactions = [
  { category: 'Rent', amount: -850 },
  { category: 'Groceries', amount: -60 },
  { category: 'Salary', amount: 2400 },
  { category: 'Leisure', amount: -45 },
];

const totalLargeExpenses = transactions
  .filter(t => t.amount < 0)
  .map(t => Math.abs(t.amount))
  .filter(amount => amount > 50)
  .reduce((sum, amount) => sum + amount, 0);

console.log(totalLargeExpenses); // 910 - Rent (850) + Groceries (60)