How to find an Object in an Array in TypeScript

avatar

Borislav Hadzhiev

Wed Feb 23 20223 min read

banner

Photo by Robson Morgan

Find an Object in an Array in TypeScript #

To find an object in an array:

  1. Call the find() method on the array, passing it a function.
  2. The function should return an equality check on the relevant property.
  3. The find() method returns the first value in the array that satisfies the condition.
index.ts
const arr = [ { id: 1, country: 'Mexico' }, { id: 2, country: 'Germany' }, { id: 3, country: 'Mexico' }, ]; // ✅ Find first object that matches condition const found = arr.find((obj) => { return obj.id === 1; }); // 👇️ {id: 1, country: 'Mexico'} console.log(found); // ✅ Find multiple objects that satisfy condition 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 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 returns true, 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
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 and be able to access properties of the object.

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

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

Use the filter() method to find multiple objects in an array that satisfy a condition. The filter method takes a function as a parameter and returns an array containing only the elements that satisfy the specific condition.

index.ts
const arr = [ { id: 1, country: 'Mexico' }, { id: 2, country: 'Germany' }, { id: 3, country: 'Mexico' }, ]; // ✅ Find multiple objects that satisfy condition 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 Array.filter method gets invoked with every element in the array.

If the function returns a truthy value, the element gets added to the array that the filter method returns.

Note that the filter method will iterate over the entire array, regardless of how many times the condition is met.

This way, we are able to get multiple objects that satisfy a specific condition from an array of objects.

In other words, we filter down the array to contain only objects that satisfy a condition.

If the callback function we passed to the filter method never returns a truthy value, the filter method returns an empty array.

Use the search field on my Home Page to filter through my more than 1,000 articles.