JavaScript Find Function Explained

The find function in JavaScript can be used to find a specific item within an array. The find function requires a conditional operator to figure our which array item to search for and return if it exists. This conditional operator is contained within a function that allows you to do more processing in the find operation.

Below is a simple explanation of using the find function on an array of numbers. First, we create an array of numbers called 'myNumbers' and then call the 'find' function on that array. The find function takes a function as a parameter. The inner anonymous function has one parameter which will be used as each item in the array and will return a conditional operation. The find function works by going through each item in the element and returning the first item that meets the criteria. The find function below will first be applied to the number 1, the first element in our array, but as it doesn't match the condition so the find function will continue to the next element in the array, the number 3. This process continues until the condition matches an element in the array, this element will then be returned and assigned to the 'result' variable. The below code will assign the value '5' to our 'result' variable at that is the first number in the array that meets the find criteria.

var myNumbers = [1, 3, 5, 7, 18, 27];
var result = myNumbers.find(function(i){ 
    return i == 5;
});

Due to the find function taking a function as a parameter we are able to do additional processing in the find function as well as the return conditional. In the below snippet we are multiplying each item by 2 and then checking if it is equal to the number 6. This will return the number 3 from our array. This is because the number 3 multiplied by 2 is equal to the number 6 but the find function does not modify the values within our array, so it returns the original value from the array.

var myNumbers = [1, 3, 5, 7, 18, 27];
var result = myNumbers.find(function(i){ 
    i = i * 2;
    return i == 6;
});

It's important to remember that the find function will only return one element, the first element that matches the criteria. This means that in the below code the variable 'result' will have the value 18 as that is the first element in our array that fits the condition in the find anonymous function.

var myNumbers = [1, 3, 5, 7, 18, 27];
var result = myNumbers.find(function(i){ 
    return i > 7;
});

Instead of using an anonymous function inside our find operation we can declare a separate function and then pass that into the find function. An example of this can be shown below, we declare a function and assign it to the variable 'findFunc' and then pass that into the find function called on the array. This would allow us to use the same find function on multiple arrays or multiple times in different areas of the source code.

var myNumbers = [1, 3, 5, 7, 18, 27];
var findFunc = function(i){ return i > 7};
var result = myNumbers.find(findFunc);

If you use a find function that doesn't match any of the items within an array it will return an 'undefined' value. The below code snippet shows a find function that will not match any items within the array. This means the variable 'result' will have a value of 'undefined' as that is what the find function returns if no matching items are found within the array.

var myNumbers = [1, 3, 5, 7, 18, 27];
var result = myNumbers.find(function(i){ 
    return i > 52;
});

All the examples so far have been using an array of numbers but the find function can be used with any array containing any variable types. The below code snippet shows using an array of objects and then using a find function to grab an object whose 'name' field is equal to the text value "James". This will return the first object in our array.

var people = [{name: 'James', age: 34}, {name: 'John', age: 12}]
var result = people.find(function(i){ return i.name == "James"; });

This article was originally published at https://acroynon.com