Array.find() possibly undefined in TypeScript [Solved]

avatar
Borislav Hadzhiev

Last updated: Feb 27, 2024
3 min

banner

# Array.find() possibly undefined in TypeScript [Solved]

The Array.find() method returns an undefined value if the condition implemented in the callback function is never met or you haven't returned a value from the callback function.

To resolve the issue, use a type guard to check if find returned a value before accessing properties or methods.

Here is an example of how the error occurs.

index.ts
const arr = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bobby Hadz' }, { id: 3, name: 'Carl' }, ]; const result = arr.find((element) => { return element.id === 2; }); // โ›”๏ธ Object is possibly 'undefined'.ts(2532) result.name.toUpperCase();

array find possibly undefined in typescript

# Use a type guard to solve the error

Here is how you would get around the "Object is possibly undefined" error.

index.ts
const arr = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bobby Hadz' }, { id: 3, name: 'Carl' }, ]; const result = arr.find((element) => { return element.id === 2; }); // ๐Ÿ‘‡๏ธ result is object or undefined here if (result !== undefined) { // ๐Ÿ‘‡๏ธ result is an object here console.log(result.name.toUpperCase()); // ๐Ÿ‘‰๏ธ BOBBY HADZ }

use type guard to solve the error

The code for this article is available on GitHub

The if statement serves as a simple type guard.

TypeScript knows that the find() method returns the first value in the array for which the condition was met or undefined if the condition is never met.

If we exclude undefined from the possible values, the compiler knows that the variable is an object.

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

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

# Forgetting to return a value from the callback function

Another common cause of the find() method returning undefined is when we forget to explicitly return a value from the callback function we passed to find().

index.ts
const arr = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bobby Hadz' }, { id: 3, name: 'Carl' }, ]; const result = arr.find((element) => { element.id === 2; }); console.log(result); // ๐Ÿ‘‰๏ธ undefined

forgetting to return value from callback function

The code for this article is available on GitHub

Notice that we didn't use an arrow function with implicit return and didn't use the return statement.

Therefore the callback function implicitly returns undefined on each invocation and eventually find() also returns undefined.

# Make sure to return a value from the callback function

Make sure you return a value from the callback function, either by using an implicit return in an arrow function or by explicitly using the return statement.

index.ts
const arr = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bobby Hadz' }, { id: 3, name: 'Carl' }, ]; // ๐Ÿ‘‡๏ธ implicit return const result = arr.find((element) => element.id === 2);

make sure to return value from callback function

The code for this article is available on GitHub

# Solve the error using the optional chaining operator

An alternative solution to the find() method returning undefined is to use optional chaining (?.).

index.ts
const arr = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bobby Hadz' }, { id: 3, name: 'Carl' }, ]; const result = arr.find((element) => element.id === 2); // ๐Ÿ‘‡๏ธ "BOBBY HADZ" console.log(result?.name.toUpperCase());

using optional chaining operator

The optional chaining (?.) operator short-circuits, instead of throwing an error, if the reference is equal to undefined or null.

If the result variable has a value of undefined or null, the operator will short-circuit and return undefined.

You can use this approach to access deeply nested properties that may have an undefined or a null value without getting an error.

I've also written a detailed guide on how to find an object in an array.

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.

Copyright ยฉ 2024 Borislav Hadzhiev