TypeError: Cannot read property 'find' of Undefined in JS

avatar

Borislav Hadzhiev

Last updated: Aug 26, 2022

banner

Photo from Unsplash

TypeError: Cannot read property 'find' of Undefined in JS #

The "Cannot read property 'find' of undefined" error occurs when the find() method is called on an undefined value. To solve the error, make sure to only call the find method on arrays.

cannot read property find of undefined

Here's an example of how the error occurs.

index.js
const arr = undefined; // ⛔️ TypeError: Cannot read properties of undefined (reading 'find') const r1 = arr.find(element => element === 5);

To solve the error, initialize the value to an empty array, or conditionally check that the value is of the correct type before calling the find() method.

index.js
const fromDb = undefined; // ✅ Provide empty array fallback value const arr = fromDb || []; // ✅ Using optional chaining (?.) const r1 = arr?.find(element => element === 5); console.log(r1); // 👉️ undefined // ✅ Using ternary const r2 = arr ? arr.find(element => element === 5) : []; console.log(r2); // 👉️ undefined // ✅ Using Array.isArray if (Array.isArray(arr)) { const r3 = arr.find(element => element === 5); } else { console.log('arr is not an array'); } // ✅ Provide fallback in Place const r4 = (arr || []).find(element => element === 5);

The first example shows how to use the logical OR (||) operator to provide a fallback value if the value to the left is falsy (e.g. undefined).

index.js
const fromDb = undefined; const arr = fromDb || []; console.log(arr) // 👉️ []

If the value to the left is falsy, the logical OR (||) operator returns the value to the right.

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

index.js
const arr = undefined; const r1 = arr?.find(element => element === 5); console.log(r1); // 👉️ undefined

The optional chaining (?.) operator short-circuits returning undefined if the reference is equal to undefined or null.

Note that if the condition implemented by the callback function is not satisfied for any of the array elements, the find() method will return undefined. Instead, you can return an empty array, by using the logical OR (||) operator - arr.find(...) || [].

The next example uses a ternary operator, which is very similar to an if/else statement.

index.js
const arr = undefined; const result = arr ? arr.find(element => element === 5) : []; console.log(result); // 👉️ []

If the value to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise the value to the right of the colon is returned.

The next example uses the Array.isArray method to check if the value is an array before calling the find() method.

index.js
const arr = undefined; if (Array.isArray(arr)) { const result = arr.find(element => element === 5); } else { console.log('arr is not an array'); }

The last example uses the logical OR (||) operator to provide a fallback of an empty array right before calling the find() method.

index.js
const arr = undefined; const result = (arr || []).find(element => element === 5); console.log(result); // 👉️ undefined

Conclusion #

The "Cannot read property 'find' of undefined" error occurs when the find() is called on an undefined value.

To solve the error, make sure to only call the method on arrays.

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.