Learn & Understand JavaScript’s Filter Function

Lear how to use Array.prototype.filter()

Udemy Black Friday Sale — Thousands of Web Development & Software Development courses are on sale for only $10 for a limited time! Full details and course recommendations can be found here.

This is article #2 in a four part series this week.

• Learn Map — Array.prototype.map()
• Learn Filter — Array.prototype.filter()
• Learn Reduce — Array.prototype.reduce()
• Chaining Map, Filter, and Reduce

I strongly encourage you to read my previous article on JavaScript’s map() function before proceeding.

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 what 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 true which 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: 'China',
    population: 1409517397,
  },
  {
    country: 'India',
    population: 1339180127,
  },
  {
    country: 'USA',
    population: 324459463,
  },
  {
    country: 'Indonesia',
    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!

Closing Notes:

Thanks for reading! This has been a brief introduction into JavaScript’s filter() function. If you’re ready to finally learn Web Development, check out the The Ultimate Guide to Learning Full Stack Web Development in 6 months.

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, and follow me on Twitter.

If this post was helpful, please click the clap 👏button below a fewtimes to show your support! ⬇⬇