‘lowercaseCompare’ in JS++

Now that was a lot to digest! Writing good code in JavaScript is hard. Imagine having to take into account all these considerations when writing a small bit of code in JavaScript: safety, performance, code readability, unforgiving errors, silent errors, correctness, and more. This actually only scratches the surface of JavaScript corner cases, but it provides us enough information to begin understanding types in JS++.

However, if we write our code in JS++, JS++ actually handles all these considerations for us. This means you can write code that is readable, but the JS++ compiler will handle generating code that is fast, safe, and correct.

Before we move on to the next chapter – which explains the JS++ type system in detail – let’s try to rewrite the ‘lowercaseCompare’ code in JS++. We’ll start with code that is intentionally incorrect to show you how JS++ catches such errors early and show you how to fix them. Create a ‘test.jspp’ file and type in the following code:

import System;

function lowercaseCompare(string a, string b) {
    return a.toLowerCase() == b.toLowerCase();
}

Console.log("First message.");
lowercaseCompare("10", 10);
Console.log("Second message.");

Try compiling the file. It won’t work. JS++ found the error early:

[  ERROR  ] JSPPE5024: No overload for `lowercaseCompare' 
matching signature `lowercaseCompare(string, int)' at line 8 char 0 at test.jspp

It tells you exactly the line where the error occurred so you can fix it – before your users, visitors, or customers get a chance to encounter it. Let’s fix the offending line, which JS++ told us was on Line 8:

// lowercaseCompare("10", 10);
// becomes:
lowercaseCompare("10", "10");

Run the code after fixing the offending line. In Windows, right-click the file and choose “Execute with JS++”. In Mac or Linux, run the following command in your terminal:

js++ --execute test.jspp

You’ll see both messages logged successfully.

In the next chapter, we’ll explore the JS++ type system and “type guarantees” by example.

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.