JavaScript filter Method

In the previous lesson, we learned how map() transforms every item in an array. Now let’s learn filter(), which selects only the items you want to keep.

🔍 What is the filter Method?

The filter() method creates a new array containing only the items that pass a test. You give it a callback function, and that callback runs once for each item. When the callback returns true, the item is kept. When it returns false, the item is dropped.

const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter((number) => number % 2 === 0);

console.log(evens); // [2, 4, 6]
console.log(numbers); // [1, 2, 3, 4, 5, 6]

The callback (number) => number % 2 === 0 returns true only for even numbers, so filter() keeps just 2, 4, and 6. The original numbers array stays exactly the same, because filter() does not change the array it runs on.

🆚 filter vs map

These two methods look similar, but they do different jobs. map() transforms every item and always returns an array of the same length. filter() selects some items and returns an array that is the same length or shorter.

The key difference is what the callback returns. With map(), the callback returns a new value for each item. With filter(), the callback returns true or false to decide whether to keep each item.

🛒 A Practical Example

Filtering really shines with arrays of objects. Here we keep only the products that cost less than 50.

const products = [
  { name: "Notebook", price: 12 },
  { name: "Headphones", price: 80 },
  { name: "Pen", price: 3 },
  { name: "Monitor", price: 150 },
];

const affordable = products.filter((product) => product.price < 50);

console.log(affordable);
// [ { name: "Notebook", price: 12 }, { name: "Pen", price: 3 } ]

The callback checks product.price < 50 for each product. Only the two products that pass the test end up in the new affordable array. The same idea works for keeping active users.

const users = [
  { name: "Alex", active: true },
  { name: "Sam", active: false },
  { name: "Jordan", active: true },
];

const activeUsers = users.filter((user) => user.active);

console.log(activeUsers);
// [ { name: "Alex", active: true }, { name: "Jordan", active: true } ]

Let’s walk through what each line does:

• We start with three user objects, each carrying an active flag that is true or false.
• The callback (user) => user.active returns that flag directly, so filter() keeps the user whenever active is true.
• Alex and Jordan pass, while Sam is dropped, so activeUsers holds only the two active users.

📭 When Nothing Matches

If no item passes the test, filter() returns an empty array. It never returns undefined or null, so you can safely loop over the result without checking first.

const numbers = [1, 2, 3];

const bigNumbers = numbers.filter((number) => number > 100);

console.log(bigNumbers); // []
console.log(bigNumbers.length); // 0

Here is what happens line by line:

• The callback (number) => number > 100 is checked against 1, 2, and 3, and none of them clear 100.
• Since nothing passes, filter() hands back an empty array [] rather than undefined or null.
• Reading bigNumbers.length confirms it is a real array with 0 items, which is why it is still safe to loop over.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ filter() creates a new array of items that pass a test
• ✅ The callback returns true to keep an item and false to drop it
• ✅ map() transforms all items, while filter() selects some
• ✅ filter() never changes the original array
• ✅ It returns an empty array when nothing matches

🚀 What’s Next?

Sometimes you want just one matching item, not a whole array. Let’s continue to find.