How to find an object in an Array of objects in JavaScript
Tags: javascript, webdev
Published: 2023-04-06 12:29:05

Do you want to find a record from an array of records using an identifier or a unique field?
Do you want to filter out records matching a certain condition? We will explore all of them in this tutorial.

Consider the following array of employees:

```js
const employees = [
  {
    id: 1,
    first_name: "Jonas",
    last_name: "Baudasso",
    email: "jbaudasso0@paypal.com",
    gender: "Male",
    department: "Support",
  },
  {
    id: 2,
    first_name: "Delcina",
    last_name: "Baldelli",
    email: "dbaldelli1@istockphoto.com",
    gender: "Female",
    department: "Engineering",
  },
  {
    id: 3,
    first_name: "Charlotta",
    last_name: "Sodor",
    email: "csodor2@businessinsider.com",
    gender: "Female",
    department: "Human Resources",
  },
  {
    id: 4,
    first_name: "Scarface",
    last_name: "Sandercock",
    email: "ssandercock3@ovh.net",
    gender: "Male",
    department: "Support",
  },
  {
    id: 5,
    first_name: "Rob",
    last_name: "Beurich",
    email: "rbeurich4@comsenz.com",
    gender: "Male",
    department: "Engineering",
  },
]
```

We will use the above list in our examples.

## Finding the index of the object

We can use the [findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
method to get the index of the first matching record.

```js
const index = employees.findIndex(employee => {
  // Function gets called for each employee until the function returns true
  if (employee.id === 3) {
    return true
  }
  return false
})

console.log(index) // 👉 2

const employee = employees[index]

console.log(employee?.first_name) //👉 Charlotta
```

We can simplify the `findIndex` function callback to a single line:

```js
const index = employees.findIndex(employee => employee.id === 3)
```

If we pass an id that does not exist, the `findIndex` function will return -1.

## Finding the object directly

We can use the [find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
method to get the object directly without finding the index explicitly.

```js
const employee = employees.find(employee => employee.id === 3)

console.log(employee?.first_name) //👉 Charlotta
```

If the employee is not found, the find method will return `undefined`.

## Finding using a unique key

It is not necessary that we always need to use an id to find the object. We can use other unique fields like email as well:

```js
const employee = employees.find(
  employee => employee.email === "rbeurich4@comsenz.com"
)
console.log(employee?.first_name) // 👉 Rob
```

If you check for a non-unique in the condition, then it will return the first matching record.

## Finding all the records which match the condition

If you want to filter all the records matching a certain condition, then you can use the [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) method as shown below:

```js
const engineers = employees.filter(
  employee => employee.department === "Engineering"
)
console.log(engineers.length) // 👉 2
```

The filter function returns an array of objects with matching records.
If there are no matching records, then it returns an empty array.