How The Hell Do I Use Filter?
Tags: webdev, beginners, javascript, discuss
Published: 2018-12-22 00:00:00

---
title: 'How The Hell Do I Use Filter?'
description: 'A quick and dirty guide to filter.'
date: '2018-12-22'
published: true
tags: webdev, beginners, javascript, discuss
---

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](https://lvrbrtsn.com//blog/how-the-hell-do-i-use-map). 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](https://lvrbrtsn.com//blog/how-the-hell-do-i-use-map) but basically it just means its a function that takes another function as an argument. Check out this example below.

```javascript
// 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 `filter`away 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.

```javascript
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:

```javascript
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!