This tutorial will show you how to search arrays in JavaScript using the Array.find() method, and show some code examples.

JavaScript Arrays

An array is a type of variable that holds an ordered list of values (or references to other variables), called array elements. Each element has a position in the array, called the index – and can be accessed by using that index.

We’ve got a whole pile of things you can do with JavaScript arrays.

Accessing elements in the array by their index is convenient, but no use if you don’t know the index of an element, or even what values may be in the array.

Array Methods

When an array variable is declared in JavaScript, it is given the array type. The type of a variable determines what kind of value it can hold, and what can be done with it.

Methods are functions that are available to that array’s type, and when called, do something to or with the variable they were called from.

Searching Arrays with the Array.find() Method

The Array.find() method will search the array which called it, returning values that match a given search function by running that function for each element in the array. Here’s the syntax:

array.find(function(element, index, array){
    // Code to test each element in the array for a search match goes here
    // It should return TRUE for a match or FALSE otherwise
}, thisArg)

Note that:

array can be any array variable containing any values
function(element, index, array){} is a function which must return a boolean value which determines whether an element in the array is considered a match for the search
- element, index and array are variables which are available within the search function which reference the current element being inspected, the index of the current element, and the array itself
thisArg determines what the variable this points to within the search function
find() will return the first element to which the search function returns a value of TRUE and will stop there

Examples

You can search arrays containing any type of value, based on any criteria which you can express as a JavaScript function which returns a boolean value.

Searching an Array of Strings

The below examples shows how an array of strings is searched for the first element which has the first letter f:

var pets = ['cat', 'dog', 'fish', 'parrot', 'frog'];

var found = pets.find(function(element, index, array){
    if(element[0] == 'f') return true;
    else return false;
});

console.log(found);

As only the first match is returned, the following will be output to the console:

fish

Searching an Array of Numbers

Not all parameters have to be supplied if they aren’t used. Additionally, JavaScript arrow functions can be used to simplify the code:

var numbers = [1, 5, 7, 3, 19, 6];

var found = numbers.find(element => element > 15);

console.log(found);

Above, an arrow function is used to find the first value in the array with a value greater than 15.

Searching an Array of Objects & Using Multiple Conditions

The search function can be declared outside of the call to the find() method so that it can be used multiple times in different searches without repeating it.

Multiple search conditions can also be defined. Your search function can be as complex as you like, so long as it returns a boolean value.

const cakes = [
    {name: 'black forest', quantity: 2},
    {name: 'chocolate', quantity: 0},
    {name: 'banana', quantity: 5},
    {name: 'baklava', quantity: 6},
    {name: 'vanilla', quantity: 1}
];

function searchCakes(cake) {
    return cake.name[0] == 'b' && cake.quantity > 3;
}

console.log(cakes.find(searchCakes));

This will return the first result matching the two search conditions in the searchCakes() function:

{ "name": "banana", "quantity": 5 }

SHARE:

Related Articles

Searching JavaScript Arrays with the Array.find() Method [Examples]