Nuxtstop

For all things nuxt.js

The JavaScript Array.filter() method

#javascript #array
The JavaScript Array.filter() method
30 3

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' }
]
Enter fullscreen mode Exit fullscreen mode

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'
})
Enter fullscreen mode Exit fullscreen mode

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'
})
Enter fullscreen mode Exit fullscreen mode

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'
})
Enter fullscreen mode Exit fullscreen mode

Using the arrow function

We can also use the arrow function instead

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

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'
})
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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' }]
Enter fullscreen mode Exit fullscreen mode

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

Learn More

Add comment