Underscore.js _.filter Function

28 Dec, 2021
The Underscore.js is a JavaScript library that provides a lot of useful functions like the map, filter, invokes, etc even without using any built-in objects.
The _.filter() is used to check which elements in the passed array satisfy the condition. It will form a new array of all those elements which satisfy the condition passed from the array. It is mostly used when need to find certain elements from a large array.
Syntax:
_.filter( list, predicate, [context] )
Parameters: This function accept three parameters as mentioned above and described below:
list: This parameter is used to hold the list of items.
predicate: This parameter is used to hold the truth condition.
context: The text content which need to be display. It is optional parameter.
Return value: It returns an array consisting of elements which satisfy the condition.
Passing a list of numbers to _.filter() function: The _.filter() function takes the element from the list one by one and checks the specified operations on the code. Like here the operation is to find the elements of the list is even or not. Only the odd elements will be added to the resultant array.
Example:
<!DOCTYPE html><html>    <head>        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" >        </script>    </head>    <body>        <script type="text/javascript">            var oddNo = _.filter([1, 2, 3, 4, 5, 6, 7, 8, 9, 10],                 function(num){                     return num % 2 != 0;                });            console.log(oddNo);        </script>    </body></html>                    
Output:
Passing a list of words to _.filter() function: The _.filter() function takes the element word from the list one by one and checks the specified operations on the code. Like here the operation is to find the elements of the list which have a length of 9. Only those words will be added to the resultant array whose length is equal to 9.
Example:
<!DOCTYPE html><html>    <head>        <script type="text/javascript" src=        "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" >        </script>    </head>    <body>        <script type="text/javascript">            var words = ['javascript', 'java', 'unix', 'hypertext', 'underscore', 'CSS'];            const result = words.filter(word => word.length == 9);            console.log(result);        </script>    </body></html>                    
Output:
Passing a separate function to the _.filter(): Pass a user-defined function to the _.filter() function. First, declare the function like here the function name is ‘largest()’ which returns the element if it is greater than or equal to 100. This function can do any comparison as declared by the user. Then, in the _.filter pass this function. At the end console.log) the resultant array.
Example:
<!DOCTYPE html><html>    <head>        <script type="text/javascript" src=         "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" >        </script>    </head>     <body>        <script type="text/javascript">            function largest(v) {                return v >= 100;            }            var res = [1, 4, 12, 15, 8, 330, 54].filter(largest);            console.log(res);        </script>    </body> </html>                    
Output:
Using other functions with the _.filter() function: Use toLowerCase() and indexOf() functions in the _.filter() function. First find the index of each element and then check whether it is greater than -1. Since console.log() is used at the end therefore the output will only be seen for the last element of the passed array.
Example:
<!DOCTYPE html><html>     <head>        <script type="text/javascript" src=        "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" >        </script>    </head>     <body>        <script type="text/javascript">            const lang = ['hypertext', 'markup', 'language', 'cascading',                                        'style', 'sheet', 'javascript'];            const func = (query) =>             {                return lang.filter((el) =>                    el.toLowerCase().indexOf(query.toLowerCase()) > -1                );            }            console.log(func('pt'));         </script>    </body> </html>                    
Output:
Note: These commands will not work in Google console or in Firefox as for these additional files need to be added which they didn’t have added. So, add the given links to your HTML file and then run them.
<script type="text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"> </script> 
shubham_singh
arorakashish0911
sumitgumber28
JavaScript - Underscore.js
javascript-functions
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?