Conditionals: Switch Statement

When you have a situation where you are checking for a lot of unique conditions, you could end up with a long, nested chain of if/else statements. It works, but it can be a mess. There is another statement, switch, that's often better suited to that kind of task.

Unlike the if statement, a switch does not use a Boolean. (It can, though, but then it makes sense to use if instead.) Let's look back at our weather example. We were starting to build a series of nested ifs to check certain weather conditions. This would be a great place to use a switch instead.

In a switch, each value is a case and we can have that do whatever we need. We need to control each case and break out of it when we're done, otherwise we'll get some unexpected things.

It's important to note that not even if/else chain can be turned into a switch chain. For instance, the code we used to check and report on test scores won't work here. This tests for specific values, not ranges.

Syntax:

switch (variable)
{
- case x:
  - //code to run
  - break;
- case y:
  - //code to run
  - break;
- default:
}

The variable is typically a variable that is a number or a string, or it could be an object.property that's a number or a string.

Each case is a possible value of the variable. It will make more sense when you see the example.

Put as many case blocks as you need. You should always include a default action. It's like using an else block at the end of an if chain.

Example:

//let's pick a value for weather so we can test it
let weather = "sunny";
switch (weather)
{
- case "sunny":
  - alert("It's warm.");
  - break;
- case "rainy":
  - alert("It's wet.");
  - break;
- case "snowy":
  - alert("It's cold.");
  - break;
- default:
  - alert("Who knows?");
}

We first need to set a value to weather for this to do what we want. let weather = "sunny"; If we make it sunny before this code starts, then we would get "It's warm." Try other values of weather too.

Notice the default: value? If the switch expression (weather in our example) doesn't fit any of the cases (like if we put "cats and dogs", then the default runs. Now, you are not required to have a default case but it's highly recommended, even if you just use it to throw an error or to give a heads-up to the user (or programmer like yourself). It's useful for finding unexpected results.

Switch code structure

Go back and notice the structure of the code. The switch with its expression opens into a code block with braces {}. Inside the code block, we have all of our cases, which end with a colon :. The code inside each case can be any length you need. Then we break out of the switch and we don't run any more of this code.

What would happen if we left out the breaks? Hey, try it! Go up to the "sunny" case and comment out (with //) or delete the break; line. Then set weather to "sunny" again and run it.

Without the break in between "sunny" and "rainy" you should notice that both blocks run! You get "It's warm." and "It's wet." Change the value of weather to "rainy" and try again. You should only see "It's wet." now.

This is an example of a case falling through to the case below it. There are times you may want this to happen, but you must be careful. Most of the time, you want each case to be contained, like in ours.

Switch example with fall-through

Here is an example of a switch statement that purposely uses the fall-through feature and does not have a default case. Can you figure out what will happen with all the test cases? I'm going to wrap this in a function.

Example:

function fortuneteller(whatToSay)
{
- alert("Madame Guava has seen into your future...");
- switch (whatToSay)
- {
  - case 0:
  - case 2:
    - alert("I see little luck in your day.");
    - break;
  - case 4:
    - alert("It is a good day for you.");
  - case 10:
    - alert("This number is too high for me.");
  - case 5:
    - alert("It is a bad day for you.");
    - break;
  - case 3:
    - alert("The code gods smile upon you today.");
    - break;
- }
}

Predict the results:

What will happen when you pass in each of these?

fortuneteller(0);
fortuneteller(1);
fortuneteller(2);
fortuneteller(3);
fortuneteller(4);
fortuneteller(5);

This example makes use of what we're talking about. Take your time to reason it through. What popups will you see when you run the test cases?

Once you've thought it through, go ahead and try it. Type in the code, run it, and then in the console type in each test case one after another and see if your predictions were right.

Test Case	Result and Discussion
fortuneteller(0);	I see little luck in your day. (This passes through to case 2.)
fortuneteller(1);	(Nothing happens.) (There is no case 1 and no default.)
fortuneteller(2);	I see little luck in your day. (This is case 2's task.)
fortuneteller(3);	The code gods smile upon you today. (This is case 3's task.)
fortuneteller(4);	It is a good day for you. This number is too high for me. It is a bad day for you. (This is case 4's task, and it passes through to case 10, and it passes through to case 5.)
fortuneteller(5);	It is a bad day for you. (This is case 5's task.)

Conditionals: Switch Statement

Syntax:

Example:

Switch code structure

Switch example with fall-through

Example:

Predict the results:

Switch your coding skills on and solve every case!

—Dr. Wolf