Array Methods

JavaScript find() & findIndex()

Search for specific elements in arrays and get the element itself or its index.

find() Method

The find() method returns the first element in the array that satisfies the testing function. If no element is found, it returns undefined.

Find Object in Array by Property

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

const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: 'Bob' }

Use the JavaScript find() method to return the first object that matches a condition.

Run Code

findIndex() Method

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

Find Index of Object in Array

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

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

Run Code

Examples

Find Number by Condition

Find First Number Greater Than Value

const numbers = [5, 12, 8, 130, 44];
const found = numbers.find(n => n > 10);
console.log(found); // 12 (first match)

Use find() to return the first number in an array that matches a condition.

Run Code

Find Product by ID

Find Product by ID in Array

const products = [
  { id: 101, name: 'Laptop', price: 999 },
  { id: 102, name: 'Mouse', price: 25 },
  { id: 103, name: 'Keyboard', price: 75 }
];

const product = products.find(p => p.id === 102);
console.log(product); 
// { id: 102, name: 'Mouse', price: 25 }

Use find() to search an array of objects and return the matching item by ID.

Run Code

Get Index to Modify Element

Modify Array Element Using findIndex()

const items = ['apple', 'banana', 'orange'];
const index = items.findIndex(item => item === 'banana');
if (index !== -1) {
  items[index] = 'blueberry';
}
console.log(items); // ['apple', 'blueberry', 'orange']

Use findIndex() to locate an element's index and update the value in the array.

Run Code

find() vs filter() vs indexOf()

Method	Returns	Use Case
find()	First element	Get matching object
findIndex()	Index (or -1)	Get position to modify
filter()	All matching elements	Get multiple matches

Common Mistakes

❌ Not Checking for undefined

Handle Undefined Result from find()

const arr = [1, 2, 3];
const found = arr.find(n => n > 10);
console.log(found.something); // TypeError: Cannot read property

// Better:
if (found) {
  console.log(found.something);
}

Always check if find() returns undefined before accessing properties.

Run Code

❌ Forgetting -1 Check for findIndex()

Check -1 Result from findIndex()

const arr = ['a', 'b', 'c'];
const idx = arr.findIndex(item => item === 'z');
arr[idx] = 'new'; // This modifies arr[-1]!

// Better:
if (idx !== -1) {
  arr[idx] = 'new';
}

findIndex() returns -1 if no match is found, so always validate the index before modifying the array.

Run Code

FAQs

What's the performance difference with filter()?

find() stops at the first match (faster), while filter() checks all elements. Use find() when you only need one element.

Can find() return multiple elements?

No, find() returns only the first matching element. Use filter() to get multiple matches.

← Back to Arrays Overview