Cannot Read Property ‘ToString’ Of Undefined In JavaScript – How To Solve It?

Continuing with the series of tutorial articles about the Javascript programming language, today I will help you to fix the “Cannot read property ‘toString’ of Undefined” in JavaScript error. Please do it right step by step to solve it.

What does the “Cannot read property ‘toString’ of Undefined” in JavaScript error mean?

“Cannot read property ‘toString’ of Undefined” in JavaScript occurs when you try to use the toString() method with the undefined value. Refer to the following simple example to understand better:

var learn = undefined
result = learn.toString()
console.log(result)

Output

main.js:191 Uncaught TypeError: Cannot read properties of undefined (reading 'toString')
    at main.js:191:16

This is an extremely simple error to solve. It has many different methods to do it. See details in the next section.

Solutions to fix this error

Use the if-else statement

The if-else statement is a primary branching operator available in any programming language. Try to apply this structure to fix this error. Refer to the following example, and I will explain it well.

var learn = undefined;
var result;
var message;

// Check the value of learn variable
if(learn === undefined) {
    message = "It is not valid to use the toString() method!!"
}

else {
    result = learn.toString();
    message = "Successful conversion!!"
}

console.log(message);

Here I use the if else statement to check the value of the variable learn. If it is undefined, I will not use the toString() method. And finally, I show a message to check the result.

Output

It is not valid to use the toString() method!!

If the value of the variable learn is different from undefined, it will look like this:

var learn = 270999;
var result;
var message;

// Check the value of learn variable
if(learn === undefined) {
    message = "it is not valid to use the toString() method!!"
}

else {
    result = learn.toString();
    message = "successful conversions!!"
}

// Show the result
console.log("The type of learn variable is: " + typeof(result));
console.log(message);

This time I did not leave the value undefined for the variable learn—instead, I used an int value. Then I used the typeof() method to check the variable’s data type.

Output

The type of learn variable is: string
successful conversions!!

The variable learn has been converted to a string, proving that the if-else statement worked correctly.

Use the ternary operator

The ternary operator in this case will make your code more visible.

I will write another example to fix the above error as follows:

var learn = 270999;
var result;
var message;

// Use the ternary operator to check
learn == undefined? message = "It is not valid to use toString() method!!":  message = "successful conversions!!", result = toString(learn);

console.log(message);
console.log("The type of learn variable is: " + typeof(result));

Output

successful conversions!!
The type of learn variable is: string

It looks simpler than the if-else statement, but in some complicated cases, we should use the if-else statement.

Summary

The article helped you fix the “Cannot read property ‘toString’ of Undefined” in JavaScript error in two ways. In more complex cases, I recommend you use the if-else statement. For short cases, use the ternary operator, it will look neater, and performance can also be higher. Feel thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *