How to filter an array in javascript?

In this short tutorial, we look at why the JavaScript filter array method is used we also look at the syntax and code to facilitate a better understanding of the concept.

This tutorial is a part of our initiative at Flexiple, to write short curated tutorials around often used or interesting concepts. However, in case you are here only for the solution use this link.

Table of Content

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

What does the JavaScript filter function do?

The JavaScript filter array function filters an array based on criteria and creates a new array with the values that pass. The JavaScript filter function iterates over the values in the array and returns the values that pass i.e. returns true. The search criteria in the JavaScript filter function are passed using a callbackfn that takes in various parameters, we discuss them in detail below. 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:

• function - Required. A function or search criteria that would be used to filter each value in the array
  • value - Required, the value if current element in the iteration
  • index - Optional, in case you would like to start the iteration from a specific index
  • arr - The array object being called upon
• thisValue - Optional, and as the name suggests, the value present would be passed in case the parameter is empty.

Practical uses of JavaScript filter function

We have all come across filters on websites and they help us find things easily, the JavaScript filter array function is what allows this to happen. For example, we're looking for a freelancer with a skill JavaScript skillset. We use the JavaScript filter array function to return freelancers containing the particular skillset. This is made possible as 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 JavaScript 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 could see, we have defined a function that returns values that are greater than or equal to 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 JavaScript filter array function on an array of objects. Let's continue with the earlier example of filtering freelancers with JavaScript as a skillset.

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 JavaScript filter array code for objects is also quite straightforward once you have understood the concept. Feel free to use the arrow function to increase readability.

Limitation & Caveats while using Javascript filter

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