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()
does not alter the original array.- A calling array is an array on which you used
findIndex()
. So, inbestColorsList.findIndex(func)
,bestColorsList
is the calling array. findIndex()
is sometimes written asArray.prototype.findIndex()
because it is a method of theArray
object'sprototype
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
});
() => {...}
is an arrow function shorthand for function () {...}
.
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.
- You can rename the
currentItem
,index
, andarray
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. OncefindIndex()
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
The snippet above used the findIndex()
method to find the index of the first color having lengths greater than three (3
).
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
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"]
Overview
findIndex()
finds the index of the calling array's element that first passes the test specified by the method's function argument.