Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

JavaScript 007 – Switch-Case Structure

1. About Switch Case

In if…else statement, we can do the comparison and decide the code flow direction. Sometime, a comparison may end-up in checking a variable with multiple possible values. Here, one can use a switch-case to avoid multiple if-else statements. Below is the structure of the JavaScript switch-case:

JavaScript Switch Case
JavaScript Switch Case

Below are components of the switch case construct:

  1. switch: Comes with an expression which evaluates to a value. A single variable can also be an expression as it evaluates to a value. For example, the variable month number can hold a value of 1…12, Which can act as an expression.
  2. case: The value which we want to compare with evaluated expression will take part in case statement. The constant value here forms an expression like Switch Expression == Case_Value. When the match returns true, the case block executes. In the above picture, it showed the case block in red colour.
  3. break: After executing the case block, if you want code flow to go out of the complete switch case structure, you can use the break statement. The break keyword will stay as the last statement inside the case block.
  4. default: The default block executes when no case statement match with the evaluated switch expression.

2. JavaScript Switch…Case Example

The below example takes a number from the user and forms the switch-case structure to print some numbers in a word.

Java Script Switch Case Default break Example
Java Script Switch Case Default break Example
  1. The UserNo variable contains the input number. Here, we form the switch expression using this variable.
  2. Shows case statements. Here, we provide the match case with a constant. Let us consider the statement case 3: and this will form the conditional expression UserNo == 3. When this condition evaluates to true, the code flow enters the case block.
  3. We can use a break statement to come out of the case block. So once a case match happens, the code flow enters the case block. The break statement makes the flow go out of the switch-case structure.
  4. Shows a complete case block. One can see a break statement at the end of this case block. This will avoid case flow trying for the case match for 5 after executing the case block for 4.
  5. When no case block matches with the switch expression, the execution flow enters the default: block. In our example, we print numbers 1-5 in words. The default block reports the number is more than five.

3. Case Groups

Sometimes, we may need to execute the same block of code for more than one match. In this case, we can group the case statement to execute a single block of statements. Have a look at the below example:

Javascript Grouping Cases
Javascript Grouping Cases
  1. Here, we use the same switch expression on the variable UserNo. But we group three cases case 1: case 2: and case 3: together.
  2. This case body is common for three cases. When the input number is 1 or 2 or 3, JavaScript will execute this case block.
  3. This is the second group based on the case match 4,5,6.
  4. Common case block for 4,5,6. Note, here we do not use any break statement as it is the last case block within the switch..case structure.

4. Code Reference

5. Sample Output of the Example

Executing above html with JavaScript will produce the result, as shown below. Here, we provided the input number as 4. In the first switch-case structure, cas4 4: block executes. Then we enter the second switch-case and enter the second case group.

JavaScript Switch Case Output
JavaScript Switch Case Output

Categories: JavaScript

Tags: , , ,

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.