How to Search Arrays in JavaScript

JavaScript provides a number of ways to search elements of an array to see if they match a particular value or fulfill specified criteria. We demonstrate and describe them all here, starting with the traditional for loop, then proceeding to the more recently added indexOf, lastIndexOf, find, findIndex and includes methods.

Searching Arrays Using for Loops

The function defined below accepts two arguments: an array and a value. It uses a for loop to inspect each element of the array in turn to see if it matches the value passed to the function. It will return the index number of the matching value or -1 if there is no match.

// function to search array using for loop
function findInArray(ar, val) {
    for (var i = 0,len = ar.length; i < len; i++) {
        if ( ar[i] === val ) { // strict equality test
            return i;
        }
    }
    return -1;
}

// example array
var ar = ['Rudi', 'Morie', 'Halo', 'Miki', 'Mittens', 'Pumpkin'];
// test the function 
alert( findInArray(ar, 'Rudi') ); // 0 (found at first element)
alert( findInArray(ar, 'Coco') ); // -1 (not found)

This for loop example provides much the same functionality as the relatively new indexOf method. Of course the eminently flexible for loop could be used in any number of ways to iterate over an array and inspect its elements.

JavaScript's indexOf Method for Arrays

When you invoke the indexOf method on an array, passing the value you are searching for, it returns the index location of the first matching value or -1 if no match is found. We demonstrate its basic use here:

var ar = ['Rudi', 'Morie', 'Halo', 'Miki', 'Mittens', 'Pumpkin'];
// display indexOf return value
console.log( ar.indexOf('Mittens') ); // 4 ('Mittens' is 5th element)
console.log( ar.indexOf('Coco') ); // -1 ('Coco' not in array)

The following demonstrates the use of the indexOf method's return value in a code branch:

// test indexOf return value
if ( ar.indexOf('Mittens') === -1 ) {
    alert('Kitten name available');
} else {
    alert('Kitten name taken');
}

The indexOf method includes an optional second argument that specifies the index location from which to start the search. The start value can range from 0 (the default) to array length - 1. Here we demonstrate using the indexOf method with a start value specified:

var ar = ['Rudi', 'Morie', 'Halo', 'Miki', 'Mittens', 'Pumpkin'];
// specifying start value for indexOf
console.log( ar.indexOf('Miki', 2) ); // 3 ('Miki' is 4th element)
console.log( ar.indexOf('Morie', 2) ); // -1
// 'Morie' not found since it comes before starting location of search

The second argument can be a negative integer, in which case it specifies the starting location as an offset from the end of the array:

// start search at second to last element
console.log( ar.indexOf('Pumpkin', -2) ); // 5
console.log( ar.indexOf('Morie', -2) ); // -1

JavaScript's lastIndexOf Method for Arrays

While indexOf searches forward through the array, the lastIndexOf method searches backwards through the array starting by default from the last element. It returns the index number of the last occurring instance of the value searched for:

var names = ['Kevin', 'Bob', 'Kaci', 'Bob', 'Mark', 'Bob', 'Brian'];
// find index location of last occurrence of 'Bob'
console.log( names.lastIndexOf('Bob') ); // 5

The lastIndexOf method also supports a second argument specifying the starting location of the search. If the second argument is positive, the search commences from that index location backwards through the array.

var names = ['Kevin', 'Bob', 'Kaci', 'Bob', 'Mark', 'Bob', 'Brian'];
// start search backwards from index location 4
console.log( names.lastIndexOf('Bob', 4) ); // 3

If the second argument is negative, it counts the number of elements from the end of the array to begin the search backwards through the array:

var names = ['Kevin', 'Bob', 'Kaci', 'Bob', 'Mark', 'Bob', 'Brian'];
// search backwards from third element from the end
console.log( names.lastIndexOf('Bob', -3 )); // 3

The indexOf and lastIndexOf methods use a strict equality check in their searches.[1]

JavaScript's find and findIndex Methods for Arrays

The indexOf and lastIndexOf methods, described and demonstrated above, ascertain whether a particular value exists in an array. In contrast, the find and findIndex methods use a function that you provide to test values in an array according to criteria you specify. The find method returns the first value matching your criteria, or undefined if no match is found. The findIndex method returns the index location of the first value matching your criteria, or -1 if no match is found.

When you invoke these methods on an array, you pass a function as the first argument. Each element of the array is passed in turn to this function which accepts three arguments: the current element's value, its index, and the array itself.

Examples below demonstrate the find and findIndex methods. The first searches an array for negative numbers:

var ar = [17, 24, -3, 88, -12];
console.log( ar.find( function(el) { return el < 0 } ) ); // -3
console.log( ar.findIndex( function(el) { return el < 0 } ) ); // 2

We use the same function to demonstrate both the find and findIndex methods in these examples. The only difference: the find method returns the value of the matching element while findIndex returns its index location.

The following example searches the array for non-numeric values:

var ar = [17, 24, -3, 88, -12];

console.log( ar.find( function(el) { return typeof el !== 'number' } ) );
// returns undefined
console.log( ar.findIndex( function(el) { return typeof el !== 'number' } ) );
// returns -1

// same test using arrow function syntax
console.log( ar.find( el => typeof el !== 'number' ) ); // undefined

When no match is found, the find method returns undefined while the findIndex method returns -1.

JavaScript's includes Method for Arrays

When you invoke the includes method on an array, passing the value you are searching for, it returns true or false to indicate whether a match was found or not, as we demonstrate here:

var ar = ['Rudi', 'Morie', 'Halo', 'Miki', 'Mittens', 'Pumpkin'];

console.log( ar.includes('Miki') ); // true
console.log( ar.includes('Coco') ); // false

An optional second argument can be used to specify the starting location for the search:

var ar = ['Rudi', 'Morie', 'Halo', 'Miki', 'Mittens', 'Pumpkin'];

// start search at index location 3
console.log( ar.includes('Morie', 3) ); // false

The includes method uses a strict equality check in comparing search value with element values.

Back to top


  1. With a strict equality check( i.e., === vs ==) no type conversion is attempted when comparing values. ^