Open In App
Related Articles

Underscore.js _.filter Function

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Underscore.js _.filter() is used to check which elements in the passed array satisfy the condition. It will form a new array of all those elements that satisfy the condition passed from the array. It is mostly used when needed to find certain elements from a large array.

Syntax:

_.filter( list, predicate, [context] );

Parameters:

  • 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 that needs to be displayed. It is an optional parameter.

Return value:

It returns an array consisting of elements that satisfy the condition.

Passing a list of numbers to _.filter() function:

Underscore.js _.filter() function takes the elements from the list one by one and checks the specified operations on the code. Here the operation is to find whether the elements of the list are even or not. Only the odd elements will be added to the resultant array.

Example: In this example, we are using the Underscore.js _.filter () function and passing a list of numbers into this.

html

<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript" src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        let 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:

Underscore.js_.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: In this example, we are using the Underscore.js _.filter () function and passing a list of words into this.

html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src=
        </script>
    </head>
    <body>
        <script type="text/javascript">
            let 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: In this example, we are using the Underscore.js _.filter () function and passing a separate function.

html

<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript" src=
    </script>
</head>
 
<body>
    <script type="text/javascript">
        let words =
            ['javascript', 'java', 'unix', 'hypertext', 'underscore', 'CSS'];
        const result = words.filter(word => word.length == 9);
        console.log(result);
    </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: In this example, we are using the Underscore.js _.filter () function with another function.

html

<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript" src=
    </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>


Last Updated : 10 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads