JavaScript Array filter()
In this post, we will discuss filter() method available in JavaScript Array.
filter()
The filter() method is used to return the elements from the array based on the condition. If the element/s that matched the condition, those will be returned. We need to write a function for condition and pass the function name to the filter() as a parameter.
Syntax:
array_name.filter(function_name)
Here, 'array_name' is the name of the array. It will take 'function_name' as a parameter.
Example 1:-
Let us create an array that hold 10 subjects and return the elements that are equal to "php" and "java" separately by writing two functions.
<html>
<body>
<script>
// Create an array that hold 10 strings
const subjects1 =["php","html","node.js","java","jsp","jsp","php","php","java","php"];
document.writeln("Subjects: <br>");
document.writeln(subjects1);
document.writeln("<br>");
document.writeln("<br>");
// function to return elements which are equal to "php".
function condition1(subjects) {
return subjects=="php";
}
// Return the elements from the array which are equal to "php".
document.writeln("Subject-php: <br>");
document.writeln(subjects1.filter(condition1));
// function to return elements which are equal to "java".
function condition2(subjects) {
return subjects=="java";
}
document.writeln("<br>");
document.writeln("<br>");
// Return the elements from the array which are equal to "java".
document.writeln("Subject-java: <br>");
document.writeln(subjects1.filter(condition2));
</script>
</body>
</html>
Output:
Subjects:
php,html,node.js,java,jsp,jsp,php,php,java,php
Subject-php:
php,php,php,php
Subject-java:
java,java
As per the output, there are 4 "php" elements and 2 "java" elements in the array.
Example 2:-
Let us create an array that hold 10 subjects and return the elements which are of length-4 and 3 separately.
<html>
<body>
<script>
// Create an array that hold 10 strings
const subjects1 =["php","html","node.js","java","jsp","jsp","php","php","java","php"];
document.writeln("Subjects: <br>");
document.writeln(subjects1);
document.writeln("<br>");
document.writeln("<br>");
// function to return elements of length-4.
function condition1(subjects) {
return subjects.length==4;
}
// Return the elements from the array whose length is equal to 4.
document.writeln("Subjects with 4 characters: <br>");
document.writeln(subjects1.filter(condition1));
document.writeln("<br>");
document.writeln("<br>");
// function to return elements of length-3.
function condition2(subjects) {
return subjects.length==3;
}
// Return the elements from the array whose length is equal to 3.
document.writeln("Subjects with 3 characters: <br>");
document.writeln(subjects1.filter(condition2));
</script>
</body>
</html>
Output:
Subjects:
php,html,node.js,java,jsp,jsp,php,php,java,php
Subjects with 4 characters:
html,java,java
Subjects with 3 characters:
php,jsp,jsp,php,php,php
As per the output, there are 3 subject elements with length-4 and 6 subject elements with length-3.
Example 3:-
Let us create an array that hold 5 integers and filter the elements which are less than 25 and greater than 25 separately.
<html>
<body>
<script>
// Create an array that hold 5 integers.
const marks =[10,20,30,40,50];
document.writeln("Marks: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("<br>");
// function to return marks less than 25
function condition1(marks) {
return marks<25;
}
// Pass condition1 to the filter() method.
document.writeln("Marks less than 25: <br>");
document.writeln(marks.filter(condition1));
document.writeln("<br>");
document.writeln("<br>");
// function to return marks greater than 25
function condition2(marks) {
return marks>25;
}
// Pass condition2 to the filter() method.
document.writeln("Marks greater than 25: <br>");
document.writeln(marks.filter(condition2));
</script>
</body>
</html>
Output:
Marks:
10,20,30,40,50
Marks less than 25:
10,20
Marks greater than 25:
30,40,50
As per the output, there are 3 values which are less than 25 and 3 values that are greater than 25.
Example 4:- Multiple conditions
Let us create an array that hold 5 integers and filter the elements which are less than 25 and divisible by 5.
<html>
<body>
<script>
// Create an array that hold 5 integers.
const marks =[12,34,56,40,50];
document.writeln("Marks: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("<br>");
// function to return marks less than 25
function condition1(marks) {
return marks>25 && marks%5==0;
}
// Pass condition1 to the filter() method.
document.writeln("Marks greater than 25 and divided by 5: <br>");
document.writeln(marks.filter(condition1));
document.writeln("<br>");
document.writeln("<br>");
</script>
</body>
</html>
Output:
Marks:
12,34,56,40,50
Marks greater than 25 and divided by 5:
40,50
As per the output, there are 2 values that are divisible by 5 and greater than 25.
