The JavaScript Array.filter() method
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((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((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((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