find and findIndex

ES6 Array find() and findIndex() Overview

ES6 introduced the find() and findIndex() array methods to simplify searching arrays. Instead of manually looping through elements, these methods locate matching values using a callback function.

They are commonly used in React, Angular, Vue, Node.js, REST APIs, e-commerce applications, dashboards, and enterprise applications.

Basic find() Example

const numbers =
[
  5,
  12,
  8,
  130
];

const result =
numbers.find(

  number =>

    number > 10

);

console.log(result);

// 12

find() returns the first element that satisfies the condition.

Basic findIndex() Example

const numbers =
[
  5,
  12,
  8,
  130
];

const index =
numbers.findIndex(

  number =>

    number > 10

);

console.log(index);

// 1

Searching Objects

const users =
[
  {
    id: 1,
    name: "John"
  },
  {
    id: 2,
    name: "Sarah"
  },
  {
    id: 3,
    name: "David"
  }
];

const user =
users.find(

  item =>

    item.id === 2

);

console.log(user);

Find User Index

const index =
users.findIndex(

  item =>

    item.id === 2

);

console.log(index);

// 1

Searching by Name

const employee =
users.find(

  user =>

    user.name === "David"

);

console.log(employee);

No Match Found

const value =
numbers.find(

  number =>

    number > 500

);

console.log(value);

// undefined

No Index Found

const index =
numbers.findIndex(

  number =>

    number > 500

);

console.log(index);

// -1

Using External Variables

const searchId =
3;

const result =
users.find(

  user =>

    user.id === searchId

);

console.log(result);

Finding Products

const products =
[
  {
    id: 101,
    name: "Laptop",
    price: 900
  },
  {
    id: 102,
    name: "Phone",
    price: 700
  }
];

const product =
products.find(

  item =>

    item.price > 800

);

console.log(product);

Finding Active User

const users =
[
  {
    name: "John",
    active: false
  },
  {
    name: "Sarah",
    active: true
  }
];

const activeUser =
users.find(

  user =>

    user.active

);

console.log(activeUser);

Updating an Array Item

const index =
users.findIndex(

  user =>

    user.id === 2

);

if (index !== -1) {

  users[index].name =
    "Emily";

}

findIndex() is useful when modifying existing array items.

Delete Using findIndex()

const index =
users.findIndex(

  user =>

    user.id === 2

);

if (index !== -1) {

  users.splice(
    index,
    1
  );

}

Using Callback Parameters

numbers.find(

  (
    value,
    index,
    array
  ) => {

    console.log(value);
    console.log(index);
    console.log(array);

    return value > 10;

  }

);

Callback functions receive the current value, index, and original array.

Case-Insensitive Search

const users =
[
  "John",
  "Sarah",
  "David"
];

const result =
users.find(

  user =>

    user.toLowerCase() ===
    "john"

);

console.log(result);

Finding Nested Objects

const orders =
[
  {
    id: 1,
    customer:
      {
        name: "John"
      }
  },
  {
    id: 2,
    customer:
      {
        name: "Sarah"
      }
  }
];

const order =
orders.find(

  item =>

    item.customer.name ===
    "Sarah"

);

console.log(order);

find() vs filter()

find() vs findIndex()

Real-World Use Cases

• Search users by ID.
• Find products by SKU.
• Locate orders.
• Search configuration settings.
• Update shopping cart items.
• Delete records.
• Find active sessions.
• Lookup permissions.
• Search API responses.
• State management in React.

Common Mistakes

• Using find() when multiple results are required.
• Forgetting that find() returns undefined.
• Forgetting that findIndex() returns -1.
• Using assignment instead of comparison.
• Forgetting to return a value from the callback.
• Mutating arrays accidentally.
• Ignoring optional chaining.
• Using loops instead of built-in methods.

Best Practices

• Use find() when only one result is needed.
• Use findIndex() before updating or deleting items.
• Keep callback functions simple.
• Use meaningful variable names.
• Handle missing results safely.
• Prefer immutable updates in React.
• Avoid unnecessary loops.
• Write readable callback conditions.

Interview Questions

• What is the difference between find() and findIndex()?
• When should you use find() instead of filter()?
• What happens when no match is found?
• How do you update an array item using findIndex()?
• Can find() search arrays of objects?
• What callback parameters are available?
• Is find() mutable?
• Which method is faster, find() or filter()?
• What is returned by findIndex() if no element is found?
• How are these methods used in React applications?