Fix - Array.find() possibly undefined in TypeScript

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.

Copied!
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.

Copied!
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.

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().

Copied!
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.

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.

Copied!
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 (?.).

Copied!
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.

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.