Lesson 12 - More on Conditions in JavaScript

In today's lesson we'll summarize casting in conditions, get to know the switch construct with fallthrough and the ternary operator.

Casting table

Let's easily summarize the topic of casting from the previous lesson with a table of how different values are evaluated if we use them in a condition in JavaScript, such as the following:

let variable = '0';
if (variable)
    document.write('True');

From the previous lesson, we should know that although the number 0 indicates false, we have zero entered here as a non-empty string, which is always true. We could read such a zero, for example, from an element on the page, from which we always get text, and we have to parse it to a number. The result is:

Let's see the promised table.

Here, we can also see examples of what we have already tried. For example, that an empty array [] is evaluated as true in a condition. With this, we will completely leave the topic of casting.

Fallthrough switch statement

We have already encountered the switch construct. Here we will show its further use. Let's suppose we want to find out what quarter of the year is according to the month. Using if and else, the example would look like this:

if (month >= 1 && month <= 3)
    document.write("It's the first quarter.");
else if (month >= 4 && month <= 6)
    document.write("It's the second quarter.");
else if (month >= 7 && month <= 9)
    document.write("It's the third quarter.");
else if (month >= 10 && month <= 12)
    document.write("It's the fourth quarter.");

But how to use switch for such an example? You might come up with the following code.

let month = 11;
switch (month) {
    case 1:
        document.write("It's the first quarter.");
        break;
    case 2:
        document.write("It's the first quarter.");
        break;
    case 3:
        document.write("It's the first quarter.");
        break;
    case 4:
        document.write("It's the second quarter.");
        break;
    case 5:
        document.write("It's the second quarter.");
        break;
    case 6:
        document.write("It's the second quarter.");
        break;
    case 7:
        document.write("It's the third quarter.");
        break;
    case 8:
        document.write("It's the third quarter.");
        break;
    case 9:
        document.write("It's the third quarter.");
        break;
    case 10:
        document.write("It's the fourth quarter.");
        break;
    case 11:
        document.write("It's the fourth quarter.");
        break;
    case 12:
        document.write("It's the fourth quarter.");
        break;
}

Fallthrough

The example works reliably, but the problem is that this notation didn't help us much. We should always avoid such repetitive code. Let's try it one more time and use what is called fallthrough. If we need to run the same code in the case blocks, it is enough to put these blocks under each other and to not end each block with a break, but the whole group of blocks with just one break. Unterminated blocks thus fall through and the code that is common to multiple blocks will be executed:

let month = 11;
switch (month) {
    case 1:
    case 2:
    case 3:
        document.write("It's the first quarter.");
        break;
    case 4:
    case 5:
    case 6:
        document.write("It's the second quarter.");
        break;
    case 7:
    case 8:
    case 9:
        document.write("It's the third quarter.");
        break;
    case 10:
    case 11:
    case 12:
        document.write("It's the fourth quarter.");
        break;
}

This syntax is already much clearer. The switch construct has some added value when we can't use greater/less than and the code is a list of values at the same time, but here it's rather a redundant code.

Sample application in the browser:

Only use fallthrough in a switch statement if you have a good reason for it, however, it is important that you can read it when you come across it somewhere.

Ternary operator

Now, on the contrary, let's introduce something very useful. It often happens that we need different values somewhere depending on whether a condition has been met. Imagine, for example, that we have the gender of the user saved as Boolean (men would be true) and we would like to convert it to text. With our current knowledge, we would write something like this:

let man = true; // a variable defining the gender
let genderName;
if (man)
    genderName = 'man';
else
    genderName = 'woman';
document.write(genderName);

We can obtain a value according to the result of a logical expression using the ternary operator:

let man = true; // any variable indicating gender
let genderName = (man) ? 'man' : 'woman';
document.write(genderName);

We usually put the condition in parentheses, followed by a question mark and 2 values to be returned. The values are separated by a colon, the first is returned when the condition is true and the second when it is false. Instead of the Boolean type, we could of course write any other condition in the parentheses, e.g. (age >= 18) ? ' adult ' : ' minor '.

As with the conditions, there are a few other details about loops in JavaScript, but we'll talk about them another time

In the following exercise, Solved tasks for JavaScript lessons 8-12, we're gonna practice our knowledge from previous lessons.