Find Object in Array by property Value in TypeScript

avatar

Borislav Hadzhiev

Wed Feb 23 20223 min read

banner

Photo by Robson Morgan

Find Object in Array by property Value in TypeScript #

To find an object in an array by property value:

  1. Call the find() method on the array.
  2. On each iteration, check if the value meets a condition.
  3. The find() method returns the first value in the array that satisfies the condition.
index.ts
const arr = [ { id: 1, language: 'typescript' }, { id: 2, language: 'javascript' }, { id: 3, language: 'typescript' }, ]; // ✅ Find first object whose value matches condition const first = arr.find((obj) => { return obj.id === 2; }); // 👇️ {id: 2, language: 'javascript'} console.log(first); // ✅ Find multiple objects whose values satisfy condition const all = arr.filter((obj) => { return obj.language === 'typescript'; }); // 👇️ [{id: 1, language: 'typescript'}, {id: 3, language: 'typescript'}] console.log(all);

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 value of the id property in the object is equal to 2.

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, language: 'typescript' }, { id: 2, language: 'javascript' }, { id: 3, language: 'typescript' }, ]; // 👇️ const first: {id: number; language: string;} | undefined const first = arr.find((obj) => { return obj.id === 2; });

Notice that the type of the first 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, language: 'typescript' }, { id: 2, language: 'javascript' }, { id: 3, language: 'typescript' }, ]; // 👇️ const first: {id: number; language: string;} | undefined const first = arr.find((obj) => { return obj.id === 2; }); if (first) { // ✅ first is inferred to be object console.log(first.language); }

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

Use the filter() method to find multiple objects in an array that have a value that meets 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, language: 'typescript' }, { id: 2, language: 'javascript' }, { id: 3, language: 'typescript' }, ]; // ✅ Find multiple objects whose values satisfy condition const all = arr.filter((obj) => { return obj.language === 'typescript'; }); // 👇️ [{id: 1, language: 'typescript'}, {id: 3, language: 'typescript'}] console.log(all);

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 elements 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.