Conditional Statements and ECMAScript

ECMAScript Basics - Part 4

ECMAScript 6

Foreword: In this part of the series, we see how a group of statements can be executed based on a condition.

By: Chrysanthus Date Published: 12 May 2015

Introduction

This is part 4 of my series, ECMAScript Basics. In this part of the series, we see how a group of statements can be executed based on a condition. It is similar to what happens in a human language. For example, somebody can say, if a condition is true, do that and that and that.

The if Statement
In ECMAScript, there is a reserved word, which is “if”. The “if” must be in lowercase. This is used to check if a condition is true. If it is true, one or more statements are executed. Let us look at an example. Consider the following statements:

var hisVar = 20;

if (hisVar == 20)
    {
        alert('I am studying ECMAScript');
    }

The first statement assigns the value 20 to the variable, hisVar. Then you have the “if” statement. The if-statement begins with the reserved word, “if” and ends with the curly brace, }. What goes inside the parentheses is the condition. The statements to be executed are in the curly braces. If there is only one statement, you do not need the curly braces. If you have more than one statement, separate them with semicolons and put them within the curly braces.

If the condition is correct, ECMAScript will replace it with, true, internally; you do not see that. If it is wrong, ECMAScript will replace it with, false, internally.

In the above code, 20 was assigned to, hisVar. So, hisVar equals 20. In the condition the equal sign is two assignment operators: one just next to the other. The if-statement above can be read like this: if hisVar equals 20 then display, 'I am studying ECMAScript'. Since we assigned the value 20 to hisVar, the condition of the if-statement is true. So the statement in the curly braces is executed.

Try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<script type="text/ECMAScript">
var hisVar = 20;

if (hisVar == 20)
    {
        alert('I am studying ECMAScript');
    }
</script>

</body>
</html>

The extra HTML code is to produce a web page.

else
In the above code, the statement(s) in the curly braces is(are) executed if the condition is true. What about, if it were false? It would be false if we never assigned 20 to hisVar. If it were false, nothing will happen. That is, the statement(s) in the curly braces will not be executed. There is an else sub-statement you can attach to the if-statement. The else part is similar in coding to the if part. However, its block (curly braces) is executed when the if’s condition is false. The else part does not have any condition. Try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<script type="text/ECMAScript">
var hisVar = 36;

if (hisVar == 20)
    {
        alert('I am studying ECMAScript');
    }
else
    {
        alert('I am doing something else');
    }
</script>

</body>
</html>

In the above code, a value of 36 is assigned to hisVar. In the if-condition, we test if hisVar is equal to 20. So the condition returns false, and the statement(s) in the else block is (are) executed. Note how the else section has been typed. Also note that else is a reserved word.

else if
You may have more than one test to make for the same variable or in a particular situation. In this case you include the “else if” reserved phrase as in the following code. Try it.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<script type="text/ECMAScript">
var hisVar = 1000;

if (hisVar == 10)
    {
        alert('Value is small');
    }
else if (hisVar == 100)
    {
        alert('value is medium');
    }
else if (hisVar == 1000)
    {
        alert('value is large');
    }
</script>

</body>
</html>

A value of 1000 is assigned to hisVar. The if-else-if coding will test if hisVar is 10; if it is (which it is not) the corresponding block will display 'Value is small'. The code will then test if hisVar is 100; if it is (which it is not), the corresponding block will display, 'value is medium'. The code will then test if hisVar is 1000; if it is, the corresponding block will display, 'value is large'. With the if-else-if coding only one of the blocks can be executed; that is, only one of the conditions can be true (the rest are false).

In the if-else-if coding, the very first line must be the if-condition; the rest are else-if conditions. The else-if phrase takes a condition, but the else reserved word in the previous code does not take a condition.

Always remember this: the if-else-if coding is used only for situations where only one of the conditions is satisfied (is true).

