Are you experiencing the “cannot read property ‘length’ of undefined” error in JavaScript? This error occurs when you attempt to access the length property from a variable that has a value of undefined.
const arr = undefined;
// TypeError: Cannot read properties of undefined (reading 'length')
const length = arr.length;
console.log(length);
To fix the “cannot read property ‘length’ of undefined” error, perform an undefined check on the variable before accessing the length property from it. There are various ways to do this.
1. Use an if Statement
We can use an if statement to check if the variable is truthy before accessing the length property:
const arr = undefined;
let arrLength = undefined;
// Check if "arr" is truthy
if (arr) {
arrLength = arr.length;
}
console.log(arrLength); // undefined
const str = undefined;
let strLength = undefined;
// Check if "str" is truthy
if (str) {
strLength = str.length;
}
console.log(strLength); // undefined
2. Use Optional Chaining
We can use the optional chaining operator (?.) to return undefined and prevent the method call if the variable is nullish (null or undefined):
const arr = undefined;
// Use optional chaining on "arr" variable
const arrLength = arr?.length;
console.log(arrLength); // undefined
const str = undefined;
// Use optional chaining on "str" variable
const strLength = str?.length;
console.log(strLength); // undefined
3. Access the length Property of a Fallback Value
We can use the nullish coalescing operator (??) to provide a fallback value to access the length property from.
const arr = undefined;
// Providing an empty array fallback
const arrLength = (arr ?? []).length;
console.log(arrLength); // 0
const str = undefined;
// Providing an empty string fallback
const strLength = (str ?? '').length;
console.log(strLength); // 0
The nullish coalescing operator (??) returns the value to its left if it is not null or undefined. If it is, then ?? returns the value to its right.
console.log(2 ?? 5); // 2
console.log(undefined ?? 5); // 5
We can also use the logical OR (||) operator to provide a fallback value from which to access the length property.
const arr = undefined;
// Providing an empty array fallback
const arrLength = (arr || []).length;
console.log(arrLength); // 0
const str = undefined;
// Providing an empty string fallback
const strLength = (str || '').length;
console.log(strLength); // 0
Like the ?? operator, || returns the value to its left if it is not null or undefined. If it is, then || returns the value to its right.
4. Use a Fallback Value Instead of Accessing the length Property
We can also combine the optional chaining operator (?.) and the nullish coalescing operator (??) to provide a fallback value to use as the result, instead of accessing the length property from the undefined value.
const arr = undefined;
// Using "0" as a fallback value
const arrLength = arr?.length ?? 0;
console.log(arrLength); // 0
const str = undefined;
// Using "0" as a fallback value
const strLength = str?.length ?? 0;
console.log(strLength); // 0
As we saw earlier, the logical OR operator (||) can replace the ?? operator in cases like this:
const arr = undefined;
// Using "0" as a fallback value
const arrLength = arr?.length || 0;
console.log(arrLength); // 0
const str = undefined;
// Using "0" as a fallback value
const strLength = str?.length || 0;
console.log(strLength); // 0
11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.
