Skip to content
Latest: Publish JavaScript Packages to NPM Like a Pro!

findIndex() Method – Find Item's Index that First Passes a Test

Whenever you use findIndex() on an array, the method returns the index of the calling array’s value that first passes the function argument’s test.

But if no element passes the test, findIndex() will return -1.

findIndex() accepts two arguments: a “callback function” and a “thisValue.” Here is the syntax:

callingArray.findIndex(callback, thisValue);

A function is the first argument accepted by the findIndex() method. It is a required argument containing the code you want the computer to use to test each item of the calling array.

The callback function returns the index of the value that first passed the test or -1 if it finds no item.

Keep in mind that findIndex()’s function argument accepts three parameters: currentItem, index, and an array.

callingArray.findIndex((currentItem, index, array) => {
// Test to run on each item of the calling array
});

The currentItem parameter is required. It represents the current calling array’s item the computer is currently processing.

The index parameter is optional. It represents the index number of the item the computer is currently processing.

The array parameter is also optional. It represents the calling array.

A thisValue is the second argument accepted by the findIndex() method. It is an optional argument representing the value you want to use as the function argument’s this value.

callingArray.findIndex((currentItem, index, array) => {}, thisValue);

Suppose you do not provide a second argument. In that case, the computer will use undefined as the callback function’s this value.

Example 1: How to Use findIndex() without a thisValue Argument

Section titled “Example 1: How to Use findIndex() without a thisValue Argument”

Here is an example of the findIndex() method without a thisValue argument:

const colors = ["red", "blue", "green", "white", "yellow", "pink"];
function itemLength(currentItem) {
return currentItem.length > 3;
}
const indexOfColor = colors.findIndex(itemLength);
console.log(indexOfColor);
// The console.log invocation above will return: 1

Try it on StackBlitz

The snippet above used the findIndex() method to find the index of the first color having lengths greater than three (3).

Example 2: How to Use findIndex() with a thisValue Argument

Section titled “Example 2: How to Use findIndex() with a thisValue Argument”

Here is an example of the findIndex() method with a thisValue argument:

const colors = ["red", "blue", "green", "white", "yellow", "pink"];
function itemLength(currentItem, ind, arr) {
arr[ind + 1] += this;
return currentItem.length > 3;
}
const indexOfColor = colors.findIndex(itemLength, "Car");
console.log(indexOfColor);
// The console.log invocation above will return: 1

Try it on StackBlitz

In the snippet above, we used the findIndex() method to find the index of the first color having lengths greater than three (3).

Observe that we used the itemLength callback function to add findIndex()’s this value to each iteration of the colors array’s items—except the first one.

In other words, we used the callback function to mutate the original array.

Therefore, the colors array’s current content will be:

["red", "blueCar", "greenCar", "white", "yellow", "pink"]