Fix "cannot read properties of null (reading length)" in JS

Ferenc Almasi โ€ข ๐Ÿ”„ 2023 March 17 โ€ข ๐Ÿ“– 3 min read

The "Uncaught TypeError: Cannot read properties of null (reading 'length')" error occurs in JavaScript, whenever you try to use theย lengthย property of an array (or string) on a variable that isย null.

This usually happens when you receive your data from a database, and you don't check whether the data exists in the first place. Take a look at the following example:

// Trying to fetch updates from a database that returns null
const updates = null

// โŒ This will throw: Uncaught TypeError: Cannot read properties of null (reading 'length')
if (!updates.length) {
    console.log('You are up to date! ๐ŸŽ‰')
}

// The above translates to:
if (!null.length) { ... }
Copied to clipboard!

We expect the updates variable to be an array, but a null is returned and so we get the above-mentioned error. This is because null doesn't have a length property. Try to runย null.length in your console and you will get the same error.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

How to Fix the Error?

In order to fix the error, we need to make sure that the array is notย null. In order to do this, the simplest way is to useย optional chaining.

// โœ”๏ธ Even if updates is null, this will work
if (!updates?.length) {
    console.log('You are up to date! ๐ŸŽ‰')
}

// The above translates to:
if (!null?.length) { ... }
The preferred way to avoid the error
Copied to clipboard!

You can use optional chaining by introducing a question mark after the variable. This ensures that the property will only be read if the variable indeed has a value.

We can also use a logical OR, or use the built-inย Array.isArrayย method to check prior to using the length property to prevent running into issues.

// Using logical OR
const updates = null || []

// Using Array.isArray
if (Array.isArray(updates) && !updates.length) { ... }
Using logical OR and Array.isArray
Copied to clipboard!

In the first example, we fallback to an empty array, if the value retrieved, is null. This ensures that we will always be working with an array.

The second example uses Array.isArray to first check if we are working with an array. If this part evaluates to false, we won't check the length property, therefore no error will be thrown. We can also use logical OR in place where we want to work with the length property:

if (!(updates || []).length) { ... }
Using logical OR in place using parentheses
Copied to clipboard!

Working With Strings

Strings also have a length property. The same rules apply to them. Prefer using optional chaining, or a logical OR to fallback to default values. The only difference here, is you want to provide an empty string as a fallback value:

// Using optional chaining
const string = null

if (!string?.length) { ... }

// Using logical OR
const string = null || ''

// Using the typeof operator to
if (typeof string === 'string') {
    const length = string.length
}

How to avoid the error when working with strings
Copied to clipboard!
Did you find this page helpful?
๐Ÿ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended