- JavaScript Basics
- JS Home
- JS Syntax
- JS Placements
- JS Output
- JS Statements
- JS Keywords
- JS Comments
- JS Variables
- JS var
- JS let
- JS const
- JS var Vs let Vs const
- JS Operators
- JS Arithmetic Operators
- JS Assignment Operators
- JS Comparison Operators
- JS Logical Operators
- JS Bitwise Operators
- JS Ternary Operator
- JS Operator Precedence
- JS Data Types
- JS typeof
- JS Conditional Statements
- JS Conditional Statement
- JS if Statement
- JS if...else Statement
- JS switch Statement
- JS Loops
- JS for Loop
- JS while Loop
- JS do...while Loop
- JS break Statement
- JS continue Statement
- JS break Vs. continue
- JavaScript Popup Boxes
- JS Dialog Box
- JS alert Box
- JS confirm Box
- JS prompt Box
- JavaScript Functions
- JS Functions
- JS setTimeout() Method
- JS setInterval() Method
- JavaScript Events
- JS Events
- JS onclick Event
- JS onload Event
- JS Mouse Events
- JS onreset Event
- JS onsubmit Event
- JavaScript Arrays
- JS Array
- JS Find Length of Array
- JS Add Elements at Beginning
- JS Add Element at End
- JS Remove First Element
- JS Remove Last Element
- JS Get First Index
- JS Get Last Index
- JS Reverse an Array
- JS Sort an Array
- JS Concatenate Arrays
- JS join()
- JS toString()
- JS from()
- JS Check if Value Exists
- JS Check if Array
- JS Slice an Array
- JS splice()
- JS find()
- JS findIndex()
- JS entries()
- JS every()
- JS fill()
- JS filter()
- JS forEach()
- JS map()
- JavaScript Strings
- JS String
- JS Length of String
- JS Convert to Lowercase
- JS Convert to Uppercase
- JS String Concatenation
- JS search()
- JS indexOf()
- JS search() Vs. indexOf()
- JS match()
- JS match() Vs. search()
- JS replace()
- JS toString()
- JS String()
- JS includes()
- JS substr()
- JS Slice String
- JS charAt()
- JS repeat()
- JS split()
- JS charCodeAt()
- JS fromCharCode()
- JS startsWith()
- JS endsWith()
- JS trim()
- JS lastIndexOf()
- JavaScript Objects
- JS Objects
- JS Boolean Object
- JavaScript Math/Number
- JS Math Object
- JS Math.abs()
- JS Math.max()
- JS Math.min()
- JS Math.pow()
- JS Math.sqrt()
- JS Math.cbrt()
- JS Math.round()
- JS Math.ceil()
- JS Math.floor()
- JS Math.trunc
- JS toFixed()
- JS toPrecision()
- JS Math.random()
- JS Math.sign()
- JS Number.isInteger()
- JS NaN
- JS Number()
- JS parseInt()
- JS parseFloat()
- JavaScript Date and Time
- JS Date and Time
- JS Date()
- JS getFullYear()
- JS getMonth()
- JS getDate()
- JS getDay()
- JS getHours()
- JS getMinutes()
- JS getSeconds()
- JS getMilliseconds()
- JS getTime()
- JS getUTCFullYear()
- JS getUTCMonth()
- JS getUTCDate()
- JS getUTCDay()
- JS getUTCHours()
- JS getUTCMinutes()
- JS getUTCSeconds()
- JS getUTCMilliseconds()
- JS toDateString()
- JS toLocaleDateString()
- JS toLocaleTimeString()
- JS toLocaleString()
- JS toUTCString()
- JS getTimezoneOffset()
- JS toISOString()
- JavaScript Browser Objects
- JS Browser Objects
- JS Window Object
- JS Navigator Object
- JS History Object
- JS Screen Object
- JS Location Object
- JavaScript Document Object
- JS Document Object Collection
- JS Document Object Properties
- JS Document Object Methods
- JS Document Object with Forms
- JavaScript DOM
- JS DOM
- JS DOM Nodes
- JS DOM Levels
- JS DOM Interfaces
- JavaScript Cookies
- JS Cookies
- JS Create/Delete Cookies
- JavaScript Regular Expression
- JS Regular Expression
- JS RegEx .
- JS RegEx \w and \W
- JS RegEx \d and \D
- JS RegEx \s and \S
- JS RegEx \b and \B
- JS RegEx \0
- JS RegEx \n
- JS RegEx \xxx
- JS RegEx \xdd
- JS RegEx Quantifiers
- JS RegEx test()
- JS RegEx lastIndex
- JS RegEx source
- JavaScript Advance
- JS Page Redirection
- JS Form Validation
- JS Validations
- JS Error Handling
- JS Exception Handling
- JS try-catch throw finally
- JS onerror Event
- JS Multimedia
- JS Animation
- JS Image Map
- JS Debugging
- JS Browser Detection
- JS Security
- JavaScript Misc
- JS innerHTML
- JS getElementById()
- JS getElementsByClassName()
- JS getElementsByName()
- JS getElementsByTagName()
- JS querySelector()
- JS querySelectorAll()
- JS document.write()
- JS console.log()
- JS instanceof
- JavaScript Programs
- JavaScript Programs
JavaScript filter() | Filter an Array Based on Condition
The JavaScript filter() method is used when we need to check every element in an array to find if it meets the specified condition and create a new array with only those elements that meets the specified condition. For example:
<!DOCTYPE html> <html> <body> <p id="xyz"></p> <script> const mynumbers = [12, 32, 43, 5, 65, 46]; document.getElementById("xyz").innerHTML = mynumbers.filter(even); function even(x) { return x%2==0; } </script> </body> </html>
As you can see from above example, using the filter() method, I've filtered the array mynumbers with even numbers.
Note - The original array does not get effected by the filter() method.
JavaScript filter() Syntax
The syntax of filter() method in JavaScript is:
array.filter(functionName(currentElementValue, currentElementIndex, currentElementArray), thisValue)
The array, functionName, and currentElementValue are required. All others are optional.
Note - The array refers to an array that is going to filter, using the function functionName.
Note - The functionName refers to a function to execute for every elements of array.
Note - The currentElementValue basically refers to a variable that will be used to pass as an argument to the function that of course indicates to the current value/element of the specified array.
Note - The currentElementIndex refers to the index of the current element
Note - The currentElementArray refers to the array of the current element.
Note - The thisValue refers to a value passed to the specified function functionName as its this value. The default value is undefined
JavaScript filter() Array Example
Let me create an example of filter() method that uses a function with three parameters:
<!DOCTYPE html> <html> <body> <p>Odd Numbers: <span id="abc"></span></p> <script> const a = [12, 32, 43, 5, 65, 46, 19, 17, 48]; const o = a.filter(odd); function odd(num, indx, arr) { if(indx==0 || indx==(arr.length-1)) return true; return num%2!=0; } document.getElementById("abc").innerHTML = o; </script> </body> </html>
Odd Numbers:
In above example, the first and last numbers are even numbers, that are 12 and 48, but I've filtered the array a to filter all elements except the element at first and last index.
Here is another example of filter() function that filters an array based on prime numbers.
<!DOCTYPE html> <html> <body> <script> const nums = [12, 32, 43, 5, 65, 46, 19, 17]; const primeNums = nums.filter(prime); function prime(num) { let count=0; for(let i=2; i<num; i++) { if(num%i == 0) { count++; break; } } if(count==0) return true; else return false; } let primeNumsLen = primeNums.length; if(primeNumsLen==0) console.log("No prime numbers found in the array"); else { console.log("List of Prime Numbers:"); for(let i=0; i<primeNumsLen; i++) console.log(primeNums[i]); } </script> </body> </html>
The snapshot given below shows the sample output produced by above example:
« Previous Tutorial Next Tutorial »