JavaScript Array filter() Method

Last Updated on February 2, 2023 by Prepbytes

In this post, we will discuss the JavaScript Array filter() method. We will explain the array filter() method by taking different examples. Firstly, we will see the definition of the JavaScript array filter() method.

What is the JavaScript Array Filter() Method?

The JavaScript Array filter() Method is used to generate a new array from an existing array that only contains the components of the original array that meet the criteria specified by the argument method.

Syntax:

array.filter(callback(element, index, arr), thisValue)

Parameters:

As indicated and further defined below, this procedure accepts five parameters:

• callback: The function that will be invoked for each element of the array is stored in this parameter.
• element: The value of the components presently being processed is stored in the parameter.
• index: The index of the currently selected element in the array, starting at 0, is included in this optional argument.
• arr: This argument, which holds the entire array on which Array, is optional. All are called.
• thisValue: This argument, which is optional, contains the context that must be given since it will be utilised when the callback function is executed. Every time the callback function is called, the context will be utilised in this way if it is supplied, otherwise, undefined is used by default.

JavaScript Array Filter(): Examples

To better understand the concept let’s look at some additional JavaScript examples of array filters.

Example 1:
In this illustration, the canVote() function checks a condition, and the method filter() only adds members to the new array that meets that requirement.

// JavaScript to illustrate findIndex() method
    function canVote(age) {
        return age >= 8;
    }

    function func() {
        var filtered = [4, 3, 10, 20].filter(canVote);
        console.log(filtered);
    }
    func();

Output:

[10, 20]

Example 2: In this illustration, the function filter() makes a new array in which only the elements that meet the isPositive() function’s criterion are included.

function isPositive(value) {
      return value > 10;
    }

    var filtered = [12, 50, 0, -5, 44].filter(isPositive);
    console.log(filtered);

Output:

[12, 50, 44]

Example 3:In this illustration, the function filter() makes a new array in which only the elements that meet the isEven() function’s criterion are included.

function isEven(value) {
      return value % 2 == 0;
    }

    var filtered = [11, 98, 31, 23, 944].filter(isEven);
    console.log(filtered);

Output:

[98, 944]

Return value:

Only those members in the new array that meet the arg_function’s requirement are returned by this procedure.

How does the JavaScript Array filter() method work?

Take a look at the example below to see how JavaScript’s array filter functions. In this illustration, we’ll make an array of integer values. After that, we’ll filter out even integers using the array filter() function and log the resulting array to the console.

let num = [3, 6, 7, 12, 18, 23, 44, 62, 81];
let even_num = num.filter(function(item){
  return item % 2 == 0; });
console.log(even_num);

Output:

CONSOLE X
(5) [6, 12, 18, 44, 62]

The output shows that only the even members of the num array were added to the new even num array using the array filter method. Let’s now go out how this operates step by step.

1. The test condition return item% 2 == 0 is included in the declaration of the filter function.
2. It will begin iterating over the num array’s items and succeed in the test.
3. If the item’s remaining after dividing by two is zero, it will be added to the new array even_num.
4. The resultant even num array will be sent to the terminal after iterating over all the items.

Drawbacks of JavaScript Array Filter()

The JavaScript array filter technique has the following drawbacks in addition to its many advantages:

• We must store the filtered array in order to use it later because the filter method does not alter the original array.
• If there are no elements in the array, the array filter technique is ineffective.

Browsers That Support Array Filter In JavaScript

The list of browsers that permit the usage of the JavaScript array filter technique is shown below.

• Google Chrome
• Microsoft Edge 9
• Mozilla Firefox 1.5
• Opera 9.5
• Safari 3

Conclusion
In this article, you have learned everything about the JavaScript array filter(). We hope this article clears all your doubts and gives you a good grasp on the JavaScrip filter() method.