If-Else Traffic Light0:00
A switch statement is used to perform different actions based on different conditions. I like to think of them as an alternate way to write if-statements, if you have multiple conditions to check and have multiple else if. Let's start with an example, and we'll write it using if-statements first. So let's say const, but we have a traffic light. And this will either be green, yellow, or red, just like a normal traffic light, and we'll have a corresponding message for it. So let's make it yellow for now, and let's go ahead and make our if-statement. So if, say, trafficLight is equal to, and we'll use triple equals here, like we've been doing.
say const log stop. Okay, and we don't have to add an else case here, but I'm going to add it anyways. So let's just say else, and for this we'll just say const log traffic light is broken, if it's not one of these three colors, okay? And if I run this, we have our variable set to yellow, so we are getting this case here. Now this is perfectly fine, but if you want an alternate way to write it, we can use switch-statements. So let me show you how to do that. We have to keep our variable, we'll leave this if block as well, but now we can say switch as a keyword, and what are we switching on? In this case, we want to switch on the traffic light variable.
Convert to Switch1:48
switch as a keyword, and what are we switching on? In this case, we want to switch on the trafficLight variable. So that's going to change, and we'll have different cases for them. So let's say switch trafficLight, and let me just put a space here, you don't have to. And now we have different cases similar to our ifs or else ifs. But in this case, we have to use the case keyword. So first we need our curly braces, then we can define our different cases. So let's start with green, so say case green, and we'll put a colon here, and then within here is where we can write the code to execute if the case is true. So again, we'll just grab what we have in here, const logGo, and you can have multiple
here is where we can write the code to execute if the case is true. So again, we'll just grab what we have in here, const log, and you can have multiple lines of code here, but for now, this const log is fine, and we have to add the break keyword that says, if you encounter this case, execute this code, and then stop. So when you're using ifs and else ifs, this happens automatically, but using a switch statement, you have to explicitly tell it to stop using the break statement. So let's handle the other cases as well. We have yellow, so let me just copy this, let's paste this in here, let's say yellow, let's say slow down, and we have red, and that is stop. So I will grab this, paste that in, and I'll say red, and there should be stop.
Strict Equality in Switch3:40
that in there, and we don't need a break statement here for the default case. Let's save that, and it still works. Let's change our variable up here to green, that should still work, and let's try red as well. Cool. So again, these two are equivalent, one's making use of if statements and else if statements, and one is making use of a switch statement. Now, it's important to note here that when you use a switch statement, then it's checking for strict equality. So it's checking if trafficLight === green for this case, so similar to what we
Switch with Ranges4:06
for strict equality. So it's checking if trafficLight triple equals green for this case, so similar to what we have up here. So again, it's using strict equality with three equal signs, so it checks the type and the value. Now, what if your condition is not the equality operator, and say you wanted to use the comparison operator? So for example, less than or greater than. So how would we do that? So for example, from the last video, we had our letterGrades, let me just paste that
So how would we do that? So for example, from the last video, we had our letter grades, let me just paste that code in here. So we have these cases, A, B, C, D, or F, based on the range of your grade. And let me just bring up Chrome here again, and if I save this, our case should be letter grade A. But in this case, it's not using the ===. So how do we use this using a switch statement? So let's go ahead and try that out. So let's grab the switch statement we did up here and change it up. So let's say switch.
So let's grab the switch statement we did up here and change it up. So let's say switch. So you may think you want to switch on the grade here. And let's try that out first. So switch grade. And remember, our grade is a variable right here, in this case, 82. And we can define our different cases here. So we have grade greater than or equal to 80, and so on. So let's try this. And we can console.log letterGrade A, just like in our if statement.
Fall-Through Without Break6:18
and then put your conditions directly within the case here. And the last thing I want to take a look at is what's known as fall through. And that has to do with not adding a break statement here. Now, this is not as common. I personally don't use this very often, if ever. But if you want, you can skip the break statement to sort of group similar conditions together. So let me show you an example here. I got this example from the Mozilla WebDocs. So let's define an animal here and say giraffe to start. And we'll define different animals that are not extinct and a few that are extinct.
So let's define an animal here and say giraffe to start. And we'll define different animals that are not extinct and a few that are extinct. So let's switch on the animal. We're just checking for strict equality here. Let's add our curly braces, and let's say case. And for all of these cases, we're sort of grouping them together, but we won't add the break statement. So these will be animals that are not extinct. So say cow. And we have to add a colon here.
Just to show you that it executes this code. I am a cow. And how about we add one for a giraffe as well. So again, our variable is cow. It's going to match this, but there's no break statement. So it keeps going. So it will say I am a cow. It's going to run this as well. There's no break statement. It's going to say I am a giraffe. And it will eventually get to the pig case.
This is less known as fall through when you don't make use of the break statement. But generally speaking, you do want to use it. So yeah, that's switch statements. It's an alternate way to write your code if you have multiple conditions. And you might find this code more readable than the traditional if statement.
