Filter an array of Objects in TypeScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Filter an array of Objects in TypeScript #

To filter an array of objects in TypeScript:

  1. Call the filter() method on the array.
  2. Check if the property on the current object meets the condition.
  3. The returned array will only contain objects that satisfy the condition.
index.ts
const employees = [ { name: 'Alice', department: 'accounting' }, { name: 'Bob', department: 'human resources' }, { name: 'Carl', department: 'accounting' }, ]; const result = employees.filter((obj) => { return obj.department === 'accounting'; }); // 👇️ [{name: 'Alice', department: 'accounting'}, // {name: 'Carl', department: 'accounting'}] console.log(result);

The function we passed to the Array.filter method gets called with each element (object) in the array.

On each iteration, we check if the department property on the object is equal to accounting and return the result.

The filter method returns an array that only contains the elements, for which the callback function returned a truthy value.

If the condition is never met, the Array.filter method returns an empty array.

Notice that we didn't have to type the arrays of objects because TypeScript is able to infer the type when the arrays are declared with values.

If you are declaring an empty array, type it explicitly.

index.ts
const employees: { name: string; department: string }[] = []; employees.push( { name: 'Alice', department: 'accounting' }, { name: 'Bob', department: 'human resources' }, { name: 'Carl', department: 'accounting' }, ); const result = employees.filter((obj) => { return obj.department === 'accounting'; }); // 👇️ [{name: 'Alice', department: 'accounting'}, // {name: 'Carl', department: 'accounting'}] console.log(result);

We initialized an empty array, so we had to explicitly type it.

If you initialize an empty array and don't explicitly type it, TypeScript sets its type to any[], which effectively turns off all type checking.

If you only need to find a single object that satisfies a condition in the array, use the Array.find() method.

index.ts
const employees = [ { name: 'Alice', department: 'accounting' }, { name: 'Bob', department: 'human resources' }, { name: 'Carl', department: 'accounting' }, ]; const result = employees.find((obj) => { return obj.name === 'Bob'; }); // 👇️ {name: 'Bob', department: 'human resources'} console.log(result); console.log(result?.name); // 👉️ "Bob" console.log(result?.department); // 👉️ "human resources"

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

If the function returns a truthy value, then find() returns the corresponding array element and short-circuits.

If the condition is never satisfied, the find() method returns undefined.

Notice that we used optional chaining when accessing properties.

This is necessary because we can't be sure if the condition is satisfied or not.

You can use a type guard to determine if a matching object was found.

index.ts
const employees = [ { name: 'Alice', department: 'accounting' }, { name: 'Bob', department: 'human resources' }, { name: 'Carl', department: 'accounting' }, ]; const result = employees.find((obj) => { return obj.name === 'Bob'; }); if (result !== undefined) { // ✅ TypeScript knows that result is object // 👇️ {name: 'Bob', department: 'human resources'} console.log(result); console.log(result?.name); // 👉️ "Bob" console.log(result?.department); // 👉️ "human resources" }

If result is not equal to undefined, TypeScript knows that it's an object, so it allows us to access properties on the object.

The Array.find() method returns the first array element that satisfies the condition.

Even if there are multiple matching elements, the method short-circuits immediately after the callback function returns a truthy value.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.