Solve - Cannot read property 'length' of Null in JS

avatar

Borislav Hadzhiev

Wed Oct 20 20212 min read

banner

Photo by Elen Laureano

Solve - Cannot read property 'length' of Null #

The "Cannot read property 'length' of null" error occurs when accessing the length property on a null value. To solve the error, make sure to only access the length property on data types that implement it - arrays and strings.

cannot read property length of null

Here's an example of how the error occurs.

index.js
const arr = null; // โ›”๏ธ Cannot read properties of null (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 = null; // โœ… Provide empty array fallback const arr = fromDb || []; // โœ… Using optional chaining const ex1 = arr?.length; console.log(ex1); // ๐Ÿ‘‰๏ธ undefined // โœ… Provide `0` as fallback if `undefined` const ex2 = arr?.length || 0; // โœ… Use Array.isArray if (Array.isArray(arr)) { const ex3 = arr.length; } else { console.log('arr is not an array'); } // โœ… Provide fallback in place const ex4 = (arr || []).length;
And here are the same examples when using the length property on strings.
index.js
// ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ // ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ with STRINGS ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ // ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ๐Ÿ‘‡๏ธ const fromDb = null; // โœ… Provide empty string fallback const str = fromDb || ''; // โœ… Using optional chaining const ex5 = str?.length; // โœ… Provide `0` as fallback if `undefined` const ex6 = str?.length || 0; // โœ… Use typeof if (typeof str === 'string') { const ex7 = str.length; } else { console.log('str is not a string'); } // โœ… Provide fallback in place const ex8 = (str || '').length;

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

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 null or undefined.

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 thelength property.

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

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

index.js
const str = null; 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 null" error occurs when accessing the length property on a null value.

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

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee