Disabling cannot read property of undefined

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