Array.filter() - for filtering items from an array

#javascript

In this second piece of the Array method series, I'll explain what the filter method is and how it works.

Here's the video version: Array.filter() YouTube

What is the Filter Method?

The filter method of arrays is a higher-order function that loops through each item in the array, tests the item against a condition, and only returns that item if it passes the condition. If it doesn't, it will not make it to the resulting array. Basically, it filters out items in an array.

As a higher-order function, it takes a function as an argument. During the loop, this function receives an item (and its index position in the array), tests the item against a condition. If it passes, the item makes it to the new array, else, it doesn't.

The returned output of the filter method is a new array containing the items that passed the condition.

Syntax of the Filter method

someArray.filter(function(item, index, array) {
  // condition to test value with
  // return true or false
})

The item argument is the item being looped on.

The index argument is the position of the item in the array. For example, the first item has an index of 0, and the second, 1.

The array argument is the array itself.

Without the Filter method

The filter method is a declarative abstracted function that literally "goes through an array and picks some out of it". Here's an example showing how you can filter an array without this method:

const array = [...]

const newArray = []

for(let i = 0, i < array.length, i++) {
  const item = array[i]
  // a condition
  const isGreaterThan10 = item > 10

  if(isGreaterThan10) {
    newArray.push(newItem)
  }
}

This loop approach is similar to what the filter method does in the background. It loops through each item, and if any item passes the condition (in this case, the item should be a number greater than 10), then it is pushed to the new array.

One use case of the Filter method

There are many use cases of the filter method. When you want to filter some items from an array based on a condition, this is your goto method.

But let us look at one use case.

For filtering out people of a certain age

Let's say you have an array of people objects which have the age property. For example, you want to filter out people older than 30. Here's a code for this:

const people = [
  {
    name: "Joe",
    nation: "U.S.A",
    age: 31
  },
  {
    name: "Jane",
    nation: "U.S.A",
    age: 29
  },
  {
    name: "John",
    nation: "Netherlands",
    age: 35
  },
  {
    name: "Perez",
    nation: "Paris",
    age: 23
  },
  {
    name: "Mike",
    nation: "Nigeria",
    age: 30
  },
]

const peopleOlderThan30 = people.filter(person => {
  const isOlder = person.age > 30
  return isOlder
})

console.log(peopleOlderThan30)
// [
//  { name: 'Joe', nation: 'U.S.A', age: 31 },
//  { name: 'John', nation: 'Netherlands', age: 35 }
// ]

The condition here is person.age > 50. Only objects that pass this condition are returned to this array which in the example is Joe of 31 years of age and John of 35 years of age.