Typeerror: cannot read property ‘length’ of undefined – How to Fix Cannot read property ‘length’ of Undefined in JavaSript?

Typeerror: cannot read property ‘length’ of undefined: When accessing the length property on an undefined value, the error “Cannot read property ‘length’ of undefined” occurs. To avoid the error, only use the length property on data types that support it, such as arrays or strings.

Let us see an example to know how this error occurs.

index.js:

// Declare an array with  undefined and store it in a variable
const gvn_arr = undefined;

// Get the length of an array using the 'length' attribute
gvn_arr.length;

Output:

gvn_arr.length;
^

TypeError: Cannot read property 'length' of undefined
at Object.<anonymous> (/tmp/ER7rLDlJor.js:5:9)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

Explanation:

The properties of an undefined array cannot be read using the length attribute.
 So, TypeError: Cannot read property 'length' of undefined has occured

To resolve the error, either give a fallback for the value before accessing the length property or check to see if the value is of the correct type.

Fixing the “Cannot read property ‘length’ of undefined” Error

For Arrays

Here are some solutions to the problem while accessing the length property on arrays or strings.

Example1: Using Optional Chaining (index.js)

// Create a const variable with value as undefined 
const fromDb = undefined;

// Give an empty array fallback and store it in a variable
const gvn_arry = fromDb || [];

// Use optional chaining(.) i,e apply length attribute on the above array to get the length of an array and store it in another variable
const rslt = gvn_arry.length;
// Print the rslt i.e, length of the an empty array
console.log(rslt); 

Output:

0

Example2: Giving 0 as a fallback 

// Create a const variable with value as undefined 
const fromDb = undefined;

// Give an empty array fallback and store it in a variable
const gvn_arry = fromDb || [];

// Give 0 as fallback if the value is undefined
const rslt = gvn_arry.length || 0;
// Print the above result
console.log(rslt)

Output:

0

Example3: Using Array.isArray() Function

// Create a const variable with value as undefined 
const fromDb = undefined;

// Give an empty array fallback and store it in a variable
const gvn_arry = fromDb || [];

// Check if the above variable gvn_arry is an array using the Array.isArray() function and if conditional statement
if (Array.isArray(gvn_arry)) {
  // If it is an array then print the length of an array
  // using the length attribute
  const rslt = gvn_arry.length;
  console.log(rslt)
} else {
   // Else print "NOT an Array"
  console.log("The above given variable 'gvn_arry' is NOT an array");
}

Output:

0

Example4: Giving fallback in Place

// Create a const variable with value as undefined 
const fromDb = undefined;

// Give an empty array fallback and store it in a variable
const gvn_arry = fromDb || [];

// Apply fallback in place and add length attribute to the result
const rslt = (gvn_arry || []).length;
console.log(rslt)

Output:

0

FOR STRINGS

The following examples give the same solutions, but for strings.

Example1: Using Optional Chaining (index.js)

// Create a const variable with value as undefined 
const fromDb = undefined;

// Give an empty string fallback and store it in a variable
const gvn_str = fromDb || '';

// Use optional chaining(.) i,e apply length attribute on the above string to get the length of a string and store it in 
// another variable
const rslt = gvn_str.length;
// Print the result i.e, length of the an empty string
console.log(rslt);

Output:

0

Example2: Giving 0 as a fallback 

// Create a const variable with value as undefined 
const fromDb = undefined;

// Give an empty string fallback and store it in a variable
const gvn_str = fromDb || '';

// Give 0 as fallback if the value is undefined
const rslt = gvn_str.length || 0;
// Print the above result
console.log(rslt)

Output:

0

Example3: Using typeof

// Create a const variable with value as undefined 
const fromDb = undefined;

// Give an empty string fallback and store it in a variable
const gvn_str = fromDb || '';

// Check if the above variable gvn_str is a string using typeof and if conditional statement
if (typeof gvn_str === 'string') {
   // If it is a string then print the length of a string
  // using the length attribute
  const rslt = gvn_str.length;
  console.log(rslt)
} else {
     // Else print "NOT a String"
  console.log("The above given variable 'gvn_str' is NOT a string");
}

Output:

0

Example4: Giving fallback in Place

// Create a const variable with value as undefined 
const fromDb = undefined;

// Give an empty string fallback and store it in a variable
const gvn_str = fromDb || '';

// Apply fallback in place and add length attribute to the result
const rslt = (gvn_str || '').length;
console.log(rslt)

Output:

0