1 00:00:00,210 --> 00:00:00,900 Beautiful job. 2 00:00:00,930 --> 00:00:08,100 And up next, we have a short circuit evaluation, hopefully you're clear with that concept because 3 00:00:08,100 --> 00:00:09,970 it is coming from the jobs group. 4 00:00:10,080 --> 00:00:20,040 Now, I will try to cover the basics or if you need to brush up, then please do that, because, again, 5 00:00:20,040 --> 00:00:22,200 this is just straight up JavaScript. 6 00:00:22,470 --> 00:00:29,040 Or, of course, we will take a look at the react implementation of that set up. 7 00:00:29,370 --> 00:00:32,810 And we're looking for conditional rendering, man. 8 00:00:32,820 --> 00:00:36,390 We're looking for setup, of course, and short circuit file. 9 00:00:37,280 --> 00:00:44,990 We save and there is short circuit and of course, we can get to that particular file file number two, 10 00:00:45,260 --> 00:00:51,920 and this is what I'm talking about, if you need to Google how it works and just please do so, because, 11 00:00:52,010 --> 00:00:58,160 again, everything we're going to talk about in this video is based on that. 12 00:00:58,340 --> 00:01:01,220 So we have short circuit evaluation. 13 00:01:01,550 --> 00:01:09,200 And the reason why I would want to use it, because in react, when we talk about the of sex, we talk 14 00:01:09,200 --> 00:01:13,670 about the fact that it has to return a expression. 15 00:01:14,060 --> 00:01:14,450 Correct. 16 00:01:14,600 --> 00:01:16,540 Meaning it has to return a value. 17 00:01:16,550 --> 00:01:18,670 And that's why we set up a expression. 18 00:01:19,400 --> 00:01:27,020 So, for example, if I would have here a fragment and line within this fragment, if I would want to 19 00:01:27,020 --> 00:01:34,910 set up a if statement where I have the expression this way, I work because as far as if it doesn't 20 00:01:34,910 --> 00:01:43,880 return a value, so if I try to go here with a log and then say Hello world, it's not going to work. 21 00:01:44,330 --> 00:01:50,660 And it's not because I didn't pass any condition over here is just not allowed in. 22 00:01:51,290 --> 00:01:59,980 So this is why we will heavily work with short circuit operators as well as the temporary operator to 23 00:01:59,990 --> 00:02:03,260 display something conditionally because we already covered it. 24 00:02:03,290 --> 00:02:07,820 Of course, we have multiple terms, but what if I would want to have a one return? 25 00:02:08,240 --> 00:02:14,960 But again, based on some condition, there's going to be either some data shown or hidden and stuff 26 00:02:14,960 --> 00:02:16,170 along those lines. 27 00:02:16,550 --> 00:02:23,750 So first, I'll coming out just so you can see that this will throw an error and not set up some state 28 00:02:23,750 --> 00:02:24,130 value. 29 00:02:24,380 --> 00:02:27,900 And also let's set up some returns. 30 00:02:28,370 --> 00:02:34,700 So first, I'm going to go with some kind of text and also set text function that will be equal to use 31 00:02:34,700 --> 00:02:38,800 state and then it's just going to be a complete value. 32 00:02:39,200 --> 00:02:46,450 And now notice here I have some stuff that has been coming out so uncommented and I have first value 33 00:02:46,460 --> 00:02:47,480 and the second value. 34 00:02:47,840 --> 00:02:54,320 And in the first case, we have the OR operator and then in the second case we have the and operator 35 00:02:54,950 --> 00:02:57,860 and I'll just see what are the values. 36 00:02:58,340 --> 00:03:04,220 And I'm going to go with hatting one, I guess, and I'll just get first value. 37 00:03:05,220 --> 00:03:11,740 First value online, I'm going to go with a one one more online. 38 00:03:11,770 --> 00:03:15,150 Let's just look at the second second value. 39 00:03:15,750 --> 00:03:22,260 And once I render, I can see that the first value is equal to a hello world. 40 00:03:22,740 --> 00:03:30,060 And the second value I just have to value basically the way it works in JavaScript when we talk about 41 00:03:30,060 --> 00:03:40,560 the or aren't and operators, for example, or if this is falsie meaning force. 42 00:03:40,830 --> 00:03:49,970 And of course it is posi because it is an empty string, then we essentially return the second value. 43 00:03:50,650 --> 00:03:54,300 That's why where we have the empty string that is falsie. 44 00:03:54,630 --> 00:03:56,220 So that evaluates to false. 45 00:03:56,470 --> 00:04:04,800 Then we have our operator and then essentially the second value, the one that is right from the operator, 46 00:04:05,040 --> 00:04:06,250 will be returned. 47 00:04:06,600 --> 00:04:10,900 And that's why when we take a look at the first value, that's where I can see the whole world. 48 00:04:11,220 --> 00:04:18,390 Now, if all changes are an add one letter, meaning now it's not going to be a empty string now it's 49 00:04:18,390 --> 00:04:19,380 not going to be falsie. 50 00:04:19,560 --> 00:04:22,290 Now, essentially, it will evaluate the TRO. 51 00:04:22,680 --> 00:04:26,650 You'll notice that now the value is OK. 52 00:04:27,240 --> 00:04:33,090 So since this is Truthy now, it's not going to return a second value. 53 00:04:33,450 --> 00:04:36,360 Now, essentially, it will return that first one. 54 00:04:37,020 --> 00:04:43,860 Now, when we talk about and operator, it works a little bit differently where if this is Truthy, 55 00:04:44,100 --> 00:04:49,140 which of course is now the case, then we will return the second value. 56 00:04:49,590 --> 00:04:58,020 Now, if it is falsie like we had a previous case, then it's going to return that first value, which 57 00:04:58,020 --> 00:05:01,210 of course, in our case is that empty string. 58 00:05:01,810 --> 00:05:05,370 OK, now, of course, you can also log on line. 59 00:05:05,370 --> 00:05:14,330 You can see second value in a console we should see, but it is going to be empty essentially. 60 00:05:14,580 --> 00:05:18,780 OK, so if it is true, then it returns this one. 61 00:05:19,080 --> 00:05:23,230 If it is not true, then it returns of that first one. 62 00:05:23,940 --> 00:05:25,950 OK, so kind of the opposite. 63 00:05:25,980 --> 00:05:31,180 One is the owner operator and then the second one is the operator. 64 00:05:31,500 --> 00:05:31,940 All right. 65 00:05:32,280 --> 00:05:34,520 Now why am I showing you all this? 66 00:05:34,530 --> 00:05:41,120 Well, because we can use that when we are setting up the expression in a veejays. 67 00:05:41,760 --> 00:05:44,130 That's why it is so important. 68 00:05:44,550 --> 00:05:50,220 And I'll start by simply showing you the example of name. 69 00:05:50,640 --> 00:05:56,310 So I'll leave this for your reference, and I think I'll come these ones out as well, just in case 70 00:05:56,310 --> 00:05:56,910 you would need it. 71 00:05:57,270 --> 00:06:02,430 But then let's imagine this scenario where what if I have a hundred one? 72 00:06:02,850 --> 00:06:09,320 And then as far as the text, I would want to display that text that I have over here. 73 00:06:09,690 --> 00:06:16,040 But the thing is, I also would want to set up some kind of default if it is a empty string. 74 00:06:16,350 --> 00:06:20,100 So if I go here with text, everything is great. 75 00:06:20,460 --> 00:06:24,660 But of course, since the text is empty string and nothing is displayed, correct. 76 00:06:24,990 --> 00:06:33,510 So now I can use my or prayer and I can say, you know what, if the text is Halsy, then return some 77 00:06:33,510 --> 00:06:37,050 kind of default value, just like we were doing here with the variable. 78 00:06:37,050 --> 00:06:41,010 But of course, now we're doing that and react now. 79 00:06:41,040 --> 00:06:48,270 So if the text is there are some great if the text is not there, then please return John Doe. 80 00:06:48,600 --> 00:06:54,700 And of course, since it is falsie, it violates the false and now we're turning this round. 81 00:06:55,230 --> 00:07:01,830 Now, if I'll add something here, if I say Peter now, of course, you'll notice that this is Truthy. 82 00:07:02,160 --> 00:07:04,260 So now this gets returned. 83 00:07:04,800 --> 00:07:05,150 OK. 84 00:07:05,550 --> 00:07:12,150 Now, another thing you can do is, of course, use the and operator now and the operator we use a little 85 00:07:12,150 --> 00:07:16,790 bit differently where again we will set up the Curlee Breshears. 86 00:07:17,220 --> 00:07:20,250 And in here we're checking for a text value. 87 00:07:20,460 --> 00:07:25,780 And if it is true, then we're returning that element. 88 00:07:26,220 --> 00:07:32,850 OK, so in this case we were returning the element regardless, but using the end operator, we can 89 00:07:33,030 --> 00:07:39,440 trigger the showing or the hiding of the component or the element in this case. 90 00:07:39,660 --> 00:07:42,170 But you can also, of course, do it with components. 91 00:07:42,510 --> 00:07:48,330 So, for example, if the text is true, then I'll say that I would want to display the whole world. 92 00:07:49,440 --> 00:07:50,790 The world, correct. 93 00:07:51,250 --> 00:07:58,920 Now, if the text is not true, meaning if it is going to be empty, then you'll see that nothing gets 94 00:07:58,920 --> 00:07:59,410 displayed. 95 00:07:59,910 --> 00:08:02,510 OK, so that is the difference in this case. 96 00:08:02,670 --> 00:08:04,490 If it is true, then of. 97 00:08:05,190 --> 00:08:12,090 We display the first one, if it is false, then we display whatever is on the other side of the Eruptor. 98 00:08:12,420 --> 00:08:22,500 However, with and it is the opposite, if this is true, only then I will return this particular element. 99 00:08:22,830 --> 00:08:27,540 If it is not true, then you can see that nothing will get rendered. 100 00:08:27,750 --> 00:08:30,540 And by the way, you can double check that by looking at the elements. 101 00:08:31,650 --> 00:08:36,390 Or notice, if you're checking the route, you can see that you have the container and the only one 102 00:08:36,390 --> 00:08:37,590 displayed is this one. 103 00:08:38,830 --> 00:08:42,320 Because this is false, the U.S. is an empty string. 104 00:08:42,610 --> 00:08:44,670 That's why we're not returning it. 105 00:08:44,980 --> 00:08:50,770 And of course, we can also do the opposite where I copy and paste and I'll say, you know what, if 106 00:08:50,770 --> 00:08:56,380 this is false, then return so we can kind of flip it by using the not operate. 107 00:08:56,560 --> 00:08:58,060 That is also the possibility. 108 00:08:58,330 --> 00:09:02,890 And now you'll see that, of course, there's going to be a hello world on a screen. 109 00:09:03,280 --> 00:09:03,790 Why? 110 00:09:04,150 --> 00:09:06,810 Because now in this case, I'm saying, you know what? 111 00:09:06,820 --> 00:09:13,030 If it is not true, if it is not true, then return it again. 112 00:09:13,030 --> 00:09:16,630 Of course, will add some more dynamic set up a little bit later on. 113 00:09:17,200 --> 00:09:24,580 But just keep in mind that everything that we are going to talk about and use and the examples and projects 114 00:09:24,580 --> 00:09:31,790 later on is based on this short circuit evaluation that I covered a little bit in the beginning. 115 00:09:31,810 --> 00:09:35,020 So if you need to go and research that, please do so. 116 00:09:35,680 --> 00:09:43,960 But the way it works and react is when we use the proper if this will be true, meaning if this is going 117 00:09:43,960 --> 00:09:52,150 to have rallied to true, then of this value will be written or if it is falsie false, then the value 118 00:09:52,150 --> 00:09:55,570 on the other side of the operator will be returned. 119 00:09:55,600 --> 00:10:04,180 However, when we talk about and if the value will be true, so if it will evaluate the true, then 120 00:10:04,180 --> 00:10:09,950 of course we will return whatever is on the other side of the and operator. 121 00:10:09,970 --> 00:10:17,080 However, if it is going to be false and of course we won't return anything now, we also have option 122 00:10:17,320 --> 00:10:19,560 to check for the opposite value. 123 00:10:19,930 --> 00:10:21,170 That is also the case. 124 00:10:21,400 --> 00:10:24,940 So here the only difference is that I'm saying, you know what? 125 00:10:25,630 --> 00:10:31,480 Show the hatting one if it is false, which of course it is false. 126 00:10:31,750 --> 00:10:33,550 So it violates the false. 127 00:10:33,820 --> 00:10:35,800 So we are in good shape. 128 00:10:35,830 --> 00:10:38,470 So those are the basics of how we act. 129 00:10:38,470 --> 00:10:41,740 Implements short circuit evaluation.