1. Selecting Specific Items

The .filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements that pass the test condition implemented by the provided callback function.

2. Why It Matters

.filter() allows you to remove unwanted items or search array collections cleanly without writing manual for loops or mutating the source array.

3. The Pattern

Pass a callback function that returns true to keep an item, or false to discard it:

const scores = [45, 82, 91, 58, 76];

// Keep only passing scores (>= 70)
const passingScores = scores.filter((score) => score >= 70);

console.log(passingScores); // [82, 91, 76]
console.log(scores);        // [45, 82, 91, 58, 76] (Original array untouched!)

4. Filtering Object Arrays & Method Chaining

Combine .filter() and .map() into a clean data processing pipeline:

const inventory = [
  { name: "Laptop", inStock: true, price: 999 },
  { name: "Phone", inStock: false, price: 500 },
  { name: "Monitor", inStock: true, price: 300 },
];

// Pipeline: Filter available items -> Map to uppercase names
const availableProductNames = inventory
  .filter((item) => item.inStock)
  .map((item) => item.name.toUpperCase());

console.log(availableProductNames); // ["LAPTOP", "MONITOR"]

5. Common Mistakes

• Mutating Objects Inside Filter Callback: .filter() callbacks should be pure test functions. Avoid mutating item properties inside the filter test!
• Expecting a Single Item Return: .filter() ALWAYS returns an array (even if 0 or 1 items match). If you want to find a single matching item, use .find().

6. Try It Yourself

Write it yourself. The tests below run against your code.

function getPassingScores(scores) {
  return [];
}

7. Next Steps

Combine .filter() and .map() to clean data pipelines. Next, let's aggregate arrays into single values using .reduce()!