Disabling cannot read property of undefined
Last Updated :
02 Aug, 2022
In this article, we will try to understand the ways in which we may receive errors using the read property of undefined, and later with the help of certain examples, we will try to resolve or disable it using several techniques provided in JavaScript.
Let us first try to analyze how we get to experience this error with the help of an example shown below:
Example 1: In this example, we will create a function that will accept a parameter, let's say first_property, and inside with we will access the second_property through that passed in a parameter called first_property. Later with the help of a try/catch block, we will first define an empty variable and will pass it into function as a parameter, and all we will do this in a try block and later will catch the error in the catch block itself. Then we will see in the output the error which we are looking forward to.
JavaScript
<script>
let randon_function = (first_property) => {
console.log(first_property.second_property);
};
try {
let object;
randon_function(object);
} catch (error) {
console.log(error.message);
}
</script>
Output:
Cannot read properties of undefined (reading 'second_property')
Now as we have witnessed an error, so it's high we have to disable or resolve it, and that we will see in the next example itself.
Example 2: This example is the continuation example of the previous example as here we will see and visualize the solution of the previously received example's output. In the previous example, we have defined an empty variable (with the name "object"), now we will instantiate an object under it that will contain the second_property value in it. Then we will pass that into function in order to receive an output which will be the value we have passed inside second_property.
JavaScript
<script>
let randon_function = (first_property) => {
console.log(first_property.second_property);
};
try {
let object = {
second_property: "GeeksforGeeks",
};
randon_function(object);
} catch (error) {
console.log(error.message);
}
</script>
Output:
GeeksforGeeks
Example 3: In this example, we will try to analyze another perspective with which this same error we may be able to get. Here also we will define another function that shows the value in its output. Here we will apply a condition (using if-statement) that if the value is undefined then we will access that value with some random property name (here we have taken it as "xyz"). Then again we will create a try/catch block and inside that try block, we will create an empty variable and pass it inside the function as a parameter at the time of calling. Later in the catch statement, we will catch that error message and display it in the console as output and In the output, we will witness the same error which we have witnessed in the first example itself.
JavaScript
<script>
let displayValue = (value) => {
if (value === undefined) {
console.log(value.xyz);
}
return value;
};
try {
let test_value;
console.log(displayValue(test_value));
} catch (error) {
console.log(error.message);
}
</script>
Output:
Cannot read properties of undefined (reading 'xyz')
Now the same error with the different types we have witnessed in the output, now in the shown next example we will try to disable or resolve the error.
Example 4: In this example, we will write the same code as we have written in the previous example, with a slight change that we will initialize that empty variable with some value, and that numeric value will be displayed as an output in the console irrespective of the output.
JavaScript
<script>
let displayValue = (value) => {
if (value === undefined) {
console.log(value.xyz);
}
return value;
};
try {
let test_value = 1234567890;
console.log(displayValue(test_value));
} catch (error) {
console.log(error.message);
}
</script>
Output:
1234567890
Similar Reads
React.js | TypeError: Cannot read property 'productID' of undefined React is a declarative, efficient, and flexible JavaScript library for building user interfaces. However, like any other technology, React has its own issues. One of the issues is the "TypeError: Cannot read property 'productID' of undefined" error that can occur when working with React components.
3 min read
How to Fix JavaScript TypeError: Cannot Set Properties of Undefined? JavaScript is a versatile and widely used programming language but like any language, it can sometimes produce errors that can be tricky to debug. One common error that developers is the TypeError: Cannot set properties of the undefined. This error typically occurs when we attempt to assign a value
4 min read
JavaScript undefined Property The undefined property is used to check if a value is assigned to a variable or not. Syntax: var x; if (typeof x === "undefined") { txt = "x is undefined"; } else { txt = "x is defined"; } Return Value: It returns 'defined' if the variable is assigned any value and 'undefined' if the variable is not
1 min read
Throwing an Error "cannot read property style of null" in JavaScript In this article, we will see how we may receive an error "cannot read property style of null" in JavaScript, along with understanding the cause to get this error with the help of an example, and thereafter we will try to understand how we may correct it with certain small changes in the code snippet
3 min read
How to Detect an Undefined Object Property in JavaScript ? Detecting an undefined object property is the process of determining whether an object contains a certain property, and if it does, whether the value of that property is undefined. This is an important concept in JavaScript programming, as it helps to prevent errors that can occur when attempting to
3 min read
How to Fix "Cannot read property 'click' of null" in JavaScript? When working with JavaScript, you may encounter the error message "Cannot read property 'click' of null." This error typically occurs when you try to access a property or call a method on an object that is null or undefined. This error is common when dealing with the DOM elements and event handlers
3 min read