Syntax
The syntax for the findIndex method is simple:
array.findIndex(callback(element, index, array), thisArg);
Explanation:
- array: The array on which the findIndex method is called.
- callback: A function that tests each element of the array. It should return true for the element you are searching for.
- element: The current element being processed in the array.
- index: The index of the current element.
- array: The array findIndex was called upon.
- thisArg (optional): The value to use as this when executing the callback function.
Note: The `callback` function should return `true` if the element meets the condition, & `false` otherwise.
Parameters
1. callback (Required)
The callback function is executed for every element in the array until it finds a match. It takes three arguments:
- element: The current item in the array.
- index: The index of the current item.
- array: The array being traversed.
2. thisArg (Optional)
This parameter allows you to specify the context (this) for the callback function. If omitted, undefined is used as the default.
Return Value
The findIndex method returns:
- Index: The index of the first element that satisfies the testing function.
- -1: If no elements satisfy the testing function.
Examples
Example 1: Finding the Index of a Number
const numbers = [10, 20, 30, 40, 50];
const result = numbers.findIndex(num => num > 25);
console.log(result);
You can also try this code with Online Javascript Compiler
Output:
2
Explanation: The findIndex method searches for the first number greater than 25 in the array. It returns 2, as 30 is the first number greater than 25, and its index is 2.
Example 2: Finding the Index of an Object
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];
const result = users.findIndex(user => user.name === 'Bob');
console.log(result);
You can also try this code with Online Javascript Compiler
Output:
1
Explanation: The findIndex method looks for the user object where the name is 'Bob'. The index of 'Bob' in the array is 1.
Example 3: Using thisArg
const threshold = { limit: 15 };
const numbers = [10, 20, 30, 40];
const result = numbers.findIndex(function(num) {
return num > this.limit;
}, threshold);
console.log(result);
You can also try this code with Online Javascript Compiler
Output:
1
Explanation: Here, thisArg is used to set this.limit to 15. The first number greater than 15 is 20, at index 1.
Array Find Methods
JavaScript provides several methods to search for elements in an array. While `findIndex` is one of them, it’s important to understand how it differs from other similar methods like `find`, `indexOf`, & `includes`. Let’s understand these in detail:
1. `findIndex`
As discussed earlier, `findIndex` returns the index of the first element that satisfies a given condition. If no element matches, it returns `-1`.
Example:
const numbers = [10, 20, 30, 40, 50];
const index = numbers.findIndex(num => num > 25);
console.log(index);
You can also try this code with Online Javascript Compiler
Output:
2 (because 30 is the first number greater than 25)
2. `find`
The `find` method is similar to `findIndex`, but instead of returning the index, it returns the actual element that meets the condition. If no element is found, it returns `undefined`.
Example:
const numbers = [10, 20, 30, 40, 50];
const result = numbers.find(num => num > 25);
console.log(result);
You can also try this code with Online Javascript Compiler
Output:
30
3. `indexOf`
The `indexOf` method returns the index of the first occurrence of a specific value in an array. It does not take a condition but looks for an exact match. If the value is not found, it returns `-1`.
Example:
const numbers = [10, 20, 30, 40, 50];
const index = numbers.indexOf(30);
console.log(index);
You can also try this code with Online Javascript Compiler
Output:
2
4. `includes`
The `includes` method checks if an array contains a specific value & returns `true` or `false`. It does not provide the index or allow for conditional checks.
Example:
const numbers = [10, 20, 30, 40, 50];
const result = numbers.includes(30);
console.log(result);
You can also try this code with Online Javascript Compiler
Output:
true
Key Differences:
- `findIndex` returns the index of the first element that meets a condition.
- `find` returns the element itself that meets the condition.
- `indexOf` returns the index of an exact value match.
- `includes` checks if a value exists in the array.
Common Use Cases
1. Validating Data
When working with arrays, you might need to find the first invalid entry.
const ages = [25, 30, -5, 40];
const invalidIndex = ages.findIndex(age => age < 0);
console.log(invalidIndex);
You can also try this code with Online Javascript Compiler
Output:
2
Explanation: The method identifies the first negative age in the array and returns its index.
2. Updating an Object in an Array
Often in applications, you need to update an object in an array by finding its index.
let products = [
{ id: 101, name: 'Laptop', price: 50000 },
{ id: 102, name: 'Phone', price: 20000 }
];
const productIndex = products.findIndex(product => product.id === 102);
if (productIndex !== -1) {
products[productIndex].price = 18000;
}
console.log(products);
Explanation: The findIndex method locates the product with id: 102 and updates its price.
3. Searching for Missing Data
You can use findIndex to identify gaps or missing data in arrays.
const scores = [100, null, 95, 80];
const missingIndex = scores.findIndex(score => score === null);
console.log(missingIndex);
You can also try this code with Online Javascript Compiler
Output:
1
Explanation: The method identifies the first null value and returns its index.
Supported Browsers
The findIndex method is supported in the following browsers:
- Google Chrome: Version 45 and above
- Mozilla Firefox: Version 25 and above
- Microsoft Edge: Supported
- Safari: Version 7.1 and above
- Opera: Version 32 and above
For older browsers, you may need a polyfill to use the findIndex method.
Frequently Asked Questions
What happens if no element matches the condition in findIndex?
If no element satisfies the condition, the findIndex method returns -1.
Can findIndex be used with objects in an array?
Yes, you can use findIndex to locate objects in an array by checking their properties.
Is findIndex destructive to the original array?
No, findIndex does not modify the original array. It only returns the index of the first matching element.
Conclusion
In this article, we discussed the findIndex method in JavaScript, covering its syntax, parameters, return value, and practical examples. This method is an essential tool for working with arrays, helping you locate elements based on specific conditions.
You can also check out our other blogs on Code360.
84+ registered