Unforgiving Errors in JavaScript
In the previous example, we explored one type of unforgiving error in JavaScript: a TypeError that causes script execution to end. There are many other types of errors that JS++ prevents, but, for now, we’ll only look at one other category of errors: ReferenceErrors. What’s wrong with the next bit of JavaScript code?
var message = "This is a test."; console.log(message);
Try executing the above code in your console. Once again, nothing gets logged. Instead, you get a ReferenceError. This is because there’s a typo in the above code. If we fix the typo, the code succeeds:
var message = "This is a test."; console.log(message);
JavaScript can fail on typos! TypeErrors and ReferenceErrors don’t happen in JS++. We classify TypeErrors and ReferenceErrors as “unforgiving” errors because they can cause JavaScript script execution to halt. However, there’s another type of error in JavaScript that’s a little more dangerous because they’re “silent.”
JS++ | Types in JavaScript
In this chapter, we’re going to explore JavaScript programming styles and how developers worked with types in JavaScript (rather than JS++). This chapter will help you understand the next chapters which explain the JS++ type system in detail.
In this tutorial, we will be using the Google Chrome web browser. Click here to download Google Chrome if you don’t already have it.
In order to execute JavaScript code, we’ll be using the Chrome Developer Tools console. Open Chrome and hit the Ctrl + Shift + J key combination and choose the “Console” tab.
Copy and paste the following code into your console and press enter to execute it:
var message; message = "This is a test."; if (Math.random() > 0.5) { message = 123; } console.log(message);
Hit your “up arrow” and hit “enter” to evaluate the code more than once. Try evaluating the code a few times.
Notice how the data type in the above code changes from a string to a number. However, it only changes to a number if a randomly-generated number is greater than 0.5. Therefore, the data type of the variable ‘message’ can be different each time the script is executed. This was a major problem in JavaScript. For example, the following JavaScript code is unsafe:
function lowercaseCompare(a, b) { return a.toLowerCase() == b.toLowerCase(); }
The reason is because toLowerCase() is a method that’s only available to JavaScript strings. Let’s execute the following JavaScript code in the Chrome console:
function lowercaseCompare(a, b) { return a.toLowerCase() == b.toLowerCase(); } console.log("First message."); lowercaseCompare("10", 10); // Crashes with 'TypeError' console.log("Second message."); // Never executes.
Notice how the script will crash with a TypeError. The second message never gets logged. The key takeaway is that the code crashed because toLowerCase() is not a method available for numbers, but the function was called with a string (“10”) and a number (10). The number argument was not a valid argument for the ‘lowercaseCompare’ function. If you change the function call, you will observe that the program no longer crashes:
// Change this: // lowercaseCompare("10", 10); // Crashes with 'TypeError' // to: lowercaseCompare("10", "10");
Developers worked around these problems in JavaScript by checking the types first. This is the safer way to rewrite the above ‘lowercaseCompare’ function in JavaScript:
function lowercaseCompare(a, b) { if (typeof a != "string" || typeof b != "string") { return false; } return a.toLowerCase() == b.toLowerCase(); }
We check the types using ‘typeof’, and, if we receive invalid argument types, we return a default value. However, for larger programs, this can result in a lot of extra code and there may not always be an applicable default value.