totn JavaScript

JavaScript: Array findIndex() method

This JavaScript tutorial explains how to use the Array method called findIndex() with syntax and examples.

Description

In JavaScript, findIndex() is an Array method that is used to return the index of the first element in the array that meets a specific criteria. Because the findIndex() method is a method of the Array object, it must be invoked through a particular instance of the Array class.

subscribe button Subscribe

Syntax

In JavaScript, the syntax for the findIndex() method is:

array.findIndex(callback(element [, index [, array]]) [,thisParameter]);

Parameters or Arguments

callback
A callback function to test each element of the array.
element
The current element of the array.
index
Optional. The index of the current element within the array.
array
Optional. A reference to the original array.
thisParameter
Optional. A parameter that will be used as this within the callback function.

Returns

The findIndex() method returns the index of the first element in the array that satisfies the criteria provided. In the event that none of the elements satisfy the criteria, the findIndex() method will return undefined.

Note

  • The findIndex() method does not modify the original array.

Example

Let's take a look at an example of how to use the findIndex() method in JavaScript.

For example:

var totn_array = [ -10, -5, 0, 5, 10 ];

function greater_than_zero(totn_element) {
   return totn_element > 0;
}

window.console.log(totn_array.findIndex(greater_than_zero));

In this example, we have declared an array object called totn_array that has 5 elements. We have then invoked the findIndex() method of the totn_array variable to test each element value using the callback function greater_than_zero.

We have written the output of the findIndex() method to the web browser console log, for demonstration purposes, to show what the findIndex() method returns.

The following will be output to the web browser console log:

3

In this example, the findIndex() method will return 3. This is the index of the first element in the array that satisfied the crtieria of being greater than zero which is the array element that has the value of 5.

Using the thisParameter

When you use the optional parameter called thisParameter, the findIndex() method will provide the value of thisParameter as this within the callback function.

For example:

var totn_array = [ "tech", "on", "the", "net" ];
var msg = "The element being tested is: ";

function contains_n_char(totn_element) {
   window.console.log(this + totn_element);
   return totn_element.indexOf('n') !== -1;
}

window.console.log(totn_array.findIndex(contains_n_char, msg));

In this example, we have used thisParameter to provide the following string value as this in the callback function: 

"The element being tested is: "

The following will be output to the web browser console log:

The element being tested is: tech
The element being tested is: on
1

In this case, the findIndex() method will return 1. This is the index of the first element that contains the "n" character which is the array element with the value of "on" (we use the indexOf method to test if each element contains the "n" character).

Once the findIndex() method encounters an element that satisfies the criteria, it immediately returns the index of that element and does not process the rest of the elements in the array (preventing the findIndex() method from processing the elements "the" and "net" in the array). This is seen by the output to the web browser console log.

Share on: