findindex array javascript

JavaScript Array findIndex() method: The Ultimate Guide

by

Are you excited to learn about how to find an index of an object in an array using the findIndex() method in JavaScript?

And how it can be used to find the index of an element in an array based on a given condition.

This article explains the syntax and parameters of the method, along with examples demonstrating its usage.

You will also see examples of finding the index of the first odd number, the first long string, and an object with a specific property value in different arrays.

What is findIndex() method?

The findIndex() method is a function that is available for arrays in JavaScript.

It takes a callback function as an argument and applies this function to each element of the array, one by one, until the callback function returns a truthy value (for example, a value that evaluates to true when converted to a boolean).

When this happens, findIndex() immediately returns the index of the current element.

If the callback function never returns a truthy value for any element of the array, findIndex() returns -1.

Syntax

Here’s the syntax for findIndex() method in JavaScript:

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

Parameters

📌callback (required)

A function to execute on each element of the array until the function returns a truthy value, indicating that the satisfying element was found.

📌element (required):

The current element being processed in the array.

📌index (optional)

The index of the current element being processed in the array.

📌array (optional):

The array on which findIndex() was called.

📌thisArg (optional):

An object to use as this when executing the callback.

Return value

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function.

If no elements satisfy the testing function, it returns -1.

Here’s an example to help illustrate how findIndex() works:

const numbers = [1, 2, 3, 4, 5];
const isEven = (number) => number % 2 === 0; ✅
const firstEvenIndex = numbers.findIndex(isEven);
console.log(firstEvenIndex);

In this example, we have an array of numbers, and a callback function isEven that checks if a number is even.

When we call findIndex on the numbers array with isEven as an argument, it applies isEven to each element of the array in order: first 1, then 2, then 3, and so on.

When it gets to 2, isEven(2) returns true, so findIndex() immediately returns the index of 2 in the array, which is 1.

How to find index of object in array in JavaScript?

You can find the index of an object in a JavaScript array by key and value using the findIndex() method.

As we mentioned earlier, this method returns the index of the first element in the array that satisfies a provided testing function.

If no elements satisfy the testing function, it returns -1.

Here’s an example that demonstrates how to use the findIndex() method to find the index of an object in an array:

Output:

const data = [
{ name: "Anna", age: 18 },
{ name: "Bea", age: 19 },
{ name: "Charlz", age: 20 }
];
const findAnna = (data) => data.name === "Anna"; ✅
const annaIndex = data.findIndex(findAnna);
console.log(annaIndex);

Output:

0

The output is 0 because the findIndex() method returns the index of the first element in the array that satisfies the provided testing function.

The testing function is findAnna, which checks if the name property of an object is equal to “Anna.”

When you call findIndex on the data array with findAnna as an argument, it returns 0, which is the index of the first element in the array that satisfies the testing function (in this case, the element with name property equal to “Anna”).

Since array indices in JavaScript start at 0, this means that “Anna” is the first element in the data array.

Different Examples using findIndex method

Finding the index of the first odd number in an array of numbers

const numbers = [2, 4, 5, 6, 8];
const isOdd = (number) => number % 2 !== 0; ✅
const firstOddIndex = numbers.findIndex(isOdd);
console.log(firstOddIndex);

Output:

2

Finding the index of the first string longer than 5 characters in an array of strings

const subjects = ["Math", "English", "Science", "Programming"];
const isLongerThanFive = (string) => string.length > 5; ✅
const firstLongStringIndex = subjects.findIndex(isLongerThanFive);
console.log(firstLongStringIndex);

Output:

1

Finding the index of the first object with a specific property value in an array of objects

const data = [
  { name: "Anna", age: 18 },
  { name: "Bea", age: 19 },
  { name: "Charlz", age: 20 }
];
const findCharlz = (data) => data.name === "Charlz"; ✅
const charlzIndex = data.findIndex(findCharlz);
console.log(charlzIndex);

Output:

2

Conclusion

In conclusion, the article introduces the findIndex() method in JavaScript and explains its usage to find the index of an element in an array based on a given condition.

The method takes a callback function and applies it to each element of the array until a truthy value is returned, indicating the satisfying element’s index. If no elements satisfy the condition, it returns -1.

The article provides clear syntax, parameters, and examples demonstrating how to use findIndex() in different scenarios.

We are hoping that this article provides you with enough information that helps you understand on how to use the findindex array in JavaScript.

You can also check out the following article:

Thank you for reading itsourcecoders 😊.

Leave a Comment