Filter Method in JavaScript

filter(): This method of the array object filters the data elements of an array. It usually takes one parameter, a callback function. This function provides the logic to be implemented and is passed as a parameter to the filter method.

Example: 1

<script type = "text/javascript">
var myArray = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
function Odd(value, index, array){
    return value % 2 != 0;
}
function Even(value, index, array){
    return value % 2 == 0;
}
var final_ans = myArray.filter(Odd);
var final_ans2 = myArray.filter(Even);
document.write("The odd numbers in the array are: " + final_ans + "<br/>");
document.write("The even numbers in the array are: " + final_ans2); < /script>

In the preceding code, we have an array named "myArray" that contains 11 values. We want to filter out the even and the odd values from it and display them.

We have created two functions named Odd and Even with three parameters. They are the callback functions. The first parameter is the "value" of the array, "index" is the index location of the array and "array" is the array for which we want this function to be used. This callback function is called each time when each element of the array is accessed.

The Odd function returns true if the value, when divided by two, does not produce as the remainder 0, so the value will be odd.

The Even function return trues if the value, when divided by two, produces a remainder of 0, so the value will be even.

Now, we have passed these functions in the filter function of the array object and saved them in multiple variables.

Finally, the values are shown on the screen using the write property of the document object.

Example: 2

<script type = "text/javascript">
var myStringArray = ["Tom", "Jerry", "Mada", "Sara", "Jerry"];
function myFilterName(value, index, array)
{
    return array.indexOf(value) == index;
}
var filtered_data = myStringArray.filter(myFilterName);
document.write("<br/>The Names after removing duplicates are : " + filtered_data);
</script>

In the preceding code, we have an array named "myStringArray" that has 5 string values. Notice that the value "Jerry" is repeated twice. Now, we want to filter that and show only distinct values. We can do this using the filter function again.

Here, we have created a callback function as explained above that returns the index value of an array element and checks that the value with the actual index value of the element is being traversed. When the value is Jerry that is at index location 4 is reached, it returns false because it is already available at index location 1. So, this will remove Jerry that is at index location 4 and shows only distinct values and the rest is same as explained in Example 1.

In case of any queries, please leave a comment.