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

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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

The "Cannot read property 'length' of undefined" error occurs when accessing the length property on an undefined value. To solve the error, make sure to only access the length property on data types that support it - arrays or strings.

cannot read property length of undefined

Here is an example of how the error occurs.

index.js
const arr = undefined; // ⛔️ TypeError: Cannot read properties of undefined (reading 'length') arr.length;
To solve the error, provide a fallback for the value before accessing the length property, or check if the value is of the correct type.

Here are some examples of how to solve the error when accessing the length property on arrays or strings.

index.js
// 👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️ // 👇️👇️👇️ with ARRAYS 👇️👇️👇️ // 👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️ const fromDb = undefined; // ✅ Provide empty array fallback const arr = fromDb || []; // ✅ Using optional chaining const result1 = arr?.length; console.log(result1); // 👉️ undefined // ✅ Provide `0` as fallback if `undefined` const result2 = arr?.length || 0; // ✅ Use Array.isArray if (Array.isArray(arr)) { const result3 = arr.length; } else { console.log('arr is NOT an array'); } // ✅ Provide fallback in place const result4 = (arr || []).length;

The next code snippet shows the same solutions, but for strings.

index.js
// 👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️ // 👇️👇️👇️ with STRINGS 👇️👇️ // 👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️👇️ const fromDb = undefined; // ✅ Provide empty string fallback const str = fromDb || ''; // ✅ Using optional chaining const result5 = str?.length; // ✅ Provide `0` as fallback if `undefined` const result6 = str?.length || 0; // ✅ Use typeof if (typeof str === 'string') { const result7 = str.length; } else { console.log('str is NOT a string'); } // ✅ Provide fallback in place const result8 = (str || '').length;

We used the logical OR (||) operator to provide a fallback if the value to the left is falsy (e.g. undefined).

index.js
const fromDb = undefined; const arr = fromDb || []; const str = fromDb || '';
If the value to the left is falsy, the logical OR (||) operator returns the value to the right.

The next example shows how to use the optional chaining (?.) operator to short-circuit if the reference is equal to undefined or null.

index.js
const fromDb = undefined; const result1 = arr?.length; const result5 = str?.length;
You can also use the Array.isArray method to check if the value is an array or the typeof operator to check if the value is a string before accessing the length property.
index.js
const fromDb = undefined; if (Array.isArray(arr)) { const result3 = arr.length; } else { console.log('arr is NOT an array'); } if (typeof str === 'string') { const result7 = str.length; } else { console.log('str is NOT a string'); }

The last example shows how to provide a fallback value in place, right before accessing the length property.

index.js
const fromDb = undefined; const result4 = (arr || []).length; const result8 = (str || '').length;

You can also use the ternary operator, which is very similar to an if/else statement.

index.js
const str = undefined; const result = str ? str.length : 0; console.log(result); // 👉️ 0

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

Conclusion #

The "Cannot read property 'length' of undefined" error occurs when accessing the length property on an undefined value.

To solve the error, only access the length property on data types that support it - arrays or strings.

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.