filter and find

map transforms every item. filter and find answer questions about which items match a condition. They are the array methods you reach for whenever you need to search or narrow down a collection.

filter

filter returns a new array containing only the items for which the callback returns true. Items for which the callback returns false are excluded. The original array is unchanged.

const expenses = [
  { id: 1, description: 'Coffee', amount: 4.50, category: 'Food', date: '2024-01-15' },
  { id: 2, description: 'Bus pass', amount: 30.00, category: 'Transport', date: '2024-01-14' },
  { id: 3, description: 'Lunch', amount: 12.75, category: 'Food', date: '2024-01-15' },
  { id: 4, description: 'Gym membership', amount: 45.00, category: 'Health', date: '2024-01-10' },
  { id: 5, description: 'Dinner out', amount: 38.20, category: 'Food', date: '2024-01-16' },
];

const foodExpenses = expenses.filter(expense => expense.category === 'Food');
console.log(foodExpenses);
// [
//   { id: 1, description: 'Coffee', ... },
//   { id: 3, description: 'Lunch', ... },
//   { id: 5, description: 'Dinner out', ... },
// ]

The callback is called a predicate — a function that returns true or false. Write it as a direct condition.

Filtering by numeric threshold

const bigExpenses = expenses.filter(expense => expense.amount > 20);
// Bus pass ($30), Gym membership ($45), Dinner out ($38.20)

Filtering out a deleted item

A common pattern in BudgetBuddy: “remove” an expense by filtering it out rather than splicing the original array.

function deleteExpense(expenses, id) {
  return expenses.filter(expense => expense.id !== id);
}

const updated = deleteExpense(expenses, 2);
// updated contains all items except id === 2

This is safer than splice — it does not mutate the original array, so the original is always there if you need it.

find

find returns the first item for which the callback returns true. If no item matches, it returns undefined.

const expense = expenses.find(e => e.id === 3);
console.log(expense);
// { id: 3, description: 'Lunch', amount: 12.75, category: 'Food', date: '2024-01-15' }

find stops at the first match — it does not scan the whole array once it finds something. Use it when you are looking for a specific record by a unique identifier.

Checking for undefined

Because find returns undefined when nothing matches, always check before using the result:

const match = expenses.find(e => e.id === 99);
if (match) {
  console.log(match.description);
} else {
  console.log('Not found');
}

filter vs find: the decision rule

Use filter when…	Use find when…
You want all matching items	You want one specific item
You expect multiple matches	You expect zero or one match
You are building a subset	You are looking up by ID or unique field

filter always returns an array (possibly empty). find returns the item or undefined.

findIndex

findIndex works like find but returns the index of the first match instead of the item itself. Returns -1 if nothing matches.

const idx = expenses.findIndex(e => e.id === 3);
console.log(idx); // 2

This is useful when you need to replace an item in an array by position.

Combining filter with map

A filter followed by a map is one of the most common patterns in JavaScript — narrow the array, then transform what remains:

const foodAmounts = expenses
  .filter(e => e.category === 'Food')
  .map(e => e.amount);

console.log(foodAmounts); // [4.50, 12.75, 38.20]

You will see this pattern constantly in BudgetBuddy when rendering a filtered category view.

Exercise

Using the expenses array from above:

1. Use filter to get all expenses in the 'Transport' category.
2. Use filter to get all expenses with an amount less than $20.
3. Use find to get the expense with id === 4.
4. Use find to search for id === 99 — log the result and handle the undefined case.
5. Use filter + map together to get the descriptions of all 'Food' expenses.

Recap

• filter returns a new array of all items where the callback returns true. The original is unchanged.
• find returns the first matching item, or undefined if nothing matches.
• Use filter for subsets and find for single lookups.
• findIndex returns the index of the first match, or -1.
• filter + map chained together — narrow then transform — is one of the most common patterns you will write.