What is the filter() method in JavaScript?

4 min readJan 19, 2023

Array Function — array.filter() — in 5 Minutes

Let’s discuss JavaScript’s Array.prototype.filter() method.

The Array.filter() method iterates over the array, and creates a shallow copy of a portion of the array that’s filtered down to just the given elements that pass the provided filter.

Syntax

The syntax of Array.filter() looks like the following:

filter((element, index, array) => { /* filter criteria */ })

Array.filter() Parameters

function() — The callback function that is executed on each element in the array. It should return a truthy value to keep the element in your resulting array, and a falsy otherwise to exclude the element from your array.
element (Required) — The value of the current array element.
index (Optional) — The value of the current array index.
array (Optional) — The array the current element belongs to.

Code Examples

Let’s provide a simple code example of the Array.filter() method.

In our demonstration below, we want to get all numbers greater than five from our arrayOfNumbers array.

const arrayOfNumbers = [2, 4, 6, 8, 10]

const getGreaterThanFive = arrayOfNumbers.filter(element => element >= 5)

console.log(getGreaterThanFive)
/* 
Expected Output: 
[6, 8, 10]
*/

To do this, we use the Array.filter, which has a criteria in the callback function “≥= 5”.

The Array.filter, iterates through each element and compares each element against our filter.

If it’s less than 5 it returns a falsy, excluding it from our getGreaterThanFive array.

If it’s equal to or greater than five it returns a truthy and includes it in our getGreaterThanFive array.

Use Cases For Array.filter

The Array.filter() method has many Use Cases, let’s go over one below.

1. Remove Invalid Values

Using the Array.filter, we can remove invalid values from an array.

Invalid values are values that can cause bugs and unexpected behaviour in applications.

For example, in the below code segment we have an array of objects called customers.

const customers = [
  { name: 'Craig', gender: 'M', age: '28' },
  { name: 'Sarah', gender: 'F', age: 18 },
  { name: 'Nick', gender: 'M', age: null },
  { name: 'Kalsuma', gender: 'F', age: 34 },
  { name: 'Gareth', gender: 'M', age: undefined },
  { name: 'Alex', gender: 'M', age: 19 },
  { name: 'Joe', gender: 'M', age: NaN }
]

Some of our customers have invalid values for their ages.

We want to only get the customers that have a valid age.

An age is only valid if it’s a defined number.

const customers = [
  { name: 'Craig', gender: 'M', age: '28' },
  { name: 'Sarah', gender: 'F', age: 18 },
  { name: 'Nick', gender: 'M', age: null },
  { name: 'Kalsuma', gender: 'F', age: 34 },
  { name: 'Gareth', gender: 'M', age: undefined },
  { name: 'Alex', gender: 'M', age: 19 },
  { name: 'Joe', gender: 'M', age: NaN }
]

const filterCriteria = (age) => {
    return age !== undefined && typeof age === `number` && !isNaN(age)
}

const filteredCustomer = customers.filter(customer => filterCriteria(customer.age))

console.log(filteredCustomer)

/*
Expected Behaviour:
{name: 'Sarah', gender: 'F', age: 18}
{name: 'Kalsuma', gender: 'F', age: 34}
{name: 'Alex', gender: 'M', age: 19}
*/

To do this we have a function called filterCriteria, which is the criteria that our Array.filter() will use to check if the age is a valid number:

return age !== undefined && typeof age === `number` && !isNaN(age)

The above clause will return true if the following criteria is met:

Age is not equal to undefined.
The type of the age value is a number.
Age is not a NaN (Not a Number) value.

Array.filter iterates over each of the customers array elements, and calls the filterCriteria() function to check if the age is a valid number.

If it evaluates to truthy then we know that value is a number so we can add it to our filteredCustomers array.

If a falsy is returned, we know it’s an invalid age and can filter it out.

This results in us only getting the customers with a valid age:

{name: 'Sarah', gender: 'F', age: 18}
{name: 'Kalsuma', gender: 'F', age: 34}
{name: 'Alex', gender: 'M', age: 19}

Summary

There you have it.

Above we covered JavaScript’s Array.prototype.filter() method.

The Array.filter() method iterates over the array, and creates a shallow copy of a portion of the array that’s filtered down to just the given elements that pass the provided filter.

Array.filter is useful for breaking down an array to the specific values that you want depending on your passed in filter.