The filter() method is a built-in method in JavaScript that creates a new array with all elements that pass the test implemented by the provided function. It basically returns a new array that contains only the elements that meet a certain condition while leaving the original array intact.
The syntax of the filter() method is as follows:
array.filter(callback(element[, index[, array]])[, thisArg])
Here, the callback is the function to test each element of the array, an element is a current element being processed in the array, an index is the index of the current element being processed, and an array is the array filter() that was called upon. thisArg is an optional parameter that represents the value to be used as this when executing the callback function.
The filter() method is often used to filter out unwanted elements from an array based on certain criteria, such as:
- Filter out all odd numbers from an array of integers
- Filter out all duplicate values from an array
- Filter out all elements that do not match a specific string pattern
Overall, the filter() method is a useful tool for working with arrays in JavaScript, as it allows you to easily extract and manipulate subsets of data based on specific conditions.
Filter method examples
Here are a few examples of how to use the filter method in JavaScript.
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 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 Jerry is at index location 4 is reached, it returns false because it is already available at index location 1. So, this will remove Jerry, which is at index location 4 and shows only distinct values, and the rest is the same as explained in Example 1.
In case of any queries, please leave a comment.