Instructor: Let's go back to two logical operators
that we already used before,
but we didn't use their full potential yet.
And I'm talking about the AND operator
and the OR operator,
and how we can use them
for something called short circuiting.
So up until this point,
we have used logical operators
only to combine Boolean values.
But the truth is that we can do a lot more
with the AND and OR operators.
So let's start with the OR operator here.
And so let me log, three,
or Jonas.
So that's something that we didn't do before,
which is to use basically non Boolean values here
as the operands, okay?
So let's see what the result of this is gonna be,
and for some reason I have to reload here,
and you see that the result is three.
And so that means that the results
of the OR operator doesn't always
have to be a Boolean.
And so that's something that I didn't show you before.
So there are three properties
that I didn't tell you before about logical operators.
So first, they can use any data type.
They can return any data type
and they do something
called short circuiting,
or as we also call it short circuit evaluation.
So in fact, here we used two values
that are not Booleans, okay?
And it then returned a value
that was not a Boolean.
And now about short circuiting,
in the case of the OR operator,
short circuiting means that if the first value
is a truthy value,
it will immediately return that first value.
So that's exactly what we see here
with the three which is a truthy value.
So again, if the first operand is truthy here
in the OR operator,
then the other operand will not even be evaluated.
So JavaScript will not even take a look at it.
And so that's what we mean with short circuiting.
And now let's do some more,
let's use the empty string
or Jonas now.
Then let's say, true or zero,
and then let's say undefined or null.
And now before taking a look at the result,
try to take a guess of what the results
of these three operations here will be.
So did you do that?
So let's see.
So the first result of this one here is Jonas.
And so that's because this here is a falsy value.
And so then, the second operand
will actually also be evaluated, and that's Jonas
and it will then be returned.
And so here we see again that the result
of the OR operator
doesn't have to be a Boolean.
It will simply return the truthy value here.
Next up we have true or zero.
And so this first value here is truthy,
and in fact, it's even true,
and so therefore that will simply be the result
of the operator.
And so that's what we see here.
And then, here we have undefined or null,
and as you already know, undefined is a falsy value,
and so we then go to the second operand,
so there is no short-circuiting,
and so that's then the one that's gonna be returned.
So here we see null,
and that happens even though null
is also a falsy value.
And let's actually now generalize this
to more operators.
So I can give you basically the general rule
of how this operator works,
no matter with how many values.
So let's say undefined or zero
or empty string,
or hello,
or 23,
or null.
So what do you think that the result of this one will be?
And it is hello.
And that's essentially because hello here,
is the first truthy value
in this chain of OR operations.
So we start with this one,
so undefined is falsy.
And so then we go to the next one, which is also falsy.
And so then to the next one, which is also falsy,
and then we get hello
and hello is truthy
and so therefore it will short circuit the entire evaluation
and it will be the returned value, okay?
And if we think about this,
then it actually makes sense.
Because remember, in the OR operation,
the result is true,
if at least one operand is true, right?
So if the first operand is already true,
for example, as it happens here,
then JavaScript doesn't even have to look
at the other values because the result of the expression
will already be true anyway.
And so it will short circuit and then simply return
that first result.
And now let's see a more practical application of this.
So let's say that there might be a property
on the restaurant object with the number of guests.
So something like this:
Restaurant dot num guests,
but again, we don't know if it exists.
However, we want to basically define a variable
based on this number of guests.
And we want to set a default value
if this doesn't exist.
So basically, what we want to do is this.
So guests, I'm gonna call it one here,
and so what we want to do is this,
we want to check if it exists,
and then the result should be
actually restaurant dot num guests,
but if it doesn't exist,
then we want to set a default value of 10.
So let's log guests one to the console,
and so you see that now it is 10.
And so that's because restaurant dot num guests
doesn't exist, so this is undefined,
and so therefore 10 will be the result
of this turnery operator, okay?
But now if we do set the property
like this,
for example, to 23,
then guests one is gonna be 23.
So, but instead of doing this,
we can take advantage of short circuiting
and the OR operator.
So let's again write restaurant dot num guests,
and then simply or 10.
So let's analyze why this works.
And first actually store this into a variable.
So guests two
equals this
and then console log guests two.
So let's take a look at why this works
and starting again with disabling this.
And so right now restaurants dot number of guests
is undefined.
So it's a falsy value,
and as we already know,
then the second value here
will be the result of the OR operator.
And so, that's basically our default value of 10.
So let's take a look and indeed we get 10 here.
But now if we put it back on,
then restaurant dot number of guests is now 23,
which is a truthy value,
and therefore the OR operator short circuits
and it will become the return value,
or let's say the result of the operation.
And so now indeed, we get 23.
And so this is a way easier method
of setting default values
than having to deal with this turnery operator
or even worse an if else statement, okay?
So that is short-circuiting with the AND operator,
but we can also do the same with the OR operator,
but the AND operator also has short circuiting.
So let's take a look
and it will start by log something to the console here,
like a string to separate,
so that we don't get confused by the results
and the console then.
Oh, but before we talk about the AND operator here,
there's actually one more thing
that I need to tell you here,
which is that both of these solutions here,
this and this will not work
when the number of guests is zero.
So let's see what happens.
And so now they're both 10.
And that's not the result that we want,
but given what we already know, it makes sense
because this is now zero,
so it's a falsy value,
and therefore the second one here will be the result
of the operation and therefore assigned to guests two.
However, zero is the real number of guests.
And so that's the value that we actually
would guests two to have.
But instead it's set the default value of 10.
So that's obviously not what we want
and we will explore a great solution to this problem
actually in the next lecture.
But now, let's talk about the AND operator.
And basically when it comes to short circuit evaluation,
the AND operator works in the exact opposite way
of the OR operator.
So let's see.
Zero and Jonas.
And now the result of this is zero.
And so what this means is that
the AND operator short circuits,
when the first value is falsy.
And then immediately returns that falsy value
without even evaluating the second operand.
So again, that's exactly the opposite
of what happens with the OR operator,
which short circuits when the first operator is true.
So let's now set it to a true value here,
or actually a truthy value.
And then at this case, Jonas is actually returned.
So when it is truthy, it means that the evaluation continues
and then simply the last value is returned.
And once again, this makes sense if we think about it.
So the AND operator is only true
if all the operands are true.
And so, if the first one here is false,
then it means that the entire result of the AND operation
will already be false anyway.
And so there is no need to even look
at any of the other operands.
So I think that's a good way to memorize
how both of them work.
Anyway, let's again generalize.
Add this to multiple operands here
and 23,
and null,
and Jonas,
and so what do you think this time the result will be?
Well, let's see.
And it is indeed null.
And to understand why let's apply the same logic as before.
So this is a truthy value,
and therefore the evaluation continues,
23 is also truthy,
but then null is a falsy value
and therefore evaluation no longer needs to continue
because at this point, the whole result
of the end operation is gonna be false anyway.
And then as a result,
this is then simply the value that's gonna be returned
and it's short circuits the rest of the evaluation.
So it will not even take a look at Jonas here.
Alright.
And so now let's see another practical example.
So, let's say
if restaurant dot order, order pizza.
So basically we're checking if this method exists
and then if it does exist,
we want to call it.
So restaurant dot order pizza,
let's say with mushrooms
and spinach.
So many times we can use the AND operator
to actually avoid an if statement like this one,
where all we want to do is to check
if a certain property or value actually exists.
Okay, so in this case here,
what we're doing is to basically pretending
that we don't know if order pizza exists.
And so we first check if it exists
and only then we execute it.
And so this now gives us mushrooms and spinach,
but with the knowledge that we gained
about the AND operator,
we can do this in a simpler way.
So we can say restaurant dot order pizza,
and then basically if restaurant dot order pizza
does not exist, so it's undefined,
it will then short circuit the evaluation
and nothing else will happen.
And so that's essentially exactly the same
as this if block here is doing.
All right, but if it does exist.
So if it's a truthy value,
then the second part here will be evaluated.
And so here in this second operand,
we can then call the function.
Okay.
And it's perfectly fine to use this operands,
the second operand` here to call a function.
We can put anything here.
It doesn't just have to be a single value.
Now I'm not saying that you should go ahead
and replace all your if statements
with the AND or the OR operators,
so please definitely don't do that
because it's gonna make your code very hard
to read in the future.
But anyway, let's now summarize.
So the OR operator will return the first truthy value
of all the operands,
or simply the last value if all of them are falsy.
So that's what happened here, right?
On the other hand,
the AND operator will return the first falsy value
or the last value if all of them are truthy.
And as for practical applications,
we can use the OR operator to set default values,
and we can use the AND operator
to execute code in the second operand
if the first one is true.
So play around some more with this maybe,
and then let's just move on to the next video
where we will solve this problem that we had here
with this OR operator
and this zero.