How Can I Use Switch Statement In Java Script With Example

admin_img Posted By Bajarangi soft , Posted On 25-09-2020

In Java Script switch statement is a type of selection control mechanism used to allow the value of a variable or expression to change the control flow of program execution via search and map.The switch statement is used to perform different actions based on different conditions.

How Can I Use Switch Statement In Java Script With Example

The JavaScript Switch Statement

Use the switch statement to select one of many code blocks to be executed.

Syntax

switch(expression) {
case x:
   // code block
break;
case y:
   // code block
break;
default:
   // code block
}


How to switch statements

  • The switch expression is evaluated once.

  • The value of the expression is compared with the values of each case.

  • If there is a match, the associated block of code is executed.

  • If there is no match, the default code block is executed.

 

Example(1)

<script type = "text/javascript">
    <!--
    var grade = 'C';
    document.getElementById("demo").innerHTML = "Entering switch block";

    switch (grade) {
        case 'A': document.getElementById("demo1").innerHTML = "Excellent";

            break;

        case 'B': document.getElementById("demo1").innerHTML = "Good";
            break;

        case 'C':document.getElementById("demo1").innerHTML = "Average";
            break;

        case 'D': document.getElementById("demo1").innerHTML = "Satisfied";
            break;

        case 'E': document.getElementById("demo1").innerHTML = "Pass";
            break;

        case 'F': document.getElementById("demo1").innerHTML = "Failed";
            break;

        default: document.getElementById("demo1").innerHTML = "Unknown grade";
    }
    document.getElementById("demo").innerHTML = "Exiting switch block";
    
    //-->
</script>

In above example when you enter grade as A Switch statement returns Excellent as output.


The break Keyword

When JavaScript reaches a break keyword from expression, it breaks out of the switch block.

This will stop the execution of inside the block.

It is not necessary to break the last case in a switch block. The block breaks (ends) there anyway.


The default Keyword

The default keyword specifies the code to run if there is no case match:

Example(2)

The getDay() method returns the weekday as a number between 0 and 6.

If today is neither Saturday (6) nor Sunday (0), write a default message:

<script>
    var day;
    switch (new Date().getDay()) {
        case 0:
            day = "Sunday";
            break;
        case 1:
            day = "Monday";
            break;
        case 2:
            day = "Tuesday";
            break;
        case 3:
            day = "Wednesday";
            break;
        case 4:
            day = "Thursday";
            break;
        case 5:
            day = "Friday";
            break;
        case  6:
            day = "Saturday";
    }
    document.getElementById("demo").innerHTML = "Today is " + day;
</script>


Complete code of Conditions Statements In Java Script

<!DOCTYPE html>
<html>
<head>
    <title> Switch Statements In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h3{
        color:red;
    }
</style>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1> Switch Statements In JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <h1 id="demo"></h1>
        <h1 id="demo1"></h1>
        <h1 id="demo2"></h1>
        <h1 id="demo4"></h1>
    </div>
    <br>
</div>
</body>
</html>
<script type = "text/javascript">
    <!--
    var grade = 'C';
    document.getElementById("demo").innerHTML = "Entering switch block";

    switch (grade) {
        case 'A': document.getElementById("demo1").innerHTML = "Excellent";

            break;

        case 'B': document.getElementById("demo1").innerHTML = "Good";
            break;

        case 'C':document.getElementById("demo1").innerHTML = "Average";
            break;

        case 'D': document.getElementById("demo1").innerHTML = "Satisfied";
            break;

        case 'E': document.getElementById("demo1").innerHTML = "Pass";
            break;

        case 'F': document.getElementById("demo1").innerHTML = "Failed";
            break;

        default: document.getElementById("demo1").innerHTML = "Unknown grade";
    }
    document.getElementById("demo").innerHTML = "Exiting switch block";

    //-->

    var day;
    switch (new Date().getDay()) {
        case 0:
            day = "Sunday";
            break;
        case 1:
            day = "Monday";
            break;
        case 2:
            day = "Tuesday";
            break;
        case 3:
            day = "Wednesday";
            break;
        case 4:
            day = "Thursday";
            break;
        case 5:
            day = "Friday";
            break;
        case  6:
            day = "Saturday";
    }
    document.getElementById("demo4").innerHTML = "Today is " + day;</script>

Related Post