Updated April 1, 2023
Introduction to JavaScript Array Filter
Filter array in JavaScript means filtering the list items based upon the condition passed to the filter. Filter array plays a crucial role when fetching the data from an array based on names, price, date, special characters, etc. A developer can create custom filters. Filters in a list applied after pipe symbol (|) followed by expression as like below.
Real-Time Scenario: When we buy a product from the Amazon website then first, we search for a product. It populates 1000s of products with different price, brand, offers size, etc. But as we are a customer, we don’t want all this product then we simply applied a filter on the result set. This kind of application requirement filter list plays a vital role.
Advantages:
- Populates exact data by discarding unnecessary data.
- Easy to apply in JavaScript.
- Provided by so many predefined filters.
How does Array Filter work in JavaScript?
JavaScript array filter is working based on filter() function on array values. You can observe below syntax for better understanding.
Syntax:
var outarray= array.filter(function());The filter function can be applied either array or list and within the filter, we can call another function for any boolean operation.
- array: It is the actual array where the filer() method is applied.
- function(): It is a function for checking any condition on filter() array.
- Return value: Resultant of filter() gives set of value/values with a list.
Examples to Implement JavaScript Array Filter
Below are the examples:
Example #1
Filter array for leap year
Code:
<!DOCTYPE html>
<html>
<head>
<title>Filter Array</title>
<!--CSS Styles-->
<style>
h3
{
color:green;
}
h1
{
color:blue;
text-align: center;
}
</style>
</head>
<body>
<script>
function isLeapYear(anyYear) { //line1
return (((anyYear % 4 == 0) && (anyYear % 100 != 0)) ||
(anyYear % 400 == 0));//line2
}
function showOutput() { //line3
var leapYears = [400,800,2000,2400,3000,1255,3200,5725,1300,1500].filter(isLeapYear); //line4
document.write("<h1>Array Filter for Leap Year</h1>")
for (var tempVar = 0; tempVar < leapYears.length; tempVar ++){//line5
document.write("<h3>Is "+leapYears[tempVar]+" leap year? YES</h3>"); //line6
}
}
showOutput(); //line7
</script>
</body>
</html>Output:
Explanation: Line1 is for isLeapYear() function implementation. Line2 is for leap year logic. Line3 Main function for filer() list. Line4 Filter() for filtering the list elements whether they are leap years or not. Line5 List iteration for getting each element separately. Line6 displaying the leap years.
Example #2
Filter array for positive numbers
Code:
<!DOCTYPE html>
<html>
<head>
<title>Filter Array</title>
<!--CSS Styles-->
<style>
h3
{
color:red;
}
h1
{
color:green;
text-align: center;
}
</style>
</head>
<body>
<script>
function isPositiveNumbers(number) { //line1
return number>0 //line2
}
function showMyOutput() { //line3
var positiveNumbersArray = [10,20,30,23,45,67,-1,-5,-15,16,-18,-19,50,79,81].filter(isPositiveNumbers); //line4
document.write("<h1>Array Filter for Positive Numbers</h1>")
for (var j = 0; j < positiveNumbersArray.length; j++){//line5
document.write("<h3>Is "+positiveNumbersArray[j]+" Positive Number? Yes<h3>"); //line6
}
}
showMyOutput(); //line7
</script>
</body>
</html>Output:
Explanation: Line1 is for is NegativeNumbers() function implementation. Line2 is for positive numbers logic. Line3 Main function for filer() list. Line4 Filter() for filtering the list elements whether they are positive numbers or not. Line5 List iteration for getting each element separately. Line6 displaying the positive numbers.
Example #3
Filter array for even numbers
Code:
<!DOCTYPE html>
<html>
<head>
<title>Filter Array</title>
<!--CSS Styles-->
<style>
h3
{
color:maroon;
border: solid 1px red;
text-align: center;
}
h1
{
color:navy;
text-align: center;
}
</style>
</head>
<body>
<script>
function isEvenNumbers(number) { //line1
return number%2==0 //line2
}
function showMyOutput() { //line3
var evenNumberArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].filter(isEvenNumbers); //line4
document.write("<h1>Array Filter for Even Numbers</h1>")
for (var j = 0; j < evenNumberArray.length; j++){//line5
document.write("<h3>Is "+evenNumberArray[j]+"a Even Number? YES<br>"); //line6
}
}
showMyOutput(); //line7
</script>
</body>
</html>Output:
Explanation: Line1 is for is EvenNumbers() function implementation. Line2 is for even numbers logic. Line3 Main function for filer() list. Line4 Filter() for filtering the list elements whether they are even numbers or not. Line5 List iteration for getting each element separately. Line6 displaying the even numbers.
Example #4
Filter array for odd numbers
Code:
<!DOCTYPE html>
<html>
<head>
<title>Filter Array</title>
<!--CSS Styles-->
<style>
h3
{
color:lightblue;
border: solid 1px blue;
text-align: center;
}
h1
{
color:orange;
text-align: center;
}
</style>
</head>
<body>
<script>
function isOddNumbers(number) { //line1
return number%2==1 //line2
}
function showMyOutput() { //line3
var oddNumberArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].filter(isOddNumbers); //line4
document.write("<h1>Array Filter for Odd Numbers</h1>")
for (var j = 0; j < oddNumberArray.length; j++){//line5
document.write("<h3>Is "+oddNumberArray[j]+" a Odd Number? YES<br>"); //line6
}
}
showMyOutput(); //line7
</script>
</body>
</html>Output:
Explanation: Line1 is for isOddNumbers() function implementation. Line2 is for odd numbers logic. Line3 Main function for filer() list. Line4 Filter() for filtering the list elements whether they are odd numbers or not. Line5 List iteration for getting each element separately. Line6 displaying the odd numbers.
Example #5
Filter array for a multiple of number 10
Code:
<!DOCTYPE html>
<html>
<head>
<title>Filter Array</title>
<!--CSS Styles-->
<style>
h3
{
color:fuchsia;
border: solid 1px pink;
text-align: center;
}
h1
{
color:red;
text-align: center;
}
</style>
</head>
<body>
<script>
function isMultipleOf10(number) { //line1
return number%10==0 //line2
}
function getMyOutput() { //line3
var multipleOf10Array = [10,20,30,45,66,12,80,320,111,452,782,250].filter(isMultipleOf10); //line4
document.write("<h1>Array Filter for Multiple of 10</h1>")
for (var j = 0; j < multipleOf10Array.length; j++){//line5
document.write("<h3>"+multipleOf10Array[j]+" is multiple of Number 10 </h3>"); //line6
}
}
getMyOutput(); //line7
</script>
</body>
</html>Output:
Explanation: Line1 is for isMultipleOf10() function implementation. Line2 is for a multiple of numbers 10 logic. Line3 Main function for filer() list. Line4 Filter() for filtering the list elements whether they are multiples of numbers 10 or not. Line5 List iteration for getting each element separately. Line6 displaying the multiples of number 10.
Conclusion
Filter array filters the array values based on the condition within the function. filter() method is used for filtering the array elements. Filter() function accepts one more function for filtering the elements.
Recommended Articles
This is a guide to JavaScript Array Filter. Here we discuss an introduction to JavaScript Array Filter along with examples for better understanding. You can also go through our other related articles to learn more –
