JavaScript filter() Guide: Keep What You Need

Whether you’re sipping your morning coffee or taking a break between coding sessions, sometimes you don’t need every item in your data. You just need the ones that meet a specific condition.

Maybe you’re building a menu that displays only drinks under $5, or a task list that shows unfinished assignments. Instead of manually checking every item, JavaScript gives you a handy tool for the job: the array “filter()” method.

Let’s break it down.

Why Filter Your Arrays?

Imagine you have a list of coffee prices, but your budget only allows drinks that cost less than $5.

You could use a traditional “for” loop to check every price and add the qualifying ones to a new array. It works, but there’s a simpler approach.

Enter filter()

The “filter()” method checks each item in an array against a condition and returns a new array containing only the items that pass.

Here’s how it works:

const coffeePrices = [3.50, 4.00, 4.50, 5.50, 6.00];

const budgetDrinks = coffeePrices.filter(price => price < 5);

console.log(budgetDrinks); // [3.50, 4.00, 4.50]

That’s it! JavaScript checks each price and keeps only those below $5. The original array stays unchanged.

How to Read It

– “coffeePrices.filter(…)“: “Check every price in my list.”

– “price => price < 5“: “Keep the price if it’s less than $5.”

– “budgetDrinks“: “Save the matching prices in this new array.”

Notice the difference between “map()” and “filter()”? With “map()”, you transform every item. With “filter()”, you decide which items make the cut.

Real-World Example: Finding Available Drinks

Let’s say you’re working with a coffee menu and want to display only the drinks currently available.

const menu = [

  { name: “Espresso”, available: true },

  { name: “Cortado”, available: false },

  { name: “Latte”, available: true }

];

const availableDrinks = menu.filter(drink => drink.available);

console.log(availableDrinks)

The result contains the Espresso and Latte objects because their “available” property is “true”. The Cortado doesn’t make the cut.

This same technique can help you filter products, completed tasks, search results, or just about any list of data.

The Takeaway

Use “map()” when you want to transform every item into a new value.

Use “filter()” when you want to keep only the items that meet a condition.

Both methods return new arrays without modifying the original one, making your code easier to read and reason about.

Now take another sip, experiment with a few conditions, and see what you can filter out of your own projects. Your arrays, your rules!