Default Condition
What about the situation for an if-else-if coding where none of the conditions is true? For that situation you will need to report (alert the user) of something to that effect. This is an opportunity to give some default answer. You do this by simply adding the else (no condition) section at the end of the if-else-if coding. The following code illustrates this:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<script type="text/ECMAScript">

var hisVar = 10000;

if (hisVar == 10)
    {
        alert('Value is small');
    }
else if (hisVar == 100)
    {
        alert('value is medium');
    }
else if (hisVar == 1000)
    {
        alert('value is large');
    }
else
    {
        alert('hisVar is very large');
    }
</script>

</body>
</html>

Try the above code, if you have not already done so. At the start of the code, 10,000 is assigned to the variable. Note that when you are applying numbers with more than 3 digits, you do not use commas (you type 10000 and not 10,000). In the code, none of the conditions is satisfied, so the last block, which does not have any condition (which is the else part), is executed. Read through the code to appreciate this.

Complete Syntax for if-statement
The complete syntax for the if-statement is:

if (condition)
    {
        statements
    }
else if (condition)
    {
        statements
    }
else if (condition)
    {
        statements
    }

            -  -  -

else
    {
        statements
    }

The switch Statement
The previous code is replaced by the following. Read and try it.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<script type="text/ECMAScript">
var hisVar = 10000;

switch (hisVar)
    {
        case 10:
        alert('Value is small');
        break;
        case 100:
        alert('Value is medium');
        break;
        case 1000:
        alert('Value is large');
        break;
        default:
        alert('hisVar is very large');
    }
</script>

</body>
</html>

The switch argument, (value in parentheses after the word, switch), does not necessarily have to be a number; it can also be a string as in the following code that you should read and try:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<script type="text/ECMAScript">
var hisVar = "bb";

switch (hisVar)
    {
        case "aa":
        alert('Value is low');
        break;
        case "bb":
        alert('Value is medium');
        break;
        case "cc":
        alert('Value is high');
        break;
        default:
        alert('hisVar is very high');
    }
</script>

</body>
</html>

If the switch argument is a string, the case values should also be strings.

The syntax for the switch statement is:

switch (expression)
    {
       case label :
           statements;
           break;
       case label :
           statements;
           break;
       -  -  -
       default :
           statements;
    }

With time you will know different possible expressions. An example is just a variable, as in the above case. label is the result of the expression. Each case ends with “break;”. The last situation does not have a label (corresponds to else). Note the use of colons and semicolons. If you have more than one statement, separate them with semicolons. Also note the use of the curly braces.

Quotation Marks
If your value is a number in the condition, you do not need to have it in quotes. However, if it is a string, you need to have it in quotes.

Comments
You should have comments in your code. Comments are not executed. Comments are to remind you later of why you typed a particular piece of code. There are two types of comments: single-line comment and multiple-line comment. A single-line comment can only be in one line; something like:

        // This is a single-line comment.

A single-line comment begins with a double forward slash. For a single-line comment, everything to the right of the comment is not executed.

A multiple-line comment begins with /* and ends with */ . An example is:

/* This is a multiple-line comment. It can be of any length, and
you can put whatever you want here. */

A multiple-line comment spans more than one line. The opening delimiter is a forward slash and asterisk. The closing delimiter is an asterisk and forward slash.

The following is part of a previous code with comments:

<script type="text/ECMAScript">
//declaration and assignment of the main variable
var hisVar = 10000;

//If all of the following conditions are not satisfied, the default block is executed.
if (hisVar == 10)
    {
        alert('Value is small');
    }
else if (hisVar == 100)
    {
        alert('value is medium');
    }
else if (hisVar == 1000)
    {
        alert('value is large');
    }
else
    {
        alert('hisVar is very large');
    }
</script>

Time to take a break. We stop here and continue in the next part of the series.

Chrys

Broad Network

Related Articles

Conditional Statements and ECMAScript

ECMAScript Basics - Part 4

ECMAScript 6

Introduction

Related Links

Comments