HowTo: Use the JavaScript array filter method

JavaScript

In this HowTo i’ll walk you through the JavaScript array filter method and when you might use it.

What is the JavaScript array filter method?

When working with an array, you might want to remove a certain value or values from it. The traditional way would be to use a for loop and go through each item in the array. If you want to keep an item, you would push it to a new array. This way the new array will have all of the items you want and removing the ones you don’t.

var array = [1,2,3,4,5];
var filteredArray = [];
for(var i=0; i

`The JavaScript boffins obviously thought this was becoming tedious so they took inspiration from other languages (such as Ruby, Python) and created the filter() method. (OK, it might not have really happened like that but I like the idea of a group of ‘JavaScript nerds’ somewhere working on developing the language!).

var array = [1,2,3,4,5];

array.filter(function(item){
  return item <= 3;
});

// Returns [1,2,3]

Let’s take an indepth look at what’s happening in the above code. As filter() is a method you call it on the array directly. In the parentheses you need to provide a function which is called once for each item in the array. The argument that is in the function’s parentheses (item in the example above) represents an individual value in the array. The function needs to return either true or false. If true is returned, the item is kept i.e. not filtered. If false is returned the item is filtered. The condition you use to return from the function doesn’t matter as long as it returns either true or a falsey value.

var array = ["PHP", "JavaScript", "Python", "Java"];

array.filter(function(item){
  return item === "PHP" || item === "JavaScript";
});

// Returns ["PHP", "JavaScript"]

Although the above is a bit of a silly example, you should see that you can create your own conditions depending on what you are trying to filter. As with other array methods available in JavaScript, if you want to make the changes to the array permanent you’ll need to assign the result of the filter() method to a variable.

var array = [1,2,3,4,5];

array = array.filter(function(item){
  return item <= 3;
});

Using existing functions with the JavaScript array filter method

Of course, you don’t need to pass in an anonymous function to the filter() method as in the above examples. If you have a function already created that returns true or false, you can simply pop that inside the parentheses when calling the filter method.

var array = [34, 66, 21, 83, 76, 12, 50];

function biggerThanFifty(num){
  return num > 50;
}

array.filter(biggerThanFifty);

// Returns [66, 83, 76];

This can be especially useful when you want to filter arrays based on different conditions. You can simply swap the function being passed to the filter() method.

When might you use the JavaScript array filter method?

Some examples of when filter might be useful to you include:

  • Removing empty or blank strings
  • Removing falsey values
  • Filtering small or large numbers
  • Identifying and removing data from an array of objects

Conclusion

With the JavaScript array filter method`