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)
