How To Use The Find Function In Underscore JS

How To Use The Find Function In Underscore JS

The find() function is another very commonly used function in the Underscore JavaScript Library. The signature has a familiar look in _.find(list, predicate, [context]) similar to the some() function we recently covered. The find() function takes an array or object as the first parameter. The second parameter is a required function that must be passed which runs against each element in the array element or object property that was passed in as the first argument. The predicate function should return a boolean value, either true or false. The find() function can almost be thought of as a loop that stops iterating once the true value is found. In other words, find() will iterate until it finds a true result for the predicate function, and at such time will return the object property value or array element value at the current position. Let’s have a look at a few examples of find() in Underscore now.



Find Function Example 1

This first example of the find function in Underscore makes use of a predicate function to search for and return the first instance of an even number. So first off, we set up an array of integer values. We then assign a function to the evenChecker variable. When we then run the find() function, we pass the values as the first argument and the predicate function evenChecker as the second. As you can see if you click the button to run the code, the very first instance of an even number is returned – that being the number 2.

Click Clear


Find Function Example 2

The second example of the find function makes use of the same array of integer values to search against. In this example, we swap out the evenChecker function for an oddChecker function. When we then run the find() function and pass in the values array as the first argument, we now pass in oddChecker as the predicate function for the second argument. Running the example code returns the number 1, which is in fact the first odd number in our array of values.

Click Clear


Find Function Example 3

In the third example of the Underscore find() function, we once again change up the predicate function to match a specific criteria. In this iteration, we want to look for the first instance of a number that is greater than 7. Our new predicate function is greaterThan in this example. Click that run button to find what you would expect, a result of 8.

Click Clear


Find Function Example 4

Example 4 swaps out the greaterThan predicate function for a lessThan predicate function. It’s job is to return a value that is less than 10. When we run this code, the very first instance of a number less then 10 is returned. In this case, that is 1. Remember, the find() function stops searching and returns the value as soon as the match is found. So in this case, on the very first iteration it looks at the number 1 and sees if it is less than 10. Since this is true, it returns the number and stops iterating right there.

Click Clear


Array of Objects Find Function Example

This example is going to be a little more involved than the first four that we looked at. First off, we’ll set up a websites variable that holds an array of objects. Each object has two properties, name and type. Next up we see a variable of getWebsitesCountPerType which holds a function. This function counts the number of websites by type, then returns an array as the solution, all the while making use of the find() function to handle most of the heavy lifting. Finally, we loop over the results, and log out the calculation of 2 Search Engine Websites, 3 Social Network Websites, 2 Shopping Site Websites, and 4 News Site Websites.

Click Clear


How To Use The Find Function In Underscore JS Summary

In this tutorial we had a good look at the find function in the Underscore JavaScript library. This function is widely used in Underscore for searching and filtering collections.