How Does the Array find Method Work in JavaScript
Whenever there is a specific element that must be found in an array of many, a very useful function that can be used is the array find method. The find method requires a condition against which it will test each element in the array until one satisfies this condition and gets returned.
How It Works
The find method goes through each element in the array just like a loop and calls a function, which is called a callback function, with the current element as an argument. The callback function is responsible for deciding which element the find method will return. The decision making logic must boil down to a return statement. If the callback function returns true or any other truthy value, then that element, which was given as an argument when find method called the callback function, is going to be returned by the find method and the loop will stop. Otherwise, when the callback function returns false or any other falsy value, or doesn’t return anything at all, which in JavaScript means that the function returns undefined, the loop continues on to the next element and executes the check on it. This will go on until either an element that satisfies the condition written in the callback function is found or the find method returns undefined, meaning no element in the array passed the given criteria.
Breaking It Down
Consider the following code.
const numbers = [1, 2, 3, 4];
function isThree(number) {
if (number === 3) {
return true;
}
return false;
};
const numberThree = numbers.find(isThree);
In the example above, the find method will loop through the numbers array and call isThree function in each iteration, passing the current element as an argument, which the function expects in the parameter number. It will return false on the the element 1, move on to the element 2 , return false again, and move further once again. In the third iteration, calling the callback function with an argument of 3 will result in true being returned, which will result in the find method stopping the loop, the element 4 not being checked, and 3 getting placed into the numberThree variable. Essentially, numberThree will contain 3 because the callback function isThree returns true given 3 as an argument. The element 3 satisfies the condition inside isThree function, therefore that is the element to be found by the find method.
More Examples
The callback function can be either declared somewhere in the code and later passed to the find method, or it can be directly expressed within the find method call.
const people = [
{ age: 10, name: 'John' },
{ age: 24, name: 'Anna' },
];
// Named function that can be reused anywhere in the code
function isAtLeast18(person) {
return person.age >= 18;
}
let foundPerson = people.find(isAtLeast18); // { age: 24, name: 'Anna' }
// Or, expressing a function directly just for this find method call
foundPerson = people.find(function(person) { // { age: 10, name: 'John' }
return person.age < 18;
});
As the example displays, on line 14, the function given to the find method is anonymous but it still must have a required parameter through which the find method will pass it the current element as an argument. In this case the parameter is called person. Usually, when using anonymous function with find method, the parameter is the singular form of the array name that the find method is called from.
Arrow functions can be used to shorten the function expression.
const people = [
{ age: 10, name: 'John' },
{ age: 24, name: 'Anna' },
];
let foundPerson = people.find(person => { // { age: 10, name: 'John' }
return person.age < 18;
});
foundPerson = people.find(person => person.age >= 18); // { age: 24, name: 'Anna' }
Object destructuring can be used to avoid passing an entire object to the callback function and only passing the value that needs to be checked.
const books = [
{ color: 'Red', pages: 324 },
{ color: 'Blue', pages: 552 },
];
// { color: 'Red', pages: 324 }
books.find(({ color }) => color === 'Red');
// Nested deeper
const users = [
{ name: 'Sam', address: { street: 'Johnson', number: 12 } },
{ name: 'Jane', address: { street: 'Green', number: 15 } },
];
// { name: 'Sam', address: { street: 'Johnson', number: 12 } }
users.find(({ address: { street } }) => {
return street === 'Johnson';
});