All language subtitles for 054 Short-Circuit Evaluation.en_US

Beautiful job.

And up next, we have a short circuit evaluation, hopefully you're clear with that concept because

it is coming from the jobs group.

Now, I will try to cover the basics or if you need to brush up, then please do that, because, again,

this is just straight up JavaScript.

Or, of course, we will take a look at the react implementation of that set up.

And we're looking for conditional rendering, man.

We're looking for setup, of course, and short circuit file.

We save and there is short circuit and of course, we can get to that particular file file number two,

and this is what I'm talking about, if you need to Google how it works and just please do so, because,

again, everything we're going to talk about in this video is based on that.

So we have short circuit evaluation.

And the reason why I would want to use it, because in react, when we talk about the of sex, we talk

about the fact that it has to return a expression.

Correct.

Meaning it has to return a value.

And that's why we set up a expression.

So, for example, if I would have here a fragment and line within this fragment, if I would want to

set up a if statement where I have the expression this way, I work because as far as if it doesn't

return a value, so if I try to go here with a log and then say Hello world, it's not going to work.

And it's not because I didn't pass any condition over here is just not allowed in.

So this is why we will heavily work with short circuit operators as well as the temporary operator to

display something conditionally because we already covered it.

Of course, we have multiple terms, but what if I would want to have a one return?

But again, based on some condition, there's going to be either some data shown or hidden and stuff

along those lines.

So first, I'll coming out just so you can see that this will throw an error and not set up some state

value.

And also let's set up some returns.

So first, I'm going to go with some kind of text and also set text function that will be equal to use

state and then it's just going to be a complete value.

And now notice here I have some stuff that has been coming out so uncommented and I have first value

and the second value.

And in the first case, we have the OR operator and then in the second case we have the and operator

and I'll just see what are the values.

And I'm going to go with hatting one, I guess, and I'll just get first value.

First value online, I'm going to go with a one one more online.

Let's just look at the second second value.

And once I render, I can see that the first value is equal to a hello world.

And the second value I just have to value basically the way it works in JavaScript when we talk about

the or aren't and operators, for example, or if this is falsie meaning force.

And of course it is posi because it is an empty string, then we essentially return the second value.

That's why where we have the empty string that is falsie.

So that evaluates to false.

Then we have our operator and then essentially the second value, the one that is right from the operator,

will be returned.

And that's why when we take a look at the first value, that's where I can see the whole world.

Now, if all changes are an add one letter, meaning now it's not going to be a empty string now it's

not going to be falsie.

Now, essentially, it will evaluate the TRO.

You'll notice that now the value is OK.

So since this is Truthy now, it's not going to return a second value.

Now, essentially, it will return that first one.

Now, when we talk about and operator, it works a little bit differently where if this is Truthy,

which of course is now the case, then we will return the second value.

Now, if it is falsie like we had a previous case, then it's going to return that first value, which

of course, in our case is that empty string.

OK, now, of course, you can also log on line.

You can see second value in a console we should see, but it is going to be empty essentially.

OK, so if it is true, then it returns this one.

If it is not true, then it returns of that first one.

OK, so kind of the opposite.

One is the owner operator and then the second one is the operator.

All right.

Now why am I showing you all this?

Well, because we can use that when we are setting up the expression in a veejays.

That's why it is so important.

And I'll start by simply showing you the example of name.

So I'll leave this for your reference, and I think I'll come these ones out as well, just in case

you would need it.

But then let's imagine this scenario where what if I have a hundred one?

And then as far as the text, I would want to display that text that I have over here.

But the thing is, I also would want to set up some kind of default if it is a empty string.

So if I go here with text, everything is great.

But of course, since the text is empty string and nothing is displayed, correct.

So now I can use my or prayer and I can say, you know what, if the text is Halsy, then return some

kind of default value, just like we were doing here with the variable.

But of course, now we're doing that and react now.

So if the text is there are some great if the text is not there, then please return John Doe.

And of course, since it is falsie, it violates the false and now we're turning this round.

Now, if I'll add something here, if I say Peter now, of course, you'll notice that this is Truthy.

So now this gets returned.

OK.

Now, another thing you can do is, of course, use the and operator now and the operator we use a little

bit differently where again we will set up the Curlee Breshears.

And in here we're checking for a text value.

And if it is true, then we're returning that element.

OK, so in this case we were returning the element regardless, but using the end operator, we can

trigger the showing or the hiding of the component or the element in this case.

But you can also, of course, do it with components.

So, for example, if the text is true, then I'll say that I would want to display the whole world.

The world, correct.

Now, if the text is not true, meaning if it is going to be empty, then you'll see that nothing gets

displayed.

OK, so that is the difference in this case.

If it is true, then of.

We display the first one, if it is false, then we display whatever is on the other side of the Eruptor.

However, with and it is the opposite, if this is true, only then I will return this particular element.

If it is not true, then you can see that nothing will get rendered.

And by the way, you can double check that by looking at the elements.

Or notice, if you're checking the route, you can see that you have the container and the only one

displayed is this one.

Because this is false, the U.S. is an empty string.

That's why we're not returning it.

And of course, we can also do the opposite where I copy and paste and I'll say, you know what, if

this is false, then return so we can kind of flip it by using the not operate.

That is also the possibility.

And now you'll see that, of course, there's going to be a hello world on a screen.

Why?

Because now in this case, I'm saying, you know what?

If it is not true, if it is not true, then return it again.

Of course, will add some more dynamic set up a little bit later on.

But just keep in mind that everything that we are going to talk about and use and the examples and projects

later on is based on this short circuit evaluation that I covered a little bit in the beginning.

So if you need to go and research that, please do so.

But the way it works and react is when we use the proper if this will be true, meaning if this is going

to have rallied to true, then of this value will be written or if it is falsie false, then the value

on the other side of the operator will be returned.

However, when we talk about and if the value will be true, so if it will evaluate the true, then

of course we will return whatever is on the other side of the and operator.

However, if it is going to be false and of course we won't return anything now, we also have option

to check for the opposite value.

That is also the case.

So here the only difference is that I'm saying, you know what?

Show the hatting one if it is false, which of course it is false.

So it violates the false.

So we are in good shape.

So those are the basics of how we act.

Implements short circuit evaluation.