Jonas: In this video, we will look
at some more ways of taking decisions with JavaScript.
So you've learned about the if...else statement
in order to take decisions, but
there are more ways of doing this.
And so the first thing that we're
gonna look at is the ternary operator.
Which is also called the conditional operator
and it is an operator that basically allows us
to write like an if...else statement all in one line.
Let's take a look at how that works.
And again, I'm bringing back my first name variable here.
(typing)
And then we're also gonna set the age to 16.
And so now let's use the ternary operator,
in order to log to the console,
if John drinks a beer or if he drinks juice,
depending on his age.
Okay?
So, let's say age greater or equal to 18,
which is the legal age at which you could start drinking,
at least in Europe, maybe not in the U.S.
Okay? So we start here with the condition.
Then, we use the question mark.
And then we write, basically, what we want
to happen if this condition is true.
So this is like the if block, in an if...else statement.
So in this case, we want to log
to the console, console dot log,
(typing)
Drinks beer.
Okay, so that is the first part.
And now we also have to write the else block, okay?
And so for that, we use the colon
and then, let's actually go ahead and copy this part here.
(mouse clicks)
Drinks juice.
Okay, and that's actually it.
So this is the ternary operator.
And it's called ternary, because it has three operands.
So, basically three parts that interact with the operator.
So we have the condition first,
then we have the if block here, basically,
and then the else block.
So let's now test if that works.
And indeed, it now says, John drinks juice.
And that's because he is younger than 18.
If we set it to 22 let's say, then it will say,
John drinks beer.
Okay, let's take a look at another example,
because we can do even better and
assign values to variable using
the ternary operator in a very simple way.
So let's say that we wanted to find
a variable, saying what John can drink.
So let's say var drink, and now we can use
the conditional operator right here.
So age greater or equal than 18.
Then a question mark.
So basically this is to ask a question.
So, is John greater or equal than 18?
And if he is, well then we can say, beer.
And if he's not, then we can say, juice.
And that's it.
So basically the result of this entire code here,
will be beer if the age is greater or equal than 18,
and it will be juice if not.
And this result will then be assigned to the drink variable.
Okay?
So again, this is an operator here again
and so an operator always has a result just like
we saw before with any of the other operators, okay?
And so this operator, this ternary operator
is executed of course, before the assignment operator.
Remember? This one is also an operator.
And so first, we execute this part
which as a result will have either beer or juice
and then that result will be assigned
to the drink variable.
And so let's log it to the console now,
just to make sure that everything is working again.
(mouse clicks)
And indeed, it says beer.
(mouse clicks)
14 of course, he will drink juice.
Now just to compare what we would
have to do without the ternary operator,
let's write out the same thing with an if...else statement.
So we would have to write,
(typing)
so, var (typing) drink equals beer, in this case,
and then the else plug
(typing)
and then here juice.
Okay?
And so that would be the alternative here of using this.
And so what do you think looks better?
Well it's obviously the ternary operator, right?
At least I prefer it very much
about having to write something like this,
in case I'd be want something as simple
as just assigning a value to a variable
based on a simple condition like this, okay.
So of course you're not going to do
a ternary operator for a rather complex decision,
but in case that we have something simple like this,
well it's perfect to not have to
use an if...else statement like this.
So let me comment out this part here
just so you know that this is the same.
And alright.
So we talked about the ternary operator,
as an alternative way of writing conditionals
but there is actually even more.
And that is the switch statement.
And this is like a huge if...else statement,
where we have multiple else if clauses, basically,
and so we can replace that with an easier
to understand syntax, okay?
Now I'm not a big fan of this myself,
but you will see it around when you
search for like tutorials on the web,
and so it's important that you also
know the switch statement.
So let's add some comments here before we start.
(typing)
So, ternary operator, and then,
(typing)
the switch statement.
Alright, so let's define a job here first.
(typing)
And let's say that John is a teacher.
And so now we can use the switch statement.
Give us some more space here. Alright.
So we say switch, and in here between these parentheses,
we put what we want to task, what we want to evaluate.
Okay, and this will make a lot more sense
after you see the entire switch statement.
So for now just let's write the job here,
and you will then understand why it works like this.
So we switch the job, basically.
And then, we can add a couple of case clauses.
So we say case, and then we can say,
(typing) for example, teacher.
Then the colon, and then in the next line,
we say what we want to happen.
So in this case, let's say
(typing)
first name,
(typing)
teaches kids how to code.
So, that's what a teacher does. Let's say.
So again, if the job is equal to teacher,
then this code here will be executed.
Alright?
Let's add a couple more.
So case, driver, let's say, and now
I'm just gonna grab this piece of code here.
Let's say a driver drives an Uber in Lisbon.
And so this is the basic functionality
of the switch statement, okay?
So we can add a couple of more cases even.
So let's say we also want designer,
(typing)
and then again our console dot log.
Let's say, (typing) designs beautiful websites.
Alright.
So what we're doing here is, again,
to compare the job to each of these different cases.
So if the job is teacher, then do this.
If the job is driver, then do this.
If the job is designer, well, then, do this.
Now, what we have to do here also,
is to add a break statement.
So in here we have to say break, because otherwise,
it will keep evaluating these next cases.
Okay, so even if the job is teacher,
it will then keep evaluating these other cases.
It will keep basically looking at them
and see if they are also true.
But we don't want that to happen,
and so we have to use the break key word
at the end of this block that we want to execute.
(typing)
So, break. And here, break (typing) also.
Now if none of this here applies, we can then add a default.
Okay and so all we have to do is to say default.
And then define what happens in that case.
So in this case, well, let's just say
that (typing) John does something else.
And then here, of course, we don't need to break
because it's already the last case here anyway.
Okay?
So if none of this applies, so these
are basically like the else if,
in the if...else statement,
so in an if...else statement, this would be
if job equals teacher, then do this,
else if driver, then do this here,
else if designer, then do this.
And then else, do this. Right?
And so this default here is basically
our last else in an if...else statement.
Alright? So let's try it out.
And so, indeed, it now says that
John teaches kids how to code, because he is a teacher.
Now if we say that he's a driver,
then of course, drives an Uber in Lisbon.
Now let's say that he is cop, and so now
none of these applies, and so we should end up with,
John does something else.
Great.
Now we can also have multiple case clauses
for the same piece of code that we want to execute.
So for example, if you want to execute
this code here, if the job is a teacher,
or also, let's say instructor,
then we can add simply another case here.
So case,
(typing)
instructor, and then this piece of code here
will also be executed if we say instructor.
Just to finish, let's try out that.
And yeah, so it still works here as it should.
So this is here again, a simple way
of replacing a huge if...else statement.
For example, something like this,
where we have this if, and then
else if, else if, and then else.
Or it could be even longer, and so
sometimes a switch statement looks a bit cleaner
than having all of these blocks like this.
Okay?
And actually, since we're working on it,
let's actually go ahead, copy this piece of code,
and try to replace this if...else statement here
with a switch, because that's actually
gonna work in a slightly different way,
and so it's a great opportunity
to show you how that could work.
So this first switch that I showed you here,
basically simply switches a variable
and compares all of these cases to that variable.
But here we have this number ranges,
and so it works slightly different,
and so it's a great exercise to do this one here as well.
So, to translate it, basically to a switch statement.
So in this case what we want to switch, is true.
Okay, so we basically want to compare
each of the expressions below,
that we're gonna put here in a second, to true.
And this is a trick to simply make the switch work
as an if...else statement with ranges.
So, our first case will be, case, age, less than 13.
And, in that case, it will then
log this piece to the console,
and then don't forget to break.
(typing)
Okay, then the next case is this one,
and let's actually go ahead and copy it,
because we already know how it works at this point,
and then log this here to the console.
So that John is a teenager, and then let's break out of it.
So let's complete the code here, and then
take a closer look at it and see how it works.
Okay?
So, for this case, we want to log
this part into your console, then break out of it.
And now finally, we have the else part here.
And so for the else part, we are
going to use such as before, the default.
So default, and then, log that John is a man.
Alright? And so that's actually it.
So we can get rid of this, and so
we already translated it here to the switch statement.
So we now have all of these conditions here, basically,
not as strings, as we had before, so in this case here,
and this is the more usual case
of using the switch statement, okay?
So where we have like a string
that we want to compare with some variable.
In this case here, we have basically
this logical expressions here,
that will turn out to be either true or false.
And so for example, if this here turns out to be true,
so if the age is between 13 and 20,
well then this here is true and
all of the others are false.
And remember that we switched true.
And so the case that will be true
will then be the one that is executed.
Okay so let's try that out.
And the age I think is not, actually it is defined as 14.
Let's put it again here.
So we don't have to go up and down to test this.
So let's say that he is 10 now, and so let's check it out.
So John is a boy. Great.
Change it to 17, now he's a teenager.
Now 22 again, a young man.
(mouse click)
And, a man.
So all of these now work.
So these are two ways of using switch statements,
and they can be useful again in case
that we have a long if...else statement
with lots of else if's.
So this can look a bit cleaner here. Alright.
And so that's three ways in which
we can write conditional code.
So the if...else statement, the ternary operator,
and the switch statement.