JavaScript’s Filter Function

Dev Singh. October 13, 2018 Comments

How to use Array.prototype.filter()

Example of other similar array functions.

Filter Definition & Syntax

The filter() method returns a new array created from all elements that pass a certain test preformed on an original array.

Here’s the syntax looks like:

let newArr = oldArr.filter(callback);
  • newArr — the new array that is returned
  • oldArr — the array to run the filter function on
  • callback — the function used to test each element of the oldArr. Returning true keeps the element, returning false to not keep it.

Our callback function can take three arguments:

  • element — the current element of the array
  • index — the current index of the value being processed
  • arr — the original array

Filter vs. For Loop Example

You can think of filter() as a for loop, that is specifically for filtering in/out certain values from an array. Consider the following code:

let arr = [1, 2, 3, 4, 5, 6];
let even = [];
for(var i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) even.push(arr[i]);
}
// even = [2,4,6]

This code tests all of the values in the arr array. Only the even values are accepted and pushed onto the even array. What results is an array of all the even numbers: even = [2,4,6].

Again, this code works, but there is an easier way to achieve the same result — using the filter() method.

To use the filter() function, we’ll start with the same simple array of numbers:

let arr = [1,2,3,4,5,6];

arr is the array we’re going to map over. Since we want keep only the even numbers, we have to return true if a number is even, and false if a number is odd. Here’s one way to do this:

let even = arr.filter(val => {
  return val % 2 === 0;
});
// even = [2,4,6]

Awesome! There is no loop needed, and we no longer have to add values manually to an array. When working with the filter() function, all you need to do is define what you want to keep and then return true for those values. Filter() will handle the rest.

Above we test to see if the value ( val ) is even. If it is even, we return truewhich adds it to the even array. If it is odd, we return false which skips over the value. What we’re left with is all of our even values in our even array!

Filter Example #2

Lets consider a more complex example that utilizes an array of objects. Here’s the data we’ll work with:

let data = [
  {
    country: 'England',
    population: 1409517397,
  },
  {
    country: 'India',
    population: 1339180127,
  },
  {
    country: 'USA',
    population: 324459463,
  },
  {
    country: 'Australia',
    population: 263991379,
  }
]

What we want to do is create a new array with only the countries that have a population higher than 500 million.

To do this, all we have to do is test our data and return true if data.population is greater than 500,000,000.

let cities = data.filter(val => {
  return val.population > 500000000;
});

Just these two lines of codes ensure that only the largest cities make our list. Even though our data is more complex, the process to filter it remains relatively unchanged. After running our filter function, we’re left with this:

// cities = [{country: "China", population: 1409517397},
             {country: "India", population: 1339180127}]

Filter & ES6

The introduction of arrow functions in ES6 has simplified the use filter()even more. Consider the above example where we only return cities with a population greater than 500 million. Here is the current code:

let cities = data.filter(val => {
  return val.population > 500000000;
});

We’re already using an arrow function, but our filter() method can still be cleaned up even more. That’s because when returning a value from an arrow function, you can remove the brackets in the function to indicate that is the value you want to return. The below code is exactly equal to the above code:

let cities = data.filter(val => val.population > 500000000);

Just like above, this code will test each value in our array to determine if the population is greater than 500 million. If it is, a true value is returned which will add the element to the cities array!

  • JavaScript
  • Functional Programming
  • filter-js