4 Quick Fixes for the "Cannot Read Property 'length' of Undefined" Error in JavaScript

Last updated on August 21, 2022

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

Try Coding Beauty AI Assistant for VS Code