JavaScript findIndex() | Get Index of First Element that meets Condition

The JavaScript findIndex() method is similar to find() method, except that, it returns the index number of element, instead of the element itself. That is, findIndex() method returns the index number of first element from a given array, that satisfies the given condition. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>The first even value is at Index Number: <span id="xyz"></span></p>
   
   <script>
      const numbers = [13, 32, 43, 54, 40];
      
      let firstEvenNumIndex = numbers.findIndex(findFirstEvenIndx);

      function findFirstEvenIndx(x)
      {
         return x%2==0;
      }

      document.getElementById("xyz").innerHTML = firstEvenNumIndex;
   </script>
   
</body>
</html>

Output

The first even value is at Index Number:

However, you can also access the value itself using the returned index number. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>The first even number is: <span id="abc"></span></p>
   
   <script>
      const arr = [13, 32, 43, 54, 40];

      let fi = arr.findIndex(findFE);

      function findFE(x)
      {
         return x%2==0;
      }

      document.getElementById("abc").innerHTML = arr[fi];
   </script>
   
</body>
</html>

Output

The first even number is:

Note - Indexing starts with 0. Therefore index number 1 refers to the second element, not the first.

JavaScript findIndex() Syntax

The syntax of findIndex() method in JavaScript, is:

array.findIndex(functionName(currentElementValue, currentElementIndex, currentElementArray), thisValue)

The functionName and currentElementValue are required.

Note - The functionName refers to a function to execute for every elements of array, until the given condition inside the function satisfies.

Note - The currentElementValue basically refers to a variable that will be used to pass as an argument to the function that of course indicates to the current value/element of the specified array.

Note - The currentElementIndex refers to the index of the current element

Note - The currentElementArray refers to the array of the current element.

Note - The thisValue refers to a value passed to the specified function functionName as its this value. The default value is undefined

The findIndex() method returns -1 if no elements from given array satisfies the given condition. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <script>
      const myarray = [13, 33, 45];

      let firstEvnNmIdx = myarray.findIndex(myfunction);

      function myfunction(x)
      {
         return x%2==0;
      }

      if(firstEvnNmIdx == -1)
         console.log("Even number not found!");
      else
         console.log("The first even number is: ", myarray[firstEvnNmIdx]);
   </script>
   
</body>
</html>

The snapshot given below shows the sample output produced by above example:

JavaScript Online Test

« Previous Tutorial Next Tutorial »