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.
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.
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.
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); // JohnIn the code above, we’ve added the name property so when you try to access it, you’ll get the value of “John” returned. 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]); // 2When 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:
Error Tutorial Hello World!
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.
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:
Error Tutorial Hello World!
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.
Error Tutorial Hello World!
Get started with a free trial of our Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.
