TypeError: Cannot read Property '0' of Null in JavaScript


Borislav Hadzhiev

Last updated: Oct 23, 2021


Photo from Unsplash

TypeError: Cannot read Property '0' of Null in JavaScript #

There are 2 main reasons the "Cannot read property '0' of null error occurs":

  • Accessing the 0th index on a variable storing a null value.
  • Accessing the 0th index on a non-existent DOM element, e.g. after calling getElementById.

cannot read property 0 of null

The error occurs if you try to access the index at position 0 of a variable that stores a null value.

const arr = null; // ⛔️ TypeError: Cannot read properties of null (reading '0') console.log(arr[0]);

To solve the error, initialize the variable setting it to the correct data type.

const fromDb = null; const arr = fromDb || []; console.log(arr[0]); // ✅ undefined // ✅ Check if correct type before accessing index if (Array.isArray(arr)) { console.log(arr[0]); } else { console.log('arr is not an array'); } // ✅ Alternatively, use Optional chaining (?.) console.log(arr?.[0]); // 👉️ undefined

We used the logical OR (||) operator to provide a fallback value incase the value to the left of the operator is falsy (e.g. null).

Then we used an if statement to check that the value stored in the arr variable is an array before accessing the index.

You would do the same if you were working with strings, e.g. if (typeof str === 'string') {}.

The last example uses the optional chaining (?.) operator, which short-circuits returning undefined instead of throwing an error.

If the value the arr variable stores is equal to null or undefined, the ?. operator returns undefined.

To solve the "Cannot read property '0' of null" error, make sure that the DOM element you're accessing the 0th index on is a Node List.

// ⛔️ getElementById returns the element or null // ⛔️ it doesn't return a Node List const boxes = document.getElementById('example'); // ❌ Cannot read properties of `null` (reading '0') console.log(boxes[0]);

In the example, we used the getElementById method, which returns the DOM element or null. The method does not a Node List, on which we can access the 0th element.

To get a Node List, you should use the getElementsByClassName or getElementsByTagName methods instead.

Instead, set the class name on the DOM elements you need to access.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box">Hello</div> <script src="index.js"></script> </body> </html>

Now you can access the first element of the Node List.

const boxes = document.getElementsByClassName('box'); console.log(boxes); console.log(boxes[0]); // 👉️ the div element

Conclusion #

The "Cannot read property '0' of null" error occurs when trying to access the 0th index on a variable that stores a null value.

Before you access the index, make sure that the value allows for index access, e.g. is of type array or string.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.