Switch statements

Sometimes you need your program to handle various different possibilities and to execute different code in each. Although you could achieve this by using a conditional with multiple else if statements, it is often simpler is to use a switch statement. A switch statement evaluates an expression and compares its value with one or more case expressions; if one of these case expressions provides a match, some associated code is executed.

Let’s take an example:

external $;

string favoriteColor;
string colorComment;
favoriteColor = "green";
    
switch (favoriteColor) {
    case "red":
        colorComment = "red is fantastic";
        break;
    case "blue":
        colorComment = "blue is wonderful";
        break;
    case "green":
        colorComment = "green is magical";
        break;
    case "yellow":
        colorComment = "yellow is brilliant";
        break;
    default:
        colorComment = "I have no favorite color";
        break;
}
    
$("#content").text(colorComment);

In this example, the switch statement compares the value of the string favoriteColor with the various case expressions listed. When it finds a match, it executes the associated code. Since the value of favoriteColor is “green”, the switch statement executes the code associated with that case: the string colorComment is set to “green is magical“.

What is the purpose of the break and default keywords? The break keyword is very important because it’s needed if you want to prevent so-called “fallthrough”. Fallthrough happens when a switch statement executes the code associated with one or more cases after the matching case. For example, if you remove the break at the end of the green case, the switch statement will go on to set colorComment to “yellow is brilliant“. In some rare situations you may want fallthrough of this sort; if so, you would intentionally omit break. (You would also be advised to add a comment explicitly indicating that the fallthrough was intended.) Usually, however, you will want to include break at the end of each case.

The code in the default clause is executed if none of the case expressions match the original expression. The default clause is optional: if you don’t provide one, then the program resumes execution at the first statement after the switch statement.



JS++ | Conditional Statements

Conditional statements of various kinds play a central role in JS++. In this tutorial, we will look at the basic syntax and some common uses of such statements, and we will also introduce two kinds of expressions that are often used in conditionals: comparison operators and logical operators.

Note: JS++ conditionals, comparison operators, and logical operators work in a similar way to their counterparts in languages such as JavaScript, Java, C++, and C#.

Let’s start by making a new folder – name it “Conditionals”. Then make a new file and name it “Conditionals.jspp”. Write in the following code:

external $;

string colorString;
bool likesRed = true;
if (likesRed) {
    colorString = "red";
}

$("#content").text(colorString);
$("#content").css("color", colorString);

Save Conditionals.jspp to your Conditionals folder. Then create a second file named “Conditionals.html” and write in the following:

<!DOCTYPE html>
<title>Conditionals program</title>
<body>

<p id="content"></p>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="Conditionals.jspp.js"></script>

</body>
</html>

Save Conditionals.html to your Conditionals folder. Compile Conditionals.jspp and then open Conditionals.html in a browser. If everything has worked, your document should display “red” in a red font.

“if”, “else”, and “else if”

Conditionals.jspp shows the syntax of a simple if statement: the keyword if itself, followed by a pair of parentheses holding a condition to check, followed by a block of code in curly braces which executes if and only if the condition is true.

Note: the curly braces around the code block are optional if the block only contains one statement. For consistency and readability, however, it is advisable always to use curly braces.

Although if statements are often used on their own, they are also commonly used together with else statements. Let’s add an else statement to Conditionals.jspp:

external $;
    
string colorString;
bool likesRed = true;

if (likesRed) {
    colorString = "red";
}
else {
    colorString = "blue";
}
    
$("#content").text(colorString);    
$("#content").css("color", colorString);

Compile this code and then open Conditionals.html in a browser. The result is the same: the document still displays “red” in a red font. The reason is that the code in an else block only executes if the condition in the associated if statement is false. To get the code in your else block to execute, change the value of likesRed to false: Conditionals.html will then display “blue” in a blue font.

Notice that the else statement doesn’t specify a condition of its own; the only condition that is checked in Conditionals.jspp is likesRed. We simply have one block of code which executes if that condition is true, and another block which executes if it is false.

In some cases, however, we want the execution of our code to depend on more than one condition. This is where else if statements can prove useful. An else if statement supplies a condition of its own and an associated code block. The code block executes if the condition is true and all previous conditions (i.e. those associated with earlier if and else if statements) are false. Let’s revise Conditionals.jspp again to show the use of an else if statement:

external $;

string colorString;
bool likesRed = false;
bool likesBlue = true;

if (likesRed) {
    colorString = "red";
}
else if (likesBlue) {
    colorString = "blue";
}
else {
    colorString = "green";
}

$("#content").text(colorString);
$("#content").css("color", colorString);

Here the code in the else if block will execute, since its likesBlue condition is true whereas the likesRed condition specified by the earlier if statement is false. If we change the value of likesBlue to false, however, the code in the else if block will not execute, but the code in the else block will. Play around with the values of likesRed and likesBlue for yourself to see what effect they have on the conditional’s execution.

Similar Reads

Comparison operators

Often when we use conditionals, it is because we want the execution of our code to depend on the result of a comparison of some kind. For example, suppose we want to check whether the value of a tempInCelsius variable is equal to 0, and have some code execute if it is. We would write:...

Logical operators

Sometimes we want code to execute only if multiple conditions are true. To achieve this, one option would be to use nested conditionals, such as the following:...

Switch statements

Sometimes you need your program to handle various different possibilities and to execute different code in each. Although you could achieve this by using a conditional with multiple else if statements, it is often simpler is to use a switch statement. A switch statement evaluates an expression and compares its value with one or more case expressions; if one of these case expressions provides a match, some associated code is executed....

Contact Us