How to find an Object in an Array in TypeScript

# Table of Contents

# Find the first object in an array that matches a condition in TS

To find an object in an array:

Use the Array.find() method to iterate over the array.
Check if each object meets a condition.
The find method will return the first matching object.

index.ts

Copied!
const arr = [
  { id: 1, country: 'Mexico' },
  { id: 2, country: 'Germany' },
  { id: 3, country: 'Mexico' },
const found = arr.find((obj) => {
  return obj.id === 1;
});
// 👇️ {id: 1, country: 'Mexico'}
console.log(found);

The function we passed to the Array.find method gets called with each element (object) in the array until it returns a truthy value or iterates over the entire array.

On each iteration, we check if the id property of the object is equal to 1 .

If the condition is met, the


               find()

method returns the corresponding object and short-circuits.

This is very convenient when you only need to get the first object that matches the specific condition.

There are no wasted iterations because once the condition is met, the


               find()

method short-circuits and returns the object.

If the callback function we passed to the find method never returns a truthy value, the find() method returns undefined .

index.ts

Copied!
const arr = [
  { id: 1, country: 'Mexico' },
  { id: 2, country: 'Germany' },
  { id: 3, country: 'Mexico' },
// 👇️ const found: {id: number; country: string; } | undefined
const found = arr.find((obj) => {
  return obj.id === 1;
});

Notice that the type of the found variable is either an object or undefined .

You can use a type guard to narrow down the type to be able to access properties on the object.

index.ts

Copied!
const arr = [
  { id: 1, country: 'Mexico' },
  { id: 2, country: 'Germany' },
  { id: 3, country: 'Mexico' },
// 👇️ const found: {id: number; country: string; } | undefined
const found = arr.find((obj) => {
  return obj.id === 1;
});
if (found) {
  // ✅ TypeScript now knows that found is an object
  // and not undefined
  console.log(found.country); // 👉️ Mexico

TypeScript can safely infer the type of the found variable to be an object in the if block.

# Find all Objects in an Array that match a condition in TS

To find all objects in an array that match a condition:

Use the filter() method to iterate over the array.
Check if each object matches a condition.
The filter method will return a new array containing the objects that match the condition.

index.ts

Copied!
const arr = [
  { id: 1, country: 'Mexico' },
  { id: 2, country: 'Germany' },
  { id: 3, country: 'Mexico' },
const filtered = arr.filter((obj) => {
  return obj.country === 'Mexico';
});
// 👇️ [{id: 1, country: 'Mexico'}, {id: 3, country: 'Mexico'}]
console.log(filtered);

The function we passed to the