Errors are a core part of learning and using any programming language. Error messages tend to help you understand what has gone wrong somewhere in your code.

While some error messages are straightforward and easy to understand, some might be a bit confusing when you see them.

In this tutorial, we’ll talk about one of the most common JavaScript errors — the “uncaught typeerror: cannot read property” error.

At the end of this tutorial, you should understand what the “uncaught typeerror: cannot read property” means, the common causes, and how to fix them.

What Does “uncaught typeerror: cannot read property” Mean in JavaScript?

The “uncaught typeerror: cannot read property” error mainly occurs when you try to use or access an undefined variable. This error can be raised when you’re using vanilla JavaScript or any Javascript framework.

You can easily detect errors while coding by using various developer tools like the Chrome dev tools, and the Kinsta one-click staging tool to intercept errors, test your code, and more.

How To Fix the “uncaught typeerror: cannot read property” Error in JavaScript

In the sections that follow, we’ll highlight some of the causes of the “uncaught typeerror: cannot read property” error and how to fix them using code examples.

Accessing an Object Property With a Value of Undefined

In this section, we’ll discuss one of the possible causes of the “uncaught typeerror: cannot read property” error in JavaScript. This has to do with accessing an object property that is yet to be undefined.

Here’s an example:

let person;

In the code above, we created a variable called person. The intention is to make this variable an object with properties like name, age, hobby.

Assuming you forget to create these properties, you’ll get an error when you try to access them. That is:

let person;
console.log(person.name);
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')

As can be seen above, we tried accessing the name property which doesn’t exist so we got an error saying: Uncaught TypeError: Cannot read properties of undefined (reading ‘name’).

This can happen to anyone as you may forget to create/add properties to your object.

Let’s go on and add some properties to the object to fix the error:

let person = {
  name: "John",
  age: 200,
  hobby: "coding"
}
console.log(person.name);
// John

In the code above, we’ve added the name property so when you try to access it, you’ll get the value of “John” returned.

Accessing an Element That Doesn’t Exist in an Array

Just like we saw in the last section with objects, you’d also get the “uncaught typeerror: cannot read property” error raised if you try to access an element in an array that is yet to be initialized.

Here’s an example:

let arr;
console.log(arr[0]);
// Uncaught TypeError: Cannot read properties of undefined (reading '0')

In the example above, we tried accessing the first element of an array called arr.

The array has been declared but not initialized — this means that no element has been assigned to it yet.

To fix this, we’ll add elements to the array before accessing them. That is:

let arr = [2,4,6,8]
console.log(arr[0]);
// 2

Accessing a DOM Element That Doesn’t Exist

When working with the Document Object Model (DOM) in JavaScript, you might encounter the “uncaught typeerror: cannot read property”.

This can happen for different reasons like spelling errors while referencing the DOM element, accessing an element that doesn’t exist, or accessing an element before the DOM has been loaded (we’ll talk about this in the next section).

In this section, you’ll see an example that throws the “uncaught typeerror: cannot read property” error for accessing an inexistent DOM element.

Here’s the HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

In the code above, we created a basic HTML document with a h1 element with an ID of “content”.

Here’s the JavaScript code:

let content = document.getElementById("constent");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

The code above raises the “uncaught typeerror: cannot read property” error even though it looks like we did everything right.

It’s pretty easy to miss what’s raising this error. It is raised because we spelt “constent” instead of “content” while referencing the ID of the h1 element.

That is, document.getElementById("constent"); instead of document.getElementById("content");.

The same error will be raised if you try to reference an ID or class name that is yet to be created in the DOM.

To fix this, you can simply check for spelling errors or make sure the element being referenced actually exists in the DOM.

Placing the Script Element Above Other DOM Elements Within the Body Tag

The position of your script element determines how your JavaScript code is executed in the browser.

If you place the script element above every other element in the body of your HTML document, the JavaScript code will run before the DOM has been loaded.

This means that JavaScript will not have any reference to the DOM elements because it didn’t wait for them to be loaded before executing.

Here’s an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <script src="app.js"></script>
    <h1 id="content">Hello World!</h1>
  </body>
</html>

In the code above, we placed the script element above the h1 element.

Here’s the JavaScript code where we try to make reference to the h1 element by using its ID:

let content = document.getElementById("content");
console.log(content.textContent);
// Uncaught TypeError: Cannot read properties of null (reading 'textContent');

As expected, the “uncaught typeerror: cannot read property” error was thrown at us because JavaScript code before the h1 element could be registered to the DOM.

To fix this problem, always put your script element before the closing body tag; that is, below every other DOM element in the body of the document. This way, the script will start running after every element in the DOM has been loaded.

<!DOCTYPE html>
<html>
  <head>
    <title>Error Tutorial</title>
  </head>
  <body>
    <h1 id="content">Hello World!</h1>
    <script src="app.js"></script>
  </body>
</html>

Summary

Errors are an unavoidable part of being a developer. While they might make you frustrated while coding, they can also help learn more and master whatever programming language you’re using.

When faced with an error, you should always try to understand the error message because it will help you know where to start and what to fix. You’ll also be able to fix other errors with similar error messages.

If you’re going to build a website, there are a variety of skills to learn and a lot of practice required to use these skills efficiently. DevKinsta makes the process easier from design, development, and deployment all in your local machine. DevKinsta is used by over 25,000 developers, web designers, and freelancers. Check it out for free today.