Learning JavaScript--- Understanding Switch statement

Hello Everyone!

As we have started the javascript tutorials. In the last post, we have covered the If-Else topic. The if-else statement is one of the important and fundamental topic of not only in JavaScript but in every programming language. But if you notice using too much if-else statement increases the line of code in the resultant the program becomes complicated and hard to understand for another developer. That's why we have an advance and easier way to do this kind of stuff. To solve this kind of problem, the Switch statement is used. Let's see what is Switch statement according to google and then I will prove it by writing some codes.

What is Switch Statment.

In computer programming languages, a 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.
Switch statements function somewhat similarly to the if statement used in programming languages like C/C++, C#, Visual Basic .NET, Java and exists in most high-level imperative programming languages such as Pascal, Ada, C/C++, C#, Visual Basic .NET, Java, and in many other types of language, using such keywords as switch, case, select or inspect.Wikipedia

Let's write a script

To understand the above definition we will write a script that will display the names of Hive blockchain witness names. When a user enters 1 will display witness on 1st rank and if the user enters 2 it will display the name of the witness on 2nd rank. We did the exact thing with if-else now we will do it with Switch statement and see the difference.

Open an HTML file in Visual Studio. We will implant the Javascript in HTML. ( Soon I will start HTML tutorials but for now, we need to focus on Javascript)

To do this level of programming you don't really need to do anything just type HTML in visual studio and press tab and the basic syntax of HTML will appear.

Open the HTML with Live server.

In the above pic, you can see that we have created a text box and a button.

What we are doing here is checking the input from the user with the cases. If the Entry from the user meets the first case the block of code inside the first case will execute and the break statement will stop the rest of the code. Remember if you don't use the break the compiler will compiler the whole code even if the case match with the input.
Let's input a number and check if it works.

As you can see our code is working fine. But what if the input does not match with the cases? Then the default statement will be executed.

Script:

<!DOCTYPE html>
 <html class="no-js"> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>

       <input type="text" id="txt" size="15"> <br>
       <input type="button" value="Click to show name" onclick="btn1()">
        
        <script >
            function btn1(){
                let Witness1="@gtg";
                let Witness2='@good-karma';
                let Witness3="@themarkymark";
                let Witness4='@roelandp';
                let Witness5="@blocktrades";
                let Witness6='@ausbitbank';
                let Witness7="@anyx";
                let Witness8='@steempress';
                let Witness9="@therealwolf";
                let Witness10='@drakos';
                var name;

                let num=document.getElementById("txt").value;
                switch(num){
                    case '1': document.write("The witness on 1st rank is "+Witness1);
                    break;
                    case '2': document.write("The witness on 2nd rank is "+Witness2);
                    break;
                    case '3': document.write("The witness on 3rd rank is "+Witness3);
                    break;
                    case '4': document.write("The witness on 4th rank is "+Witness4);
                    break;
                    case '5': document.write("The witness on 5st rank is "+Witness5);
                    break;
                    case '6': document.write("The witness on 6th rank is "+Witness6);
                    break;
                    case '7': document.write("The witness on 7th rank is "+Witness7);
                    break;
                    case '8': document.write("The witness on 8th rank is "+Witness8);
                    break;
                    case '9': document.write("The witness on 9th rank is "+Witness9);
                    break;
                    case '10': document.write("The witness on 10th rank is "+Witness10);
                    break;
                    default:alert("Wrong entry"+num);



                }
            }
        </script>
    </body>
</html>

This much is enough for today. I hope you have learned something new from me. Take care and see you with a new post.