How to use the JavaScript filter array method?

In this short tutorial, we look at how you could use the JavaScript filter array function. We also look at the syntax and code to facilitate a better understanding of the concept.

However, in case you are here only for the solution, use this link.

Table of Contents

  • What does the JavaScript filter function do?
  • Practical uses of JavaScript filter function
  • Code & Explanation
  • JavaScript filter array - Limitation & Caveats

What does the JavaScript filter function do?

The JavaScript filter array function is used to filter an array based on specified criteria. After filtering it returns an array with the values that pass the filter.

The JavaScript filter function iterates over the existing values in an array and returns the values that pass. The search criteria in the JavaScript filter function are passed using a callbackfn.

Arrow functions can also be used to make JavaScript filter array code more readable.

Syntax of JavaScript filter():

array.filter(function(value, index, arr), thisValue)

Here, array refers to the original array that you are looking to filter.

Parameters:

  1. function - Required. A function or search criteria that would be used to filter values in the array
    • value - Required, the current element that needs to be filtered
    • index - Optional, in case you would like to start the iteration from a specific index
    • arr - The array object being called upon
  2. thisValue - Optional, this value present would be passed in case the parameter is empty

Practical uses of JavaScript filter function

We have all used filters on websites as they help us find things easily, the JavaScript filter array function is what facilitates this.

For example, in case you are looking for a freelancer with a JavaScript skillset. We use the JavaScript filter array function to return freelancers containing the particular skillset.

Furthermore, the JavaScript filter does not mutate the string but rather creates a new one hence the original string is not affected.

Similarly, websites with filters all make use of the JavaScript filter array function.

Code & Explaination:

Let us start with a simple array and later move on to an array containing objects.

So first, let us take an array containing numerical values and remove negative values using the filter array function.

let numbers = [-23,-20,-17, -12, -5, 0, 1, 5, 12, 19, 20];

let positive_array = numbers.filter(function(value) {
    return value >= 0; });

console.log(positive_array);

//Output = [0, 1, 5, 12, 19, 20]

As you can see above, we have defined a function that only returns values >= 0.

In case you are comfortable with arrow functions you can use them to make your code more readable.

let numbers = [-23,-20,-17, -12, -5, 0, 1, 5, 12, 19, 20];

let positive_array = numbers.filter(value => value >= 0);

console.log(positive_array);

//Output = [0, 1, 5, 12, 19, 20]

Now, let us look at a code where we use the filter array function on an array of objects.

Let's continue with the earlier example of filtering freelancers with JavaScript as a skill set.

let freelancers = [{name: "Harry", skill: "JavaScript"},{name: "Mark", skill: "Python"},{name: "David", skill:"JavaScript"}];

let javascript_freelancers = freelancers.filter(function(freelancer) {
    return freelancer.skill == "JavaScript"; });

console.log(javascript_freelancers);

//Output = [{ name: "Harry", skill: "JavaScript" }, { name: "David", skill: "JavaScript" }]

As you can see, the code to filter objects is also quite straightforward once you have understood the concept. Feel free to use the arrow function to increase readability.

JavaScript filter array - Limitation & Caveats

  • The filter array function does not mutate the array. Remember to save the filtered array in case you plan on using it later
  • The function will not execute in case the array is empty