Borislav Hadzhiev
Last updated: Jul 25, 2022
Check out my new book
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.
Here's an example of how the error occurs.
const arr = null; // ⛔️ Cannot read properties of null (reading 'length') arr.length;
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.
// 👇️👇️👇️ with ARRAYS const fromDb = null; // ✅ Provide empty array as fallback const arr = fromDb || []; // ✅ Using optional chaining const ex1 = arr?.length; // ✅ 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;
length
property on strings.// 👇️👇️👇️ with STRINGS const fromDb = null; // ✅ Provide empty string as 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
).
const fromDb = null; const arr = fromDb || []; console.log(arr); // 👉️ [] const str = fromDb || ''; console.log(str); // 👉️ ""
The next example shows how to use the
optional chaining (?.)
operator to short-circuit if the reference is equal to null
or undefined
.
const arr = null; const ex1 = arr?.length; console.log(ex1); // 👉️ undefined const ex2 = arr?.length || 0; console.log(ex2); // 👉️ 0
The optional chaining (?.) operator short-circuits instead of throwing an error
if the reference is nullish (null
or undefined
).
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.const fromDb = null; const arr = fromDb || []; if (Array.isArray(arr)) { const ex3 = arr.length; } else { console.log('arr is not an array'); } // ---------------------------- const str = fromDb || ''; if (typeof str === 'string') { const ex7 = 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.
const arr = null; const ex4 = (arr || []).length; console.log(ex4); // 👉️ 0
You can also use the ternary operator, which is very similar to an if/else
statement.
const str = null; const result = str ? str.length : 0; console.log(result); // 👉️ 0
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 "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.