The JavaScript Array.filter() method

#javascript #array

Sometimes we have an array but we want to return only a select few items from the array. For example, we can use the array.filter() method to filter an array of people to only find the female characters of the array.

const people = [
  { name: 'Debbie', gender: 'female' },
  { name: 'Josh', gender: 'male' }
]

How the filter method works

The filter() method calls a callback function once for each element in an array and constructs a new array for all the values that pass the test provided in this callback function.

The function takes 3 arguments,

the current value, which is the current value we are iterating over
the index, what iteration we are on
the original array on which filter is called

Returns female values

people.filter(function (currentValue, index, originalArray) {
  //decide who should be returned
  return currentValue.gender === 'female'
})

Exclude the original array

We can exclude the original array in our callback function if we are not using it. We may want to use it to push something to the array before we perform the test of what to return but if not we can simply remove it.

people.filter(function (currentValue, index) {
  //decide who should be returned
  return currentValue.gender === 'female'
})

Naming the current value

Normally we name the currentValue the singular of the array so in this case we should name it person.

people.filter(function (person, index) {
  return person.gender === 'female'
})

Using the arrow function

We can also use the arrow function instead

people.filter((person, index) => {
  return person.gender === 'female'
})

Removing the index and parenthesis

As we are not using the index we can get rid of that. We can also get rid of the parenthesis as we don't need them if there is only one argument in an arrow function

people.filter(person => {
  return person.gender === 'female'
})

Removing the brackets and return keyword

And as it is just one line we are returning we can remove the return and the curly brackets and have it all on the one line keeping it very short. This can take a bit of getting used to as it is not as easy to read as the previous examples but many people will use this format.

Think of it as, for the array of people filter every person and return the ones that have a gender of female.

people.filter(person => person.gender === 'female')

Example

The great thing about filter is that it does not mutate the original array. So if you console.log(people) you will still get all the people from the people array as filter creates a new array. Therefore we can store our new filter in a const.

const people = [
  { name: 'Debbie', gender: 'female' },
  { name: 'Josh', gender: 'male' }
]
const women = people.filter(person => person.gender === 'female')
console.log(people) // [{ name: 'Debbie', gender: 'female' },{ name: 'Josh', gender: 'male' }]
console.log(women) // [{ name: 'Debbie', gender: 'female' }]

Paste it in the console to see for yourself and play around with the values or check out the codepen I created.

Learn More

This article is inspired by Jake Dohm's video which I encourage you to check out.
To read more about it check out the MDn docs for Array.prototype.filter()
Check out my post on the array at method
Check out my post on the array map method