Array filter() Method in JavaScript

What is Array filter Method in JavaScript?

While online shopping, we all have used the filter function where we filter the items according to certain specifications like size, price, ratings, etc. Have you ever wondered how this internally works?

The filter() function in JavaScript can help us in achieving this.

The array filter() function in JavaScript is used to create a new array based on filtering criteria provided to the previous array. Only those values which satisfy the given criteria are added to a new array, and that array is returned. The filter() function iterates over all the elements of the given array and passes each element to the callback function. Then the filtering criteria are checked for that value, and that value is returned to the callback function. If the callback function returns true, then the element is added to the resultant array.

If none of the elements satisfies the given condition, an empty array is returned.

Example

Let us write a program where we have to find and return those elements whose square is greater than 87.

Output-

Explanation-

In our code, we have declared an array and then applied the filter function to it. The filter function takes in a function as a parameter that is compulsory, and the function has a parameter that is an element parameter. For each value in arr, the condition is checked, and if it is satisfied, the value is returned to the new_arr. After all the elements are checked, the new array is returned.

Syntax of Array filter() in JavaScript

The following is the syntax of the filter method in javsascript:

Here we apply the filter in JavaScript on the original array, i.e. array_name.

Parameters of Array filter() in JavaScript

The filter in JavaScript takes in a lot of parameters, out of which some are compulsory, and some are optional.

• Function (Compulsory)- It is a callback function that is used to filter out elements according to the given condition. The callback function receives each element of the array and processes the element according to the filtering criteria. It has three parameters that are as follows-
  • element (Compulsory)- It is used to hold the value of the array element that is being processed currently.
  • idx (Optional)- It is an optional parameter, and it stores the index of the current element. It is mostly used when we want to start our iteration from a specific index, that value is then passed as an argument to the callback function.
  • arr (Optional)- The array object on which the function is called.
• thisValue (Optional)- It holds the value to be used as 'this' at the time of the callback execution. If the value is passed to thisValue, it will be used like 'this' for each iteration of the callback function, otherwise its value is set as undefined, which is the default value.

Return Value of Array filter() in JavaScript

Return type: Array

The filter function in JavaScript returns a new array that satisfies the condition mentioned by the user. If none of the elements satisfies the given condition, an empty array is returned.

Examples of Filter Method in JavaScript

1. Filtering Out all Small Values

We are going to filter out all smaller values than the given element and return them. The smaller elements will be filtered out, and they will be returned to the new array.

Example-

Output-

We are checking each element if it is greater than the given element. If it is true, it will be returned to the new array.

2. Find All the Prime Numbers in an Array

We are going to filter out all prime numbers and return them. The prime numbers will be filtered out, and they will be returned to the new array.

Example-

Output-

We are checking each element if it is a prime number or not. If it is true, it will be returned to the new array.

Browser compatibility

The filter() method in javascript is supported by all the browsers such as Chrome, Edge, Safari, Opera etc.

See also

• charAt in JavaScript
• toLowerCase in JavaScript
• lastIndexOf in JavaScript