Original subtitles

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.