All the Tricks of the Switch Statement JavaScript Coders Should Know

If you are already familiar with if else statement, you will find the switch statement JavaScript offers is somewhat similar. It also helps with making your code more flexible by adapting to specific conditions.

Using switch statement JavaScript coders can quickly check a specific value and compare it to multiple options. It also helps you provide certain functionalities based on a particular matched option.

switch Statement JavaScript: Main Tips

• This statement is used to execute various actions for various conditions.
• You may use it to pick a block of code to be run according to a specific condition.
• It serves a similar purpose as the ifElse statement.

Definition and Syntax

switch statement allows you to check a certain expression for multiple cases.

After JavaScript switch assesses an expression, it checks whether it matches any of the provided JavaScript switch cases. If several cases are matched, only the first one is executed.

JavaScript executes a block of code of the matched case and stops running when it reaches the break statement. If the case value doesn't match, it keeps on moving to the next JavaScript switch case:

switch(expression) {
case x:
code to run in case of x
break;
case y:
code to run in case of y
break;
default:
default code block
}

The default keyword is optional. It indicates a block of code that should be executed if none of the JavaScript cases match.

The switch JavaScript statement executes the code of the matched case and only stops running when it reaches the break statement. If you don't use it in your script, even the code blocks of cases that did not match will be executed. The last case in a switch block is the only one which you do not need to break using the keyword, as the block ends regardless.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Code Examples

To help you get a better idea of how the switch statement JavaScript works, we've provided you with a few code examples. Click the Try it Live buttons to open a code editor and pull your sleeves up. By experimenting, you will understand the concept much quicker.

In our first example, we have a date object to determine the current month and a switch statement JavaScript uses to output a text depending on which month it currently is (January=0, February=1, March=2, ...):

var month;
switch (new Date().getMonth()) {
  case 0:
    month = "january is the best month";
    break;
  case 1:
    month = "february is the best month";
    break;
  case 2:
    month = "march is the best month";
    break;
  case 3:
    month = "april is the best month";
    break;
  case 4:
    month = "may is the best month";
    break;
  case 5:
    month = "june is the best month";
    break;
  case 6:
    month = "july is the best month";
    break;
  default:
    month ="Who knows..";
}

Now, in the example below, we use a date object to determine the current day of the week and a switch statement to output a text depending on which day it is. If the current day is not Sunday or Saturday, it will display "Can't wait for the Weekend":

var text;
switch (new Date().getDay()) {
    case 6:
        text = "It's Saturday";
        break; 
    case 0:
        text = "It's Sunday";
        break; 
    default: 
        text = "Can't wait for the Weekend";
}

In the last code example we have, you can see JavaScript switch statement used together with user input:

var text;
var sweet = document.getElementById("my_input").value;
switch(sweet) {
    case "cake":
        text = "I love cakes!";
        break;
    case "pie":
        text = "I bake pies.";
        break;
    case "cupcake":
        text = "These cupcakes are lovely";
        break;
    default:
        text = "I do not like deserts";
}

switch Statement JavaScript: Summary

• Using switch statement JavaScript checks a certain value by comparing it with a specified selection of values (JavaScript cases) with their own specific blocks of code.
• There are many ways you can use this to control output according to input.
• JavaScript switch is very similar to if else statements.