JavaScript Introduction | Control Flow Statements | Conditional Statements

Tags:

Conditional Statements

A conditional statement is a statement that controls a program so that it executes different commands depending on the result of a given expression.
The most basic conditional statement is the if statement.

JavaScript provides the following forms of conditional statements.

  1. if statement
  2. if / else statement
  3. if / else if / else statement
  4. switch statement

if Statement

The if statement executes the given statement when the result of an expression is true, and executes nothing when it is false.

The syntax of the if statement is as follows.

if (expression) {
    statement to execute when the expression result is true;
}

var x = 10, y = 20;
if (x == y) {
    document.write("x and y are equal.");
}
if (x < y) {
    document.write("x is less than y.");
}
if (x > y) // If the statement to execute is only one line, braces ({}) can be omitted.
    document.write("x is greater than y.");

If the statement executed by an if statement is only one line, braces ({}) can be omitted.

else Statement

The else statement, which can be used with an if statement, executes the given statement when the expression result of the if statement is false.

The syntax of the else statement is as follows.

if (expression) {
    statement to execute when the expression result is true;
} else {
    statement to execute when the expression result is false;
}

Using an else statement makes the previous example more intuitive.

var x = 10, y = 20;
if (x == y) {
    document.write("x and y are equal.");
} else {
    if (x < y)
        document.write("x is less than y.");
    else // If the statement to execute is only one line, braces ({}) can be omitted.
        document.write("x is greater than y.");
}

In an else statement as well, if the statement to execute is only one line, braces ({}) can be omitted.

else if Statement

Because an else if statement can set an expression like an if statement, it can express nested if statements more concisely.
Inside one conditional statement, if and else can each be used only once.
However, else if can be used multiple times to set various conditions.

The syntax of the else if statement is as follows.

if (expression1) {
    statement to execute when expression1 is true;
} else if (expression2) {
    statement to execute when expression2 is true;
} else {
    statement to execute when both expression1 and expression2 are false;
}

var x = 10, y = 20;
if (x == y) {
    document.write("x and y are equal.");
} else if (x < y) {
    document.write("x is less than y.");
} else { // when x > y
    document.write("x is greater than y.");
}

In an else if statement as well, if the statement to execute is only one line, braces ({}) can be omitted.

Conditional Statements with the Ternary Operator

In JavaScript, a simple if / else statement can be expressed simply with the ternary operator.

expression ? returnValue1 : returnValue2

switch Statement

Like an if / else statement, a switch statement is a conditional statement that makes a program execute different commands depending on a given condition value. A switch statement is often better than an if / else statement in terms of readability.

The syntax of the switch statement is as follows.

switch (conditionValue) {
    case value1:
        statement to execute when conditionValue is value1;
        break;
    case value2:
        statement to execute when conditionValue is value2;
        break;
    ...
    default:
        statement to execute when conditionValue does not match any case clause;
        break;
}

The default clause is executed when the condition value does not match any of the listed case clauses.
This clause does not have to exist and can be declared only when needed.

Each case clause and default clause should include the break keyword.
The break keyword exits the entire switch statement after the case clause or default clause corresponding to the condition value has been executed.

The default clause does not necessarily have to be placed at the very end of a switch statement.

var x = 10;
switch (typeof x) {
    case "number":
        document.write("The type of variable x is number.");
        break;
    case "string":
        document.write("The type of variable x is string.");
        break;
    case "object":
        document.write("The type of variable x is object.");
        break;
    default:
        document.write("I am not sure what type variable x is...");
        break;
}

The following example shows what happens when case clauses and the default clause do not have the break keyword.

var x = "string";
switch (typeof x) {
    case "number":
        document.write("The type of variable x is number.<br>");
    case "string":
        document.write("The type of variable x is string.<br>");
    case "object":
        document.write("The type of variable x is object.<br>");
    default:
        document.write("I am not sure what type variable x is...<br>");
}

In the example above, variable x is of the string type, so the document.write() method in the second case clause is executed first.
However, because there is no break keyword, every statement after the second case clause will also be executed.
Therefore, case clauses and the default clause must include the break keyword to work correctly.

As in the following example, you can also express multiple conditions at once by using several case clauses.

var day = new Date().getDay(); // returns today's day of the week. (Sunday: 0 to Saturday: 6)
switch (day) {
    case 1: // Monday
    case 2: // Tuesday
    case 3: // Wednesday
    case 4: // Thursday
    default: // when the value is not between 0 and 6
        document.write("The weekend is still far away... Keep going!");
        break;
    case 5: // Friday
        document.write("Today is Friday!");
        break;
    case 6: // Saturday
    case 0: // Sunday
        document.write("You are studying hard even on the weekend. Excellent!");
        break;
}