How to Use the JavaScript Array FindIndex Method

The JavaScript array findIndex method returns the first element of an array that meets a provided condition. Learn how to apply it to your code. 

Written by K. Jagathish
Published on May. 31, 2023
Image: Shutterstock / Built In
Image: Shutterstock / Built In
Brand Studio Logo

The findIndex() method in JavaScript returns the index of the first element of the array only if the callback function passed to the findIndex method returns true. Otherwise, it returns -1.

const lang = ["Java", "JavaScript"];

// element found in 1st index 
lang.findIndex( (val) => val === "JavaScript" ); // 1 

// element not found so returns -1
lang.findIndex( (val) => val === "Python" ); // -1

What Is the Array findIndex method in JavaScript?

The findIndex method of JavaScript returns the index of the first element of the array that satisfies a given condition. It’s useful for locating a specific element in a complex data structure. 

The findIndex method in JavaScript is used when you want to find the index of the first element in an array that satisfies a given condition. It’s particularly useful when you have an array of objects or complex data structures and need to locate a specific element based on certain criteria.

Instead of manually iterating through the array and checking each element, findIndex provides a concise and efficient solution. It returns the index of the first matching element or -1 if no match is found. This method can be utilized in various scenarios, such as filtering data, implementing search functionalities or performing conditional operations on array elements.

More on JavaScriptHow to Find Values in a JavaScript Array

 

How to Use the Array FindIndex Method in JavaScript 

Below is the syntax and an example for the findIndex method.

 

JavaScript Array FindINdex Method Syntax

The syntax for the array findIndex in JavaScript is as follows:

arr.findIndex(callback( element, index, array ) ,thisArg)
  • callback function: A function to execute on each value in the array until the function returns true, indicating that the satisfying element was found.
  • thisArg: Optional object to use as this when executing callback.

The callback function takes three arguments:

  1. element: Current processing element
  2. index (Optional): Index of the element processing
  3. array (Optional): Array in which the findIndex method is called.

 

JavaScript Array FindINdex Method Example 

const lang = ["Java", "JavaScript"];
 
let hasJavaScript = function(currentElement, index, array){
  console.log(`currentElement = ${currentElement}`);
  console.log(`index = ${index}`);
  console.log("-------------------------");
  return array[index] === "JavaScript";
}
// element found in 1st index 
lang.findIndex( hasJavaScript ); // 1 

// output
currentElement = Java
index = 0
-------------------------
currentElement = JavaScript
index = 1
-------------------------
1
A tutorial on the findIndex array method in JavaScript. | Video: Florin Pop

More on JavaScript3 Ways to Use Array Slice in JavaScript

 

JavaScript Array FindIndex Method Tips

Once the callback returns the index, it won’t process the remaining elements. Unlike other array methods such as Array.some(), callback runs even for indexes with unassigned values.

let num = new Array(3); // creating an empty array with length 3

console.log(num); // [empty × 3]

console.log(num[0]); // undefined 

// the callback function passed to Array.some method will not check the callback for unassigned values 

num.some(a => {console.log(a); return a === undefined }) // false

// But Array.findIndex will check the callback function for unassigned values also  

num.findIndex(a => {console.log(a); return a === undefined }) // undefined will be printed -   0 will be returned 

The Array.find() method, which returns the value of an array element, instead of its index.

Explore Job Matches.