How to Use Array FindIndex in JavaScript: A Simple Example

The findIndex() method in JavaScript helps you find the index of the first element in an array that meets a specific condition. If no element matches the condition, it returns -1. This method is useful when you need to know the position of an element in an array based on certain criteria. In this post, we’ll walk through the basics of using findIndex() with a simple example.

Syntax of findIndex()

The findIndex() method accepts a callback function, which is applied to each element in the array. When the callback returns true, findIndex() returns the index of that element.

array.findIndex(callback(element, index, array), thisArg)

• callback: A function executed on every element of the array. It should return true when the desired element is found.
• element: The current element being processed in the array.
• index (optional): The index of the current element.
• array (optional): The array findIndex() was called upon.
• thisArg (optional): Value to use as this when executing the callback.

Basic Example: Finding the Index of an Even Number

Let’s start with a simple example where we find the index of the first even number in an array.

const numbers = [1, 3, 7, 8, 10];

const firstEvenIndex = numbers.findIndex(function(num) {
    return num % 2 === 0;
});

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

Explanation:

• Original array: We have an array of numbers [1, 3, 7, 8, 10].
• Callback function: Inside findIndex(), the function checks if a number is even using num % 2 === 0.
• Result: The method returns the index 3, because the first even number (8) is at index 3.

Simplified Example Using Arrow Functions

You can simplify the code by using arrow functions, which make the syntax shorter and cleaner.

const numbers = [1, 3, 7, 8, 10];

const firstEvenIndex = numbers.findIndex(num => num % 2 === 0);

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

Explanation:

• Arrow function: Instead of writing a full function declaration, we use an arrow function num => num % 2 === 0, which makes the code more concise.

Example 2: Finding the Index of an Object in an Array

The findIndex() method is also very useful when working with arrays of objects. Suppose we have an array of user objects, and we want to find the index of the user with a specific name.

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 28 }
];

const bobIndex = users.findIndex(user => user.name === 'Bob');

console.log(bobIndex); 
// Output: 1

Explanation:

• Original array: We have an array of objects representing users, each with a name and age.
• Callback function: The function user => user.name === 'Bob' checks if the name of the user is ‘Bob’.
• Result: The findIndex() method returns the index 1, as Bob is the second element in the array (arrays are zero-indexed).

Conclusion

The findIndex() method in JavaScript is a handy tool when you need to find the position of an element in an array that meets a certain condition. Here’s a quick recap:

• Returns the Index: Unlike find(), which returns the element, findIndex() returns the index of the first matching element.
• Returns -1 if Not Found: If no element matches the condition, findIndex() returns -1.
• Use Cases: This method is perfect when you need to identify the position of an element, especially in arrays of objects.

Whether you’re working with simple arrays or arrays of objects, findIndex() helps you efficiently pinpoint the position of elements in JavaScript.

Happy coding!

Subscribe to Youtube Channel