JavaScript Array findIndex() Method with Example

In this tutorial, we will learn about the JavaScript Array findIndex() method with the help of example programs.

The findIndex() method works similarly to the find() method, but it returns the index of the first array element that meets the certain criteria defined in the callback function.

In other words, find() method of array returns the index of first array element that satisfies provided testing function (i.e. callback function). Otherwise, it returns -1 if no matching is found.

For example, the following snippet code returns the index of the first number that’s greater than 2.

Program code 1:

<script>
   let numbers = [1, 2, 3, 4, 5, 6, 7];
// Callback function to check greater number than 2.
   function isGreater(element) {
     return element > 2;
   }
// Find the index of first greater number than 2.
   let index = numbers.findIndex(isGreater);
   console.log("Index of first greater number than 2: " +index);
</script>

Output:
      Index of first greater number than 2: 2

JavaScript Array findIndex() Syntax

The general syntax of the findIndex() method in JavaScript is:

// Arrow function
   arr.findIndex((element) => { /* ... */ } )
   arr.findIndex((element, index) => { /* ... */ } )
   arr.findIndex((element, index, array) => { /* ... */ } )

// Callback function
   arr.findIndex(callbackFn)
   arr.findIndex(callbackFn, thisArg)

// Inline callback function
   arr.findIndex(function(element) { /* ... */ })
   arr.findIndex(function(element, index) { /* ... */ })
   arr.findIndex(function(element, index, array){ /* ... */ })
   arr.findIndex(function(element, index, array) { /* ... */ }, thisArg)

Here, arr is the name of an array.

findIndex() Parameters

The Array.findIndex() method can take three parameters that are:

• callbackFn – The callback function to execute on each array element; The callbackFn needs to return true for satisfying element in the array. If so, the findIndex() method immediately returns the index of that element. Else, findIndex() returns -1. The function can take the following arguments:
  • element – The current element to be passed in the array.
  • index – The index of the current element being passed in the array.
  • array – The array on which the findIndex() method is called.
• thisArg – Object to use as this inside the callback function. It is optional.

findIndex() Return Value

This method returns the index of the first element in the array that satisfies the provided callback function. Otherwise, returns -1 if no elements satisfy the function.

The findIndex() method executes the callback function once for each element in the array until it finds a truthy value.

If there is more than one element in the array that will return a truthy value, then findIndex returns only the index of the first element in the array.

Array findIndex() Method Example Programs

Let’s create a JavaScript program in which we will create an array of numbers and find the index of first odd number in the array using findIndex() method of array.

Program code 2:

<script>
   let numArr = [1, 4, 35, 8, 78, 6];
   function isOdd(element) {
      return element % 2 !== 0;
   }
   let index = numArr.findIndex(isOdd);
   console.log("Index of first odd number: " +index);
</script>

Output:
      Index of first odd number: 0

Let us create the preceding program using arrow function.

<script>
  let numArr = [1, 4, 35, 8, 78, 6];
  let index = numArr.findIndex((element) => element % 2 !== 0);
  console.log("Index of first odd number: " +index);
</script>

Output:
      Index of first odd number: 0

Let us create a JavaScript program to find the index of first programming language that begins with the letter “J”.

Program code 4:

<script>
  const languages = ["C", "C++", "Python", "JavaScript", "Swift", "Java"];
  const result = languages.findIndex(word => word.startsWith("J"));
  console.log(result);
</script>

Output:
       3

Thus, we can find easily the index of first matching element based on the specified criteria using findIndex() method of array.

Find index of an object in an array by one of its properties

Let’s create a JavaScript program to find the index of an object in an array by one of its properties using findIndex() method of array.

Program code 5:

<script>
  const students = [
        {name: 'Steve', rollNo: 2},
        {name: 'Ricky', rollNo: 4},
        {name: 'John', rollNo: 5},
        {name: 'Bob', rollNo: 7}
   ];
   function isFind(st) {
       return st.name === 'Ricky';
    }
   console.log(students.findIndex(isFind));
</script>

Output:
      1

Program code 6: Using arrow function

<script>
   const students = [
         {name: 'Steve', rollNo: 2},
         {name: 'Ricky', rollNo: 4},
         {name: 'John', rollNo: 5},
         {name: 'Bob', rollNo: 7}
    ];
   const result = students.findIndex( ({ name }) => name === 'John' );
   console.log(result);
</script>

Output:
       2

Return -1 if no matching element found

Program code 7:

<script>
   const students = [
         {name: 'Steve', rollNo: 2},
         {name: 'Ricky', rollNo: 4},
         {name: 'John', rollNo: 5},
         {name: 'Bob', rollNo: 7}
    ];
   const result = students.findIndex( ({ name }) => name === 'Belly');
   console.log(result);
</script>

Output: 
      -1

In this tutorial, you have learned array findIndex() method in JavaScript with the help of example programs. Hope that you will have understood how to find the index of the first matching element in an array based on specific test condition using findIndex() method.

In the next tutorial, we will discuss Array some() method with the help of examples.
Thanks for reading!!!

⇐ Prev Next ⇒