JAVASCRIPT SWITCH STATEMENT

❮ Prev Next ❯

In the previous chapter we have learned that if else statement is used for decision making. We can execute a block of code when a certain condition is satisfied. switch statement is also used for the same purposes to make decisions on some conditions.

switch statement

switch statement is a conditional statement same as 'if else' statement. switch statement is a flow-control statement. It is used to control complex conditional operations. switch statement is more convenient to use in some cases, like when we have to check for a variable with hundreds of conditions.

Syntax :

switch (expression) {
    case condition_1:
        // execute this block if the condition is true...
        break;
    case condition_2:
        // execute this block if the condition is true...
        break;
    case condition_3:
        // execute this block if the condition is true...
        break;
        .
        .
        .
    default:
        // execute this block if no condition is true...
}

var p = document.getElementById("output");
var x = 5;
switch (x) {
    case 1:
        p.innerHTML = "sunday";
        break;
    case 2:
        p.innerHTML = "monday";
        break;
    case 3:
        p.innerHTML = "tuesday";
        break;
    case 4:
        p.innerHTML = "wednesday";
        break;
    case 5:
        p.innerHTML = "thursday";
        break;
    case 6:
        p.innerHTML = "friday";
        break;
    case 7:
        p.innerHTML = "saturday";
        break;
    default: 
        p.innerHTML = "nothing matches";
}

▶ Run the code

Lets see how this work:

First expression in switch statement is evaluated
Then the value found by evaluating expression is matched with condition of each case (condition can be number, string, expression, boolean)
if value matched then block of code for that case is executed
then break command breaks through the switch statement.
In case no condition matched then code block of default section is executed

Matching switch expression with multiple cases

In case you want to match switch expression with multiple cases to execute the same code block, for this just write all cases that you want to match without break command or expression and at the last case write your code block with break command.

var p = document.getElementById("output");
var x = 4;
switch (x) {
    case 1:
        p.innerHTML = "Very Good";
        break;
    case 2:
    case 3:
    case 4:
        p.innerHTML = "Good";
        break;
    case 5:
    case 6:
        p.innerHTML = "Satisfied";
        break;
    case 7:
        p.innerHTML = "Not satisfied";
        break;
    default: 
        p.innerHTML = "nothing matches";
}

▶ Run the code

Expression as condition in switch statement

In all above examples we have used numerical value as a condition but we can put anything as condition like number, string, boolean, expression etc.

Lets see an example:

var p = document.getElementById("output");
var x = 10;
switch (true) {
    case (x > 15):
        p.innerHTML = "x is greater than 15";
        break;
    case (x == 12):
        p.innerHTML = "x is equal to 12";
        break;
    case ( x > 5):
        p.innerHTML = "x is greater than 5";
        break;
    default: 
        p.innerHTML = "nothing matches";
}

▶ Run the code

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

❮ Prev Next ❯