JavaScript Intuition
JS++ was designed based on extensive JavaScript development experience – not just for large, complex applications but anywhere JavaScript could be used – scripts and macros for Windows Script Host to legacy programs based on ActiveX and the like which are still prevalent in some corporate environments. In short, JS++ will work anywhere that JavaScript is expected – from the basic to the complex to the arcane.
One important observation relevant to JS++ is that most JavaScript programs are already well-typed (but not “perfectly” typed). Recall the “unsafe” and “safe” versions of the JavaScript ‘lowercaseCompare’ function:
// Unsafe: function lowercaseCompare(a, b) { return a.toLowerCase() == b.toLowerCase(); } // Safe: function lowercaseCompare(a, b) { if (typeof a != "string" || typeof b != "string") { return false; } return a.toLowerCase() == b.toLowerCase(); }
The safe version is much more tedious, and – in practice – most JavaScript developers will write most of their functions the unsafe way. The reason is because, by looking at the function body, we know the expected parameter types are strings because both parameters use the ‘toLowerCase’ method only available to strings. In other words, in JavaScript, we have an intuition about the types just by looking at the code.
Consider the following variables and guess their types:
var employeeAge; var employeeName; var isEmployed;
employeeAge makes sense as a number, employeeName makes sense as a string, and isEmployed makes sense as a Boolean.
Now try guessing the expected parameter types for the following functions:
function multiply(a, b) { return a * b; } function log(message) { console.log("MESSAGE: " + message); }
The function ‘multiply’ makes most sense if you supply numeric arguments to the ‘a’ and ‘b’ parameters. Furthermore, the ‘log’ function is most correct with strings.
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.