๐ŸŽ„ Get 20% off from our JavaScript course for the holidays! ๐ŸŽ„

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

Ferenc Almasi โ€ข Last updated 2023 March 17 โ€ข Read time 3 min read
  • twitter
  • facebook

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:

Copied to clipboard! Playground
// 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) { ... }

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.

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.

Copied to clipboard! Playground
// โœ”๏ธ 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

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.

Copied to clipboard! Playground
// Using logical OR
const updates = null || []

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

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:

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

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:

Copied to clipboard! Playground
// 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
Did you find this page helpful?
๐Ÿ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access exclusive interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Remove ads to learn without distractions
Become a Pro