Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 creates a new array with all elements that pass the test implemented by the provided callback function (comparator function).
Syntax
arr.filter(callback)
Here callback is a comparator function used to test each element in the array arr. It should return true to keep the element, or false to filter it out.
Using Array.filter() Method
The most efficient way to filter values is using the built-in filter() method. Here's an example filtering odd numbers:
<!DOCTYPE html>
<html>
<head>
<title>Array Filter Example</title>
</head>
<body>
<p>Filtering odd numbers using 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 value % 2 !== 0; // Keep odd numbers
});
document.getElementById("result").innerHTML = "Original: " + arr + "<br>Filtered (odd): " + filteredArray;
</script>
</body>
</html>
Original: 1,2,3,4,5,6,7,8,9,10 Filtered (odd): 1,3,5,7,9
Using for Loop
You can also implement filtering manually using a for loop:
<!DOCTYPE html>
<html>
<head>
<title>For Loop Filter Example</title>
</head>
<body>
<p>Filtering using 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 !== 0) { // Check if odd
filteredArray.push(array[i]);
}
}
document.getElementById("result").innerHTML = "Original: " + array + "<br>Filtered (odd): " + filteredArray;
</script>
</body>
</html>
Original: 1,2,3,4,5,6,7,8,9,10 Filtered (odd): 1,3,5,7,9
Complex Filtering Example
Here's a more complex example filtering objects based on multiple conditions:
<!DOCTYPE html>
<html>
<head>
<title>Complex Filter Example</title>
</head>
<body>
<p>Filtering students with grade >= 80</p>
<div id="result"></div>
<script>
var students = [
{name: "Alice", grade: 85},
{name: "Bob", grade: 70},
{name: "Charlie", grade: 92},
{name: "Diana", grade: 78}
];
var topStudents = students.filter(function(student) {
return student.grade >= 80;
});
var result = "Top Students (grade >= 80):<br>";
topStudents.forEach(function(student) {
result += student.name + ": " + student.grade + "<br>";
});
document.getElementById("result").innerHTML = result;
</script>
</body>
</html>
Top Students (grade >= 80): Alice: 85 Charlie: 92
Comparison
| Method | Performance | Readability | Browser Support |
|---|---|---|---|
filter() |
Good | Excellent | ES5+ (IE9+) |
| for loop | Fastest | Good | All browsers |
Key Points
- The
filter()method does not mutate the original array - The callback function receives three parameters: element, index, and array
- Return
trueto keep an element,falseto exclude it - For complex conditions, use logical operators like
&&and||
Conclusion
The filter() method is the recommended approach for filtering arrays in JavaScript due to its simplicity and functional programming style. Use manual loops only when performance is critical or when working with older browsers.
835 Views
