Typeerror: Cannot Read Property ‘length’ of Undefined

The .length property in JavaScript has many different use cases. It can be used to:

1. Indicate the number of parameters expected by a function with function.length.
2. Return the number of elements inside of an array with Array.prototype.length.
3. Find out the number of arguments passed into a function with arguments.length.
4. Determine the number of characters inside of a string.

The length property returns a number for essentially any object in JavaScript.

Typeerrors can be thrown when attempting to change a value that cannot be changed or when using a value in an inappropriate way. It can also occur when an argument is passed to a function that is incompatible with the type expected by the function or the operator inside of the function.

In this article, we will dig into the cause of receiving a typeerror while using .length, as well as some possible solutions.

Why the Typeerror: Cannot Read Property ‘length’ of Undefined Gets Triggered

A typeerror length of undefined can indicate that the actual type of an operand is different from the expected type. This error can be triggered with .length if the code is trying to access the property before it has been defined, so there needs to be a condition for when it returns undefined, and for when it does not return undefined. In most cases, unless dealing with an external API,  we can also just make sure to define it.

The code below will throw a typeerror length of undefined because we are not passing an argument into the function in our console.log. 

function readingErrorsAreImportant(a){
 if(a.length === 5){
   return "equals five"
 } else if(a.length > 5) {
   return "Greater than five"
 }  else {
   return "Less than five"
 }
}
console.log(readingErrorsAreImportant())

The Solution

The simplest fix to this error is to make sure we are defining what we want to compare length to, so we need to make certain we are passing in an argument when we invoke the function inside of our console.log.

Below we are passing in an array, but we can change this to just about any object .length can return a number for.

function readingErrorsAreImportant(a){
 if(a.length === 5){
   return "Equals five"
 } else if(a.length > 5) {
   return "Greater than five"
 }  else {
   return "Less than five"
 }
}
console.log(readingErrorsAreImportant([1, 2, 3, 4, 5]))

In a more advanced case where we are accessing an external API, we may want to indicate in our condition that if we get a length of undefined, then we can return something else to display to the user. However, we can also do this with a modified version of the example above.

function readingErrorsAreImportant(a){
 if(undefined !== a && a.length){
   return "if undefined does not equal a and the length of a, I will be returned."
 } else {
   return "else, or if it is equal to undefined, I will be returned. This is to prevent a typeerror."
 }
}
console.log(readingErrorsAreImportant())

Conclusion 

Typeerrors generate when an operation cannot be performed. When they are triggered with the .length property, it is important to make sure that the object it is trying to return a number for is of the correct type and that it is defined. When trying to get the length of an object developers know may sometimes be undefined, including this condition in an if statement can prevent the error from being thrown.