Understanding findIndex() Method in JavaScript

Introduction to JavaScript findIndex() Method

The findIndex() method in JavaScript is used to search an array for an element that matches a specific condition, and returns the index of the first element that matches the condition. This method takes two arguments: a callback function that defines the condition to be matched, and an optional this value that will be used as the this value for the callback function.

The find() and findIndex() methods are like filter() in that they iterate through your array looking for elements for which your predicate function returns a truthy value. Unlike filter(), however, these two methods stop iterating the first time the predicate finds an element. When that happens, find() returns the matching element, and findIndex() returns the index of the matching element. If no matching element is found, find() returns undefined and findIndex() returns -1:

In this article, we will discuss how to make use of the findIndex() method in JavaScript.

 

Searching Through an Array for Items That Meet Specific Criteria

To use the findIndex() method, you pass in a callback function as the first argument. The callback function should take three arguments: the current element being processed, the index of the current element, and the array being searched. The callback function should return true if the element matches the condition, and false otherwise.

For example, suppose you have an array of numbers, and you want to find the index of the first element that is greater than 10. You could use the findIndex() method and a callback function to do this, as shown in the following code:

let numbers = [5, 10, 15, 20, 25];

let index = numbers.findIndex(function (element) {
    return element > 10;
});

console.log(index);

In this code, the findIndex() method is called on the numbers array, and is passed a callback function as the first argument. The function returns true if the current element is greater than 10, and false otherwise.

The findIndex() method then iterates over the elements in the numbers array, calling the callback function for each element. When the callback function returns true for the first time, the findIndex() method stops iterating and returns the index of the element that matched the condition. In this case, the first element that is greater than 10 is the element at index 2, so the findIndex() method returns 2.

For example, suppose you have an array of objects, and you want to find the index of the first object that has a name property equal to "John". You could use the findIndex() method and a callback function to do this, as shown in the following code:

let people = [
    { name: "Alice" },
    { name: "Bob" },
    { name: "John" },
    { name: "Sue" },
];

let index = people.findIndex(
    function (element) {
        return element.name === "John";
    },
    { name: "John" }
);

console.log(index);

Output

2

In this code, the findIndex() method is called on the people array, and is passed a callback function as the first argument. The callback function takes one argument - the current element. The function returns true if the name property of the object is equal to "John", and false otherwise.

The findIndex() method then iterates over the elements in the people array, calling the callback function for each element. When the callback function returns true for the first time, the findIndex() method stops iterating and returns the index of the element that matched the condition. In this case, the first object with the name property equal to "John" is at index 2, so the findIndex() method returns 2.

 

Summary

As you can see, the findIndex() method is a powerful and versatile tool for searching arrays in JavaScript. Whether you need to find the index of an element that matches a simple condition, or a more complex condition involving multiple properties, the findIndex() method can help you get the job done.

 

References

Array.prototype.findIndex() - JavaScript | MDN (mozilla.org)