Solve - Cannot read Property of Undefined in JavaScript

avatar

Borislav Hadzhiev

Sat Oct 23 20213 min read

Solve - Cannot read Property of Undefined #

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

  1. Accessing a property on a variable storing 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.

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 property of undefined" error, use the optional chaining (?.) operator to check that 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 (&&), 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 in the array.
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 property 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 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 executed.

To solve the "Cannot read property 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 ran before the div element with class name box is declared.

If you try to access the div element in the index.js script, it will not be available, 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, 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 ran 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 property 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

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee