- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to filter values from an array using the comparator function in JavaScript?
In JavaScript, filtering an array can be done by using the filter() method. This method is used to create a new array with all the elements that pass the condition provided in the callback function. However, what if we want to filter out the values for which the comparator function does not return true?
Syntax
arr.filter(compare)
Here compare is a comparator function used to compare the elements in the array arr. We could define it to return true or false.
On the basis of the return value of the compare function, the function “filter” filters the array.
Algorithm
STEP 1 − Define an array named arr and assign the values to it.
STEP 2 − Define a comparator function named compare such that it returns true or false.
STEP 3 − Apply the arr.filter(compare) method to filter the elements of array arr on the basis of the return value of the compare function.
STEP 4 − Display the array with filtered elements using the innerHTML property.
Example
Using Array.prototype.filter()
The Array.prototype.filter() method can be used to filter out the values for which the comparator function does not return true. This can be done by using the Boolean object as follows −
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <p>filtering using the Array filter() method</p> <div id="result"></div> <script> var arr = [1,2,3,4,5,6,7,8,9,10]; var filteredArray = arr.filter(function(value){ return Boolean(value % 2); }); document.getElementById("result").innerHTML = filteredArray </script> </body> </html>
As you can see from the above code, we have first created an array with some numeric values. We have then used the filter() method to filter out the values which are not divisible by 2. The callback function for the filter() method returns Boolean(value % 2). This means that for every value in the array, if it is divisible by 2, then it returns true, else it returns false. Thus, only those values which return true are added to the new filteredArray.
Example
Using for loop
Another way to filter out the values for which the comparator function does not return true is to use a for loop. This can be done as follows −
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <p>filtering using the for loop</p> <div id="result"></div> <script> var array = [1,2,3,4,5,6,7,8,9,10]; var filteredArray = []; for(var i=0; i < array.length; i++){ if(array[i] % 2){ filteredArray.push(array[i]); } } document.getElementById("result").innerHTML = filteredArray </script> </body> </html>
In the above code, we have first created an empty array named filteredArray. We have then used a for loop to iterate over the values in the array. For every value in the array, we have checked if it is divisible by 2 or not. If it is divisible by 2, then we have added it to the filteredArray.
Example
Using every() method
Another way to filter out the values for which the comparator function does not return true is to use the every() method. This method is used to check if all the elements in an array pass the condition provided in the callback function. If all the elements pass the condition, then it returns true, else it returns false. This can be done as follows −
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <p>filtering using the every method</p> <div id="result"></div> <script> var array = [1,3,5,7,9]; var filteredArray = []; if(array.every(function(value){ return value % 2; })){ filteredArray = array; } document.getElementById("result").innerHTML = filteredArray </script> </body> </html>
In the above code, we have first used the every() method to check if all the values in the array are divisible by 2 or not. If all the values are not divisible by 2, then the filteredArray is set to the array itself. Else, it remains empty.
One of the main benefits of using the filter() method is that it does not mutate the original array. It creates a new array that contains only those elements that pass the condition provided in the callback function.
In this tutorial, we have seen how to filter out the values for which the comparator function does not return true in JavaScript. We have seen how to use the filter() method as well as the every() method to achieve this. We have also seen how to do this using a for loop.
615 Views
