. Advertisement .
..3..
. Advertisement .
..4..
The tutorial below will demonstrate ways to deal with the cannot read properties of undefined error. Scroll down to learn further details!
Why Does The “Cannot Read Properties Of Undefined” Error Happen?
Once an argument or operand provided to a function is non-compatible with the type required by that function or operator, a JavaScript TypeError is then raised.
As a result, when you execute a method or view a property on an undefined object in Chrome, you shall retrieve this error no matter what.
Based on the property you’re attempting to enter, there are a few different variants of such an issue.
It will sometimes appear as null rather than undefined.
Example:
function myFunc(a) {
console.log(a.b);
}
var myVar;
myFunc(myVar);
The variable myVar is undefined since it is declared instead of initialized. The property b is tried to be accessed when it is provided to the myFunc function. Running the code results in the following error since an is undefined at that point:
TypeError: Cannot read properties of undefined (reading 'b')
The problem also shows up when you access a property located on a non-exist DOM element. If neither of those above is correct, then check whether or not you’ve placed the JS script tag above the HTML tag that declares the DOM components.
How To Solve The “Cannot Read Properties Of Undefined” Error?
Step 1: Find The “Undefined” Object.
Evaluate the Statement that the browser is giving an error (click the link on the right side of the Error Log on the Javascript Console) to see what “undefined” object the browser is trying to access.
Let’s look at the illustration as follow:
function myFunc(a) {
console.log(a.b);
}
var myVar = {
b: 'myProperty'
};
myFunc(myVar);
Otherwise, you may add an if check to prevent undefined variables from being accessed by accident.
For example:
function myFunc(a) {
if (a !== undefined) {
console.log(a.b);
}
}
var myVar;
myFunc(myVar);
Step 2: Handle The Error
Because this is an extremely common error in Javascript which appears in several situations from simple to complex. Therefore, step-by-step instructions will not be of much use. That is why I will give these suggestions so that you can determine your own debugging direction.
- Method #1: Assign data to an “undefined” object.
In simple situations, the most common reason comes from the coder forgetting to assign data to the variable or constant before using it. Therefore, you just need to add a statement to assign data to that variable or constant.
- Method #2: Remove or replace the statement accessing the “undefined” object.
If accessing that undefined object is not necessary in your Javascript, you can remove or replace it with a more appropriate statement.
- Method #3: Check the javascript libraries (jQuery, Bootstrap, OwlCarousel, fancyBox…).
If the statement approaching the undefined object is located in a js file containing a code library such as jQuery local storage, OwlCarousel, Bootstrap, fancyBox…, check if their url, syntax and order of embedding the HTML page still works fine.
Conclusion
Above is all that you may need to grasp about how to manage the “Cannot read properties of undefined” error. Hopefully, this article can be of great benefit to you somehow. Best of luck to your programming then!
Leave a comment