Skip to main content

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.

note
  • findIndex() does not alter the original array.
  • A calling array is an array on which you used findIndex(). So, in bestColorsList.findIndex(func), bestColorsList is the calling array.
  • findIndex() is sometimes written as Array.prototype.findIndex() because it is a method of the Array object's prototype property.

Syntax of the findIndex() Method​

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

callingArray.findIndex(callback, thisValue);

Argument 1: callback​

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
});
note

() => {...} is an arrow function shorthand for function () {...}.

Buy CSS Grid book

Parameter 1: currentItem​

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

Parameter 2: index​

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

Parameter 3: array​

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

note
  • You can rename the currentItem, index, and array parameters to anything you prefer.
  • The computer will invoke findIndex()'s function argument once for each item inside the calling array until it finds a truthy value. Once findIndex() discovers a truthy element, it will immediately return the item's index. The invocation will be in the order of the array items from left to right.
  • findIndex() does not change the original array. (Although you can do so with the callback argument.)

Argument 2: thisValue​

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​

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).

note

The colors array is the calling array in the example above.

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"]
tip
  • Use find() if you need to return the first item—rather than its index—that passed the specified test.
  • Use filter() if you need to return all the items that passed the specified test.

Overview​

findIndex() finds the index of the calling array's element that first passes the test specified by the method's function argument.