JavaScript Array findIndex()

In this post, we will discuss findIndex() method available in JavaScript Array.

findIndex()

The findIndex() method will return only the index of the first element that matches the condition. We need to write a function for condition and pass the function name to the findIndex() as a parameter. If no element matches the condition, then -1 is returned. Index starts from 0.

Syntax:

array_name.findIndex(function_name)

Here, 'array_name' is the name of the array. It will take 'function_name' as a parameter.

Example 1:-

Let's create an array that hold 10 subjects and return index of first occurrence of the element with length-4 from the subjects-array. So the condition we need to provide inside the function will be -subjects.length==4.

CopiedCopy Code
<html>
<body>
<script>
// Create an array that hold 10 strings
const subjects1 =["php","html","node.js","java","jsp","jsp","php","php","java","php"];
document.writeln("Subjects: <br>");
document.writeln(subjects1);
document.writeln("<br>");
document.writeln("<br>");
function condition1(subjects) {
  return subjects.length==4;
}
// Return the first occurrence index of element with length-4.
document.writeln("first occurrence index of the string of length-4:");
document.writeln(subjects1.findIndex(condition1));
</script>
</body>
</html>

Output:

Subjects:
php,html,node.js,java,jsp,jsp,php,php,java,php
first occurrence index of the string of length-4: 1

We can see that the index of first element with length-4 is 1 i.e. "html".

Example 2:-

Let's create an array that hold 10 subjects and return the index of first occurrence of the element with length-8 from the subjects-array. So the condition we need to provide inside the function will be - subjects.length==8.

CopiedCopy Code
<html>
<body>
<script>
// Create an array that hold 10 strings
const subjects1 =["php","html","node.js","java","jsp","jsp","php","php","java","php"];
document.writeln("Subjects: <br>");
document.writeln(subjects1);
document.writeln("<br>");
document.writeln("<br>");
function condition1(subjects) {
  return subjects.length==8;
}
// Return the first occurrence index of element with length-8.
document.writeln("first occurrence index of the string of length-8:");
document.writeln(subjects1.findIndex(condition1));
</script>
</body>
</html>

Output:

Subjects:
php,html,node.js,java,jsp,jsp,php,php,java,php
first occurrence index of the string of length-8: -1

We can see that no element in the subjects array with length-8. So, -1 is returned.

Example 3:-

Let's create an array that hold 10 integers and return the index of first occurrence of element which is greater than 20. So the condition we need to provide inside the function will be - marks>20.

CopiedCopy Code
<html>
<body>
<script>
// Create an array that hold 10 integers
const marks =[12,34,22,45,67,89,0,0,7,56];
document.writeln("Marks: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("<br>");
function condition1(marks) {
  return marks>20;
}
// Return the first occurrence index of element which is greater than 20
document.writeln("first occurrence index of element which is greater than 20:");
document.writeln(marks.findIndex(condition1));
</script>
</body>
</html>

Output:

Marks:
12,34,22,45,67,89,0,0,7,56
first occurrence index of element which is greater than 20: 1

We can see that the first element index which is greater than 20 is 1 i.e., 34.

Example 4:-

Let's create an array that hold 10 integers and return the index of first occurrence of the element which is greater than 600. So the condition we need to provide inside the function will be - marks>600.

CopiedCopy Code
<html>
<body>
<script>
// Create an array that hold 10 integers
const marks =[12,34,22,45,67,89,0,0,7,56];
document.writeln("Marks: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("<br>");
function condition1(marks) {
  return marks>600;
}
// Return the first occurrence index of element which is greater than 600
document.writeln("first occurrence index of element which is greater than 600:");
document.writeln(marks.findIndex(condition1));
</script>
</body>
</html>

Output:

Marks:
12,34,22,45,67,89,0,0,7,56
first occurrence index of element which is greater than 600: -1

We can see that no element in the marks array is greater than 600. So, -1 is returned.