Switch Statement in JavaScript

Injae Lee
4 min readJun 12, 2020

--

Yay~! so much for fun!

This is an introductorty article and the picture above is just more confusing, so don’t bother looking at it too much.

Swtich Statement is a basic control structure used to perform different actions based on different conditions, and it’s in many programming languages such as C/C++, Java, and Visual Basic.NET, etc. Understanding it is easier than you think, so don’t let the definition statement scare you away.

Let’s start with an example.

You would always want to start by typing switch and parenthesis. Then, comes a set of curly braces (or a block) where all of the case and execution codes belong. The sintax is very simlar to that of if or else if statement.

You could either set a varible and insert a variable into the parenthesis or also just write a value itself. In this example, you could set some integer equal to the variable choice or just insert integer to the parenthesis after switch. And your input between ( ) is what you are going to check against anything written after case. 1,2,3,4 are our values to be checked against an user’s input for our example.

: is followed after the “checking against value”, and whichever code comes after the colon will be executed upon a matching between input and checking-against values. After the execution of console.logs in our code, break code will get you out of the curly braces or the enter switch code. (Hold onto break for now, we’ll go over it soon.)

Now, let’s give it a shot.

I gave 1 for an user input (a value for switch) and the number is matched with case 1, and therefore, A burger is $5 is logged in console.

By the way, prompt(“Order!”) method will ask you to type an input. Preferably, we would want to type a number (or anything) after Order!>.

Next example

What’s going on here? I tried 7 for switch value, and I got the message which is under default. That’s right. Any integer that is not 1,2,3,4 will hit default and execute the following code to it. Think of default as else conditional statement, they work very simarly.

This is anothe example of execution of default.

In the above, input value of Meow is not any of case’s value nor a human or machine language, thus logging neither understood by human or machine.

Hopefully by now, you get the gist of how switch works!

break

Here, user answered Ruby to the prompt’s question. Then, the switch value of Ruby is matched, not with JavaScript, Python, or Mongolian, but with case “Ruby”, and thus the console logs understood by machine.

Something to look carefully here is the location of break. Whether an user types JavaScript, Ruby, or Python, all the execution code will be executed until break is called. Let me show you another example of how break is called.

Here, I commented out break on line 15, and set choice to 1. case 1 and its console.log is triggered and finds no break, allowing JavaScript to execute next lines of code under case 2. break only comes on line 18 and finally we are out of switch statement. You could use this feature of break to control your code the way you want.

Switch statement is similar to how if, else if and else statements work. It is particularly useful when your if and else if statements get too long and hard to read, then you could perhaps think about replacing with switch statement. That will be your homework and feel free to let me know your “switch” to switch statement for if and else ifs.

--

--