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**.

```
var values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var evenChecker = function (value) {
return value % 2 === 0;
};
log(_.find(values, evenChecker) + ' is the first even number.', '#findfunctionexampleoneunderscore')
```

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.

```
var values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var oddChecker = function (value) {
return value % 2 !== 0;
};
log(_.find(values, oddChecker) + ' is the first odd number.', '#findfunctionexampletwounderscore')
```

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**.

```
var values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var greaterThan = function (value) {
return value > 7;
};
log(_.find(values, greaterThan) + ' is the first number greater than 7.', '#findfunctionexamplethreeunderscore')
```

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.

```
var values = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var lessThan = function (value) {
return value < 10;
};
log(_.find(values, lessThan) + ' is the first number less than 10.', '#findfunctionexamplefourunderscore')
```

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.

```
var websites = [{
name: 'Google',
type: 'Search Engine'
}, {
name: 'Bing',
type: 'Search Engine'
}, {
name: 'Facebook',
type: 'Social Network'
}, {
name: 'Google Plus',
type: 'Social Network'
}, {
name: 'Twitter',
type: 'Social Network'
}, {
name: 'Amazon',
type: 'Shopping Site'
}, {
name: 'Overstock',
type: 'Shopping Site'
}, {
name: 'Bloomberg',
type: 'News Site'
}, {
name: 'Huffington',
type: 'News Site'
}, {
name: 'Tech Crunch',
type: 'News Site'
}, {
name: 'The Verge',
type: 'News Site'
}];
var getWebsitesCountPerType = function () {
var websitesCountPerType = [];
websites.forEach(function (website) {
var currentTypeCount = _.find(websitesCountPerType,
function (typeCount) {
return typeCount.type === website.type;
});
if (currentTypeCount) {
currentTypeCount.count += 1;
}
else {
websitesCountPerType.push({
type: website.type,
count: 1
});
}
});
return websitesCountPerType;
};
var websitesByType = getWebsitesCountPerType();
websitesByType.forEach(function (typecount) {
log(typecount.count + ' ' + typecount.type + ' Websites', '#findfunctionunderscore')
});
```

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.