All language subtitles for 107 Short Circuiting (&& and __).en_US

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.