Fix - Array.find() possibly undefined in TypeScript

avatar

Borislav Hadzhiev

Thu Mar 03 20222 min read

banner

Photo by Seth Doyle

Fix - Array.find() possibly undefined in TypeScript #

The Array.find() method returns an undefined value if the condition implemented in the callback function is never satisfied or you haven't returned a value from the callback function. To solve this, 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: 'Bob' }, { id: 3, name: 'Carl' }, ]; const result = arr.find((element) => { return element.id === 2; }); // ⛔️ Object is possibly 'undefined'.ts(2532) result.name.toUpperCase();

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

index.ts
const arr = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { 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()); }

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 satisfied, or undefined if the condition is never satisfied.

If we exclude undefined from the possible values the result variable stores, the compiler can be sure 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.

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: 'Bob' }, { id: 3, name: 'Carl' }, ]; const result = arr.find((element) => { element.id === 2; }); console.log(result); // 👉️ undefined

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

This means that the callback function will implicitly return undefined on each invocation, and eventually find() will also return undefined.

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

index.ts
const arr = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Carl' }, ]; // 👇️ implicit return const result = arr.find((element) => element.id === 2);

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: 'Bob' }, { id: 3, name: 'Carl' }, ]; const result = arr.find((element) => element.id === 2); // 👇️ "BOB" console.log(result?.name.toUpperCase());

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

So, 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 null value, without getting the "Object is possibly undefined" error.

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