How The Hell Do I Use Filter?

This is part two of a three-part series on the most helpful array methods, map, reduce, and filter. We will be tackling reduce next. The post on map can be found here. Today however we will be talking all about filter! Filter is a super useful method for removing elements from a list that don't meet certain criteria. What is that criteria you might ask? Whatever you want! This is made possible because filter like map is a Higher Order Function which we go over in the last post but basically it just means its a function that takes another function as an argument. Check out this example below.

// Dummy data to work with
const students = [ { name: 'Leroy Jenkins' grade: 55 },
                   { name: 'Tommy Pickles' grade: 98 },
                   { name: 'Mike Tyson' grade: 85 },
                   { name: 'Donnie Darko' grade: 90 } ]

// Our filtering criteria. Which can be any
// function that returns true and false
const isPassing = (student) => student.grade >= 65

// Usage of filter.
const onlyWinners = students.filter(isPassing)
// => [ { name: 'Tommy Pickles' grade: 98 },
//      { name: 'Mike Tyson' grade: 85 },
//      { name: 'Donnie Darko' grade: 90 } ]

So the only condition for using filter is that you supply it with a function that returns a boolean.
It's then going to iterate over your array running your supplied function through it. When it passes in an item (or student in this case) and the function returns true then it keeps that value for the new array being created. If the function returns false then filter will say "get out of here you stinky item" and filter it out. Hence the name! I love it when things in programming are actually named well (▰˘◡˘▰).

Filter is an insanely useful method. Think of how often you need to perform an operation over just a subset of data. Well, now you can just filteraway anything that doesn't meet your criteria and them map your operation over what is left. This is both efficient and easy to understand. I think that the real power these array methods hold is their ability to be chained together.

const cuisines = [
  { name: 'tacos', rating: 10, status: 'raw' },
  { name: 'thai', rating: 10, status: 'raw' },
  { name: 'pizza', rating: 8, status: 'raw' },
  { name: 'bbq', rating: 7, status: 'raw' },
]

const preppedMeals = cuisines
  .filter(food => food.rating > 8)
  .map(food => ({ ...food, status: 'prepped' }))

I often use filter to remove values that contain 'undefined' or null on a piece of data. That can be done really simply like this:

const safetyDance = array
  .filter(obj => obj.prop) // since undefined and
  // null are falsy they will be removed.
  .map(prop => prop.otherProp) // Safe to do because
// of our filtering!

All in all filter is a lot like map but instead of transforming data, it is used to filter it based on criteria you define! It becomes incredibly powerful when used together with map, and they can be chained together to do both in a single declaration! You can start to see how these methods are more than meets the eye when using them together like this. It starts to make you wonder what can be accomplished if we take this up a level. Well, good news! You will find out with Reduce! Subscribe below to be notified when the reduce post comes out!

Comments

[Sumnan Azadi]

wouldn't it be like that
const preppedMeals = cuisines
.filter(cuisines => cuisines.rating > 8)
.map(cuisines => ({ ...cuisines, status: 'prepped' }))