Let's learn about the switch statement,
which is an alternative way
of writing a complicated if/else statement,
when all we want to do is to compare one value
to multiple different options, basically.
So in this example, let's say we have a weekday variable
and for each day there is a different activity.
So basically we're gonna map one activity to each day.
So let's say day, and I'm setting it here to Monday.
Now, maybe you're wondering
why I'm basically hard coding all these variables
and how this would work in the real world.
Well in the real application,
that's used by users in a browser
usually most of the data comes from user input.
And so then we wouldn't be hard coding all of this stuff.
Okay, but right now, well we are just learning how to code
and so it's absolutely no problem at all to just hard code,
all of these values here, okay?
Now anyway, going back to our example here,
let's now essentially map one activity to each day.
So Monday, Tuesday, Wednesday,
Thursday, Friday, Saturday, and Sunday.
And for that, we could use an if/else statement
with multiple ELS if blocks,
but we can also use the easier to use switch statement.
So let me just write how that works.
And then I'm gonna explain it in a bit more detail.
So what we're switching is basically the day.
So this is what we're gonna compare to multiple options.
Then we need to curly braces to define a block,
and then we can define cases.
So let's say case, Monday then there's colon
and notice how it's a colon and not a semi-colon like this,
then another indentation
and then here comes to code that we want to do.
So as always, we lock something to the console
and once more in a real world app,
we will of course not be logging stuff
to the console all the time.
This is once more, just so that we can learn
how all this different stuff works.
So let's say on Monday I plan my course structure
and here we can actually execute multiple lines of code
and we don't need curly braces for that.
So after the case and the colon,
all the lines are then executed, okay?
And the syntax of the switch statement
is actually a little bit unusual.
So it's unlike anything else in JavaScript,
but well, that's just how it is implemented, I guess.
So anyway, we will execute two console.logs here.
So the second one is go to coding, meet up, okay.
So basically what this will do is it will compare day
to Monday here in a strict equality way.
So this here is basically writing day equal Monday.
And if this is true,
then this code here will be executed, okay.
Now after this, we actually need this break statement
and you will see why in a second.
And now let's add the next case here.
So case Tuesday.
So basically we're gonna do one
for each day of the week here.
So let's say prepare theory videos,
and then another break.
And I wished that preparing theory of videos
would only take one day, but it doesn't, okay.
So Wednesday is the next one.
And actually we can do a nice little trick,
which is to run the same code for two different values.
So all we have to do is specify this case
and then we can specify another case right after it.
So let's say Thursday here.
And so whatever we write here will then be executed
for both Wednesday and Thursday.
So without needing any logical operators,
as we would need with an if/else statement,
and actually we're gonna translate this
into an if/else statement after we're done here
so that we can analyze the difference.
So let's say Wednesday and Thursday,
I write code examples.
On Friday, I record videos
and here's a small bug.
So it's a colon, as I was saying here,
and then let's do Saturday
and also the same for Sunday.
So console.log, and then here, enjoy the weekend, okay.
And then, oh, I actually am forgetting the breaks here.
So break and I will show you in a second,
what happens without the break,
But anyway, to finish, we can also set a default.
And so the default is gonna be executed
if all the other cases fail.
So default just like this.
And then here we can simply say console.log,
not a valid day.
So basically we're using this for an invalid weekdays.
It's basically like an else block
at the end of a long if/else statement.
Okay, so let's now check out the results.
And indeed, we get these two logs here from here.
So from line 379 and 380,
which are exactly these two lines of code,
then if I change it to, let's say Wednesday,
Wednesday like that, we get write code example.
And on Thursday it showed a yield to the same result
because yeah, we did this here for these two days.
Now, I guess I wrote something wrong
and actually it's here Thursday, right?
But so you saw that actually
since this option here was nowhere to be found
we actually got to the default block,
which has done not a valid day,
but now we should get the write code examples.
Now without the break here
and let me comment it out just for demonstration.
If we put this back to Monday,
then let's see what happens if we load.
And so now we get three outputs,
we get this one and this one and this one.
So that's the one immediately after Tuesday.
And this happens because without the break,
the code simply continues executing and it stops here
because here we have to break.
But if I remove this break as well,
then it would continue down this structure.
And so after each block here,
we need to tell it to stop essentially.
And so now it's fixed and it works just fine.
Okay great, that's how the switch statement works.
And remember that this actually does a strict comparison.
So it does it like this,
here it does if today is equal to Monday,
then execute this.
If today is equal to Tuesday,
execute this and so on and so forth.
So this was really designed for equality
and not for like comparing stuff.
It is technically possible to do that with some workarounds,
but that's not the goal of the switch statement.
Now just as a fun exercise
and to get a better idea of how this actually works
and also how the if/else statement works
I want to challenge you to write this same logic,
but this time as an if/else statement, okay?
And to do that, you will have to use a logical operator
to translate the case of the Wednesday and Thursday case.
So think about what happens.
So basically write code examples should be executed
if today is Wednesday or Thursday, right?
So whenever the date is one of these two,
so it's impossible to be and Wednesday and Thursday
because, well two days cannot occur at the same time.
So keep that in mind and yeah, pause the video here
and really try to do this one on your own.
Okay, did you do it?
Well, let me just quickly show you how it's done.
So remember that we're using strict comparison.
So the triple equals.
So if it's Monday, then do this and I will,
after finishing the structure, I will just go ahead
and copy the console logs from up there.
Then we need an else/if for the case it's Tuesday,
then we need another else/if in case the day is Wednesday
or if the day is Thursday
and again, the same error.
And you see that we're writing quite a lot
of repetitive code, especially always the day
and then the triple equals.
So and that's what the switch statement
kind of tries to avoid.
So else/if, and then if the day is equal to Friday
to this else/if the day is equal to Saturday
or the day is equal to Sunday,
and finally also the else block
in case that we have an invalid date.
So let's grab these here and note that in this case,
we of course don't need the break
because JavaScript will only execute one of these blocks.
So Friday and now Tuesday,
and finally Monday,
these two activities,
okay, give it a save and now I'm gonna reload here.
And so now we should expect the same result here,
but twice once coming from the switch statement
and once from this big if/else block.
And indeed it works just the same.
That's just try another one,
say Friday, just to make sure.
And yeah, the result is the same.
And so this logic here
does basically exactly the same as this.
We simply wrote it with a different syntax, okay.
So with the switch statement,
we have to write a little bit more code,
but in my opinion, it's also a lot more readable,
which means that this one is easier to understand
if you just read the code.
Here, we have a lot of this repetitive code
and all of these curly braces,
and it just looks a little bit weirder.
At least that's my opinion.
But of course, everyone is different.
Now the switch statement
is actually becoming less and less used,
but you should still know about it
because there is definitely still a place for it sometimes.
And actually in this example, for instance,
I would actually prefer to use the switch, okay.
But again, that's down to your personal preference
and it's good that you start basically developing
your own coding style into what you like the most.