Array Methods

JavaScript findIndex() Method

Find the index of the first element that matches your condition.

What is findIndex()?

The findIndex() method returns the index of the first element in the array that satisfies the testing function. If no element is found, it returns -1.

Find Index of Object by Property

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const index = users.findIndex(u => u.id === 2);
console.log(index); // 1 (Bob is at index 1)

Use findIndex() to locate the position of an object in an array based on a specific property value.

Run Code

Syntax

findIndex() Syntax in JavaScript

array.findIndex((element, index, array) => {
  // Return true for the element you're looking for
  return condition;
});

The findIndex() method accepts a callback function and returns the index of the first element that satisfies the condition.

Run Code

Practical Examples

Find Index of First Match

Find Index Using a Condition

const numbers = [10, 20, 30, 40, 50];
const index = numbers.findIndex(n => n > 25);
console.log(index); // 2 (30 is first number > 25)

This example finds the index of the first number greater than 25 in an array.

Run Code

Find and Update Element

Update Array Item Using findIndex()

const items = ['apple', 'banana', 'orange', 'apple'];
const index = items.findIndex(item => item === 'banana');

if (index !== -1) {
  items[index] = 'blueberry';
}

console.log(items); // ['apple', 'blueberry', 'orange', 'apple']

Use findIndex() to locate an element and update its value safely using the returned index.

Run Code

Find and Remove Element

Remove Element by Index

const todos = [
  { id: 1, text: 'Learn JavaScript' },
  { id: 2, text: 'Build a project' },
  { id: 3, text: 'Deploy' }
];

const index = todos.findIndex(todo => todo.id === 2);
if (index !== -1) {
  todos.splice(index, 1); // Remove at that index
}

console.log(todos);
// [{id: 1, ...}, {id: 3, ...}]

Combine findIndex() with splice() to remove an object from an array based on a condition.

Run Code

Find Index with Complex Condition

Find Index with Multiple Conditions

const products = [
  { name: 'Laptop', price: 1000, inStock: false },
  { name: 'Mouse', price: 25, inStock: true },
  { name: 'Keyboard', price: 75, inStock: true }
];

const index = products.findIndex(p => 
  p.inStock && p.price < 100
);

console.log(index); // 1 (Mouse matches the criteria)

findIndex() can evaluate multiple conditions like price and stock availability to locate an element.

Run Code

findIndex() vs Alternatives

Method	Returns	When to Use
findIndex()	Index or -1	Need the position to modify/delete
indexOf()	Index or -1	Simple value search (no function)
find()	Element or undefined	Need the element itself

Common Mistakes

❌ Forgetting to Check for -1

Difference Between find() and findIndex()

const arr = [1, 2, 3];
const index = arr.findIndex(n => n > 10);
arr[index] = 99; // index is -1, modifies arr[-1]!

// Better:
if (index !== -1) {
  arr[index] = 99;
}

find() returns the matching element, while findIndex() returns the position of that element in the array.

Run Code

❌ Using indexOf() for Objects

Using indexOf() for Objects

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

// Wrong - indexOf() looks for exact match, not properties
users.indexOf({ id: 1 }); // -1

// Correct
users.findIndex(u => u.id === 1); // 0

Using indexOf() for Objects

Run Code

FAQs

What's the difference between find() and findIndex()?

find() vs findIndex() Example

const arr = [{id: 1}, {id: 2}, {id: 3}];

// find() returns the element
const element = arr.find(x => x.id === 2); // {id: 2}

// findIndex() returns the index
const index = arr.findIndex(x => x.id === 2); // 1

This example demonstrates the difference between <code>find()</code> and <code>findIndex()</code>.

Run Code

Does findIndex() stop early?

Yes, findIndex() stops and returns as soon as it finds the first matching element, making it efficient.

Can I use findIndex() on non-array objects?

Using findIndex() on Array-Like Objects

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const index = Array.prototype.findIndex.call(arrayLike, x => x === 'b');
console.log(index); // 1

This example shows how <code>findIndex()</code> can be used on array-like objects using <code>Array.prototype.findIndex.call()</code>. It works when the object has numeric keys and a <code>length</code> property.

Run Code

← Back to Arrays Overview