javascript
  1. javascript-findindex
PreviousNext

JavaScript findIndex()

The findIndex() method is a built-in, higher-order function introduced in ES6 that is used to find the index of the first element in an array that matches the given condition. It returns the index of the found element, or -1 if not found.

Syntax

array.findIndex(callback(element[, index[, array]])[, thisArg])
  • callback: a function to execute on each value in the array until the condition is met. It takes three arguments:
    • element: the current element being checked in the array.
    • index (optional): the index of the current element being checked.
    • array (optional): the array being checked.
  • thisArg (optional): an object to use as this when executing the callback function.

Example

const numbers = [1, 2, 3, 4, 5];

const checkNumber = (number) => number > 3;
const index = numbers.findIndex(checkNumber);

console.log(index); // Output: 3

Output

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. If no elements in the array satisfy the condition, -1 is returned.

In the above example, the array contains the numbers 1, 2, 3, 4, and 5. The checkNumber function tests whether a given number is greater than 3. Running numbers.findIndex(checkNumber) returns 3 because the first number greater than 3 in the array is 4.



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FindIndex Function Example</title>
</head>
<body>

<!-- Display the result in this element -->
<div id="result"></div>

<script>
  // Sample array of numbers
  const numbers = [1, 2, 3, 4, 5];

  // Define a function to check if a number is greater than 3
  const checkNumber = (number) => number > 3;

  // Use the findIndex function to find the index of the first number greater than 3
  const index = numbers.findIndex(checkNumber);

  // Display the result on the page
  const resultElement = document.getElementById('result');
  resultElement.innerHTML = `<p>Index of the first number greater than 3: ${index}</p>`;
</script>

</body>
</html>
Try Playground

Explanation

The findIndex() method begins executing the callback function once for each element in the array. It returns the index of the first element for which the callback returns a truthy value. If the callback returns falsey for all elements, it returns -1. The callback function returns a boolean value, indicating whether the given element satisfies the search condition or not.

If the thisArg parameter is supplied, it is used as the this keyword in the callback function, and its value becomes accessible from the callback using this. If thisArg is not supplied, undefined is used as this.

Use

The findIndex() method is mostly used in scenarios where we need to find the index of an element in an array that meets certain criteria. It can be used to remove an element from an array, check if an element exists in an array, or any other scenario where we need to find the index of a particular element.

Important Points

  • The array is not modified by the findIndex() method.
  • The callback function is not executed for the elements that have been deleted; it is only executed for indexes that have been initialized.
  • The callback function is executed only for the first element that satisfies the condition, not for any other matches in the array.
  • The callback function is executed in ascending order according to the indexes of the array elements.

Summary

In summary, findIndex() is a powerful built-in method in JavaScript that finds the index of the first element in an array that satisfies the provided testing function. It simplifies searching for an element's index in an array, and it can be used in various ways to manipulate an array's data. It is important to note that it does not modify the original array and may return -1 if no valid element is found.

find()some()
Published on: