Solve - Cannot read Properties of Undefined in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Solve - Cannot read Properties of Undefined #

There are 3 main reasons the "Cannot read properties of undefined" error occurs:

  1. Accessing a property on a variable that stores an undefined value.
  2. Accessing a property on DOM element that doesn't exist.
  3. Inserting the JS script tag above the HTML where the DOM elements are declared.

cannot read property of undefined

Most commonly, the error occurs if you try to access a property on a variable that has a value of undefined.

index.js
const person = undefined; // ⛔️ Cannot read properties of undefined (reading 'name') person.name;

To solve the "Cannot read properties of undefined" error, use the optional chaining operator to check if the variable is not nullish before accessing it, e.g. person?.name. If the variable is undefined or null, the operator short-circuits instead of throwing an error.

index.js
const person = undefined; // ✅ Using optional chaining console.log(person?.name); // 👉️ undefined console.log(person?.name?.first); // 👉️ undefined // ✅ Using if / else if (person?.name) { console.log(person.name); } else { // 👇️ this runs console.log('person.name not found'); } // ✅ Using logical AND (&&) operator console.log(person && person.name); // 👉️ undefined

The optional chaining (?.) operator allows us to access a property on an object without throwing an error if the reference is invalid.

Instead of throwing an error, the optional chaining (?.) operator short-circuits returning undefined if the reference is equal to undefined or null.

The last example uses the logical AND (&&) operator, which doesn't evaluate the value to the right if the value to the left is falsy (e.g. undefined).

You often get undefined values when trying to access an array element at an index that doesn't exist.
index.js
const arr = []; // ⛔️ Cannot read properties of undefined (reading 'name') console.log(arr[0].name); // ❌ Bad console.log(arr[0]?.name); // ✅ Good console.log(arr[0] && arr[0].name); // ✅ Good
Make sure the variable you are accessing has been declared in your code before you try to access it, otherwise you will get the "X is not defined" error.

Another common reason for getting the error is accessing a property on DOM element that doesn't exist.

To solve the "Cannot read properties of undefined" error, make sure that the DOM element you are accessing exists. The error is often thrown when trying to access a property at a non-existent index after using the getElementsByClassName() method.

index.js
const boxes = document.getElementsByClassName('does-not-exist'); console.log(boxes); // [] // ⛔️ Cannot read properties of undefined (reading 'innerHTML') console.log(boxes[0].innerHTML);

Instead, correct the class name and use the optional chaining (?.) operator to check if the element at index 0 contains the property.

index.js
const boxes = document.getElementsByClassName('does-not-exist'); console.log(boxes); // [] // ✅ check for existence of property if (boxes[0]?.innerHTML) { console.log(boxes[0].innerHTML); } else { // 👇️ this runs console.log('element does not exist'); }

If the element at index 0 contains the innerHTML property, our if block will run, otherwise the else block is run.

To solve the "Cannot read properties of undefined" error, make sure to insert the JS script tag at the bottom of the body. The JS script tag should be placed after the HTML elements have been declared.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <script src="index.js"></script> <!-- ❌ BAD - SHOULD BE ABOVE SCRIPT TAG ❌ --> <div class="box">Hello</div> </body> </html>

The index.js script tag is run before the div element with class name of box is declared.

If you try to access the div element in the index.js script, it will not be available, thus causing the error.

index.js
const boxes = document.getElementsByClassName('box'); console.log(boxes); // 👉️ [] // ⛔️ Cannot read properties of undefined (reading 'innerHTML') console.log(boxes[0].innerHTML);

You have to place the JS script at the bottom of the body tag, after the HTML elements have been declared.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box">Hello</div> <!-- ✅ Good - Script is run after HTML is declared ✅ --> <script src="index.js"></script> </body> </html>

Now the div element with class name box is accessible inside of the index.js script.

index.js
const boxes = document.getElementsByClassName('box'); console.log(boxes); console.log(boxes[0].innerHTML); // 👉️ "Hello"

Conclusion #

The "Cannot read properties of undefined" error occurs when trying to access a property on an undefined value.

You often get undefined values when:

  • accessing a property that does not exist on an object
  • accessing an index that is not present in an array
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.