JavaScript Switch Statement ▷ Exercises, and examples

It is recommended to use a switch instead of multiple if…else statements.

The code will be simpler and clearer.

How Switch Statement will work?

  • The switch expression is evaluated once.
  • The value of the expression is compared with the values of each case.
  • If find a match, the associated block of code is executed.
  • If there is no match, the default code block is executed.
let num2 = 5;
switch (num2) {
    case 0:
        console.log("Number is 0");
        break;
    case 10:
        console.log("Number is 10");
        break;
    case 100:
        console.log("Number is 100");
        break;
    default:
        console.log("I don't know the number");
}

//I don't know the number

Switch statement example for greater-than/less-than

let num1 = 5;
switch (true) {
    case (num1 < 5):
        console.log("Number is very low");
        break;
    case (num1 < 10):
        console.log("Number is low");
        break;
    case (num1 > 100):
        console.log("Number is high");
        break;
    default:
        console.log("Number is medium")
}

//Number is low

Where to place the “default” statement?

The JavaScript convention is to place the “Default” statement after all other “case” statements, but the default is not required to be the last clause.

Multiple case statements

If the expression matches any case, then the statements are executed.

let num3 = 5;
switch (num3) {
    case 0:
    case 5:
    case 6:
        console.log("Number is low");
        break;
    case 100:
        console.log("Number is high");
        break;
    default:
        console.log("I don't know the number");
}

//Number is low

What happens if You forgot a break?

If you forget a break then the script will run from the case where the criterion is met and will run the cases after that regardless if a criterion was met. Read more here about the switch statement.

let num4 = 100;
switch (num4) {
    case 0:
    case 5:
    case 6:
        console.log("Number is low");
        break;
    case 100:
        console.log("Number is high");
    default:
        console.log("I don't know the number");
}

//Number is high
//I don't know the number

Strict Comparison

Switch cases use strict comparison (===).

That means the values must be of the same type to match.

let num5 = 100;
switch (num5) {
    case 0:
    case 5:
    case 6:
        console.log("Number is low");
        break;
    case "100":
        console.log("Number is high");
    default:
        console.log("I don't know the number");
}

I don't know the number

Block level scope

The switch statement is a block, but each case statement is not a block.

If you want to make a case statement a block, you have to wrap it with braces.

If you try the code below you will get the error: SyntaxError: Identifier ‘message’ has already been declared

let num6 = 5;
switch (true) {
    case (num6 < 5):
        let message = "Number is very low"
        console.log(message);
        break;
    case (num6 < 10):
        let message = "Number is low"
        console.log(message);
        break;
    case (num6 > 100):
        let message = "Number is high"
        console.log(message);
        break;
    default:
        console.log("Number is medium")
}

The solution, in this case, is to place each case statement in its own block purpose, as below:

let num7 = 5;
switch (true) {
    case (num7 < 5): {
        let message = "Number is very low"
        console.log(message);
        break;
    }
    case (num7 < 10): {
        let message = "Number is low"
        console.log(message);
        break;
    }
    case (num7 > 100): {
        let message = "Number is high"
        console.log(message);
        break;
    }
    default:
        console.log("Number is medium")
}

//Number is low

Any variable declared within that block is only visible within the block, and is released once the block end.


Leave a Comment

WebPedia.net