WEBVTT 1 00:00:01.160 --> 00:00:04.180 Let's go back to two logical operators 2 00:00:04.180 --> 00:00:06.100 that we already used before, 3 00:00:06.100 --> 00:00:08.910 but we didn't use their full potential yet. 4 00:00:08.910 --> 00:00:11.110 And I'm talking about the AND operator 5 00:00:11.110 --> 00:00:12.990 and the OR operator, 6 00:00:12.990 --> 00:00:14.460 and how we can use them 7 00:00:14.460 --> 00:00:17.063 for something called short circuiting. 8 00:00:19.080 --> 00:00:20.690 So up until this point, 9 00:00:20.690 --> 00:00:22.740 we have used logical operators 10 00:00:22.740 --> 00:00:25.480 only to combine Boolean values. 11 00:00:25.480 --> 00:00:27.990 But the truth is that we can do a lot more 12 00:00:27.990 --> 00:00:30.840 with the AND and OR operators. 13 00:00:30.840 --> 00:00:35.400 So let's start with the OR operator here. 14 00:00:35.400 --> 00:00:38.090 And so let me log, three, 15 00:00:38.090 --> 00:00:41.240 or Jonas. 16 00:00:41.240 --> 00:00:44.160 So that's something that we didn't do before, 17 00:00:44.160 --> 00:00:47.912 which is to use basically non Boolean values here 18 00:00:47.912 --> 00:00:50.093 as the operands, okay? 19 00:00:51.010 --> 00:00:54.123 So let's see what the result of this is gonna be, 20 00:00:54.960 --> 00:00:58.150 and for some reason I have to reload here, 21 00:00:58.150 --> 00:01:01.230 and you see that the result is three. 22 00:01:01.230 --> 00:01:03.050 And so that means that the results 23 00:01:03.050 --> 00:01:05.450 of the OR operator doesn't always 24 00:01:05.450 --> 00:01:07.070 have to be a Boolean. 25 00:01:07.070 --> 00:01:09.770 And so that's something that I didn't show you before. 26 00:01:11.780 --> 00:01:13.310 So there are three properties 27 00:01:13.310 --> 00:01:16.890 that I didn't tell you before about logical operators. 28 00:01:16.890 --> 00:01:21.063 So first, they can use any data type. 29 00:01:23.970 --> 00:01:28.430 They can return any data type 30 00:01:28.430 --> 00:01:29.460 and they do something 31 00:01:29.460 --> 00:01:32.293 called short circuiting, 32 00:01:34.870 --> 00:01:38.950 or as we also call it short circuit evaluation. 33 00:01:38.950 --> 00:01:42.090 So in fact, here we used two values 34 00:01:42.090 --> 00:01:44.740 that are not Booleans, okay? 35 00:01:44.740 --> 00:01:46.600 And it then returned a value 36 00:01:46.600 --> 00:01:48.560 that was not a Boolean. 37 00:01:48.560 --> 00:01:51.140 And now about short circuiting, 38 00:01:51.140 --> 00:01:53.210 in the case of the OR operator, 39 00:01:53.210 --> 00:01:56.700 short circuiting means that if the first value 40 00:01:56.700 --> 00:01:58.500 is a truthy value, 41 00:01:58.500 --> 00:02:02.270 it will immediately return that first value. 42 00:02:02.270 --> 00:02:04.100 So that's exactly what we see here 43 00:02:04.100 --> 00:02:07.790 with the three which is a truthy value. 44 00:02:07.790 --> 00:02:12.130 So again, if the first operand is truthy here 45 00:02:12.130 --> 00:02:13.680 in the OR operator, 46 00:02:13.680 --> 00:02:17.300 then the other operand will not even be evaluated. 47 00:02:17.300 --> 00:02:20.480 So JavaScript will not even take a look at it. 48 00:02:20.480 --> 00:02:23.383 And so that's what we mean with short circuiting. 49 00:02:25.689 --> 00:02:27.390 And now let's do some more, 50 00:02:27.390 --> 00:02:29.610 let's use the empty string 51 00:02:29.610 --> 00:02:32.373 or Jonas now. 52 00:02:34.290 --> 00:02:39.023 Then let's say, true or zero, 53 00:02:41.401 --> 00:02:43.903 and then let's say undefined or null. 54 00:02:47.110 --> 00:02:49.830 And now before taking a look at the result, 55 00:02:49.830 --> 00:02:52.170 try to take a guess of what the results 56 00:02:52.170 --> 00:02:54.853 of these three operations here will be. 57 00:02:55.960 --> 00:02:57.520 So did you do that? 58 00:02:57.520 --> 00:02:58.483 So let's see. 59 00:02:59.370 --> 00:03:02.990 So the first result of this one here is Jonas. 60 00:03:02.990 --> 00:03:07.020 And so that's because this here is a falsy value. 61 00:03:07.020 --> 00:03:08.820 And so then, the second operand 62 00:03:08.820 --> 00:03:12.980 will actually also be evaluated, and that's Jonas 63 00:03:12.980 --> 00:03:15.250 and it will then be returned. 64 00:03:15.250 --> 00:03:18.060 And so here we see again that the result 65 00:03:18.060 --> 00:03:19.600 of the OR operator 66 00:03:19.600 --> 00:03:21.780 doesn't have to be a Boolean. 67 00:03:21.780 --> 00:03:25.070 It will simply return the truthy value here. 68 00:03:25.070 --> 00:03:28.100 Next up we have true or zero. 69 00:03:28.100 --> 00:03:30.750 And so this first value here is truthy, 70 00:03:30.750 --> 00:03:32.610 and in fact, it's even true, 71 00:03:32.610 --> 00:03:35.320 and so therefore that will simply be the result 72 00:03:35.320 --> 00:03:36.840 of the operator. 73 00:03:36.840 --> 00:03:38.490 And so that's what we see here. 74 00:03:38.490 --> 00:03:41.840 And then, here we have undefined or null, 75 00:03:41.840 --> 00:03:45.450 and as you already know, undefined is a falsy value, 76 00:03:45.450 --> 00:03:48.360 and so we then go to the second operand, 77 00:03:48.360 --> 00:03:50.380 so there is no short-circuiting, 78 00:03:50.380 --> 00:03:53.670 and so that's then the one that's gonna be returned. 79 00:03:53.670 --> 00:03:55.110 So here we see null, 80 00:03:55.110 --> 00:03:57.480 and that happens even though null 81 00:03:57.480 --> 00:04:00.480 is also a falsy value. 82 00:04:00.480 --> 00:04:02.660 And let's actually now generalize this 83 00:04:02.660 --> 00:04:04.450 to more operators. 84 00:04:04.450 --> 00:04:06.950 So I can give you basically the general rule 85 00:04:06.950 --> 00:04:09.060 of how this operator works, 86 00:04:09.060 --> 00:04:11.520 no matter with how many values. 87 00:04:11.520 --> 00:04:16.100 So let's say undefined or zero 88 00:04:16.100 --> 00:04:18.820 or empty string, 89 00:04:18.820 --> 00:04:21.253 or hello, 90 00:04:22.190 --> 00:04:24.263 or 23, 91 00:04:25.520 --> 00:04:26.793 or null. 92 00:04:27.630 --> 00:04:30.763 So what do you think that the result of this one will be? 93 00:04:32.280 --> 00:04:33.940 And it is hello. 94 00:04:33.940 --> 00:04:36.660 And that's essentially because hello here, 95 00:04:36.660 --> 00:04:38.840 is the first truthy value 96 00:04:38.840 --> 00:04:42.130 in this chain of OR operations. 97 00:04:42.130 --> 00:04:43.720 So we start with this one, 98 00:04:43.720 --> 00:04:46.040 so undefined is falsy. 99 00:04:46.040 --> 00:04:48.887 And so then we go to the next one, which is also falsy. 100 00:04:48.887 --> 00:04:52.440 And so then to the next one, which is also falsy, 101 00:04:52.440 --> 00:04:54.530 and then we get hello 102 00:04:54.530 --> 00:04:56.180 and hello is truthy 103 00:04:56.180 --> 00:05:00.480 and so therefore it will short circuit the entire evaluation 104 00:05:00.480 --> 00:05:03.860 and it will be the returned value, okay? 105 00:05:03.860 --> 00:05:05.800 And if we think about this, 106 00:05:05.800 --> 00:05:07.710 then it actually makes sense. 107 00:05:07.710 --> 00:05:10.310 Because remember, in the OR operation, 108 00:05:10.310 --> 00:05:11.490 the result is true, 109 00:05:11.490 --> 00:05:15.030 if at least one operand is true, right? 110 00:05:15.030 --> 00:05:17.420 So if the first operand is already true, 111 00:05:17.420 --> 00:05:19.890 for example, as it happens here, 112 00:05:19.890 --> 00:05:22.450 then JavaScript doesn't even have to look 113 00:05:22.450 --> 00:05:25.620 at the other values because the result of the expression 114 00:05:25.620 --> 00:05:27.920 will already be true anyway. 115 00:05:27.920 --> 00:05:30.870 And so it will short circuit and then simply return 116 00:05:30.870 --> 00:05:32.093 that first result. 117 00:05:32.940 --> 00:05:37.320 And now let's see a more practical application of this. 118 00:05:37.320 --> 00:05:40.220 So let's say that there might be a property 119 00:05:40.220 --> 00:05:44.040 on the restaurant object with the number of guests. 120 00:05:44.040 --> 00:05:45.493 So something like this: 121 00:05:46.600 --> 00:05:50.410 Restaurant dot num guests, 122 00:05:50.410 --> 00:05:53.520 but again, we don't know if it exists. 123 00:05:53.520 --> 00:05:56.830 However, we want to basically define a variable 124 00:05:56.830 --> 00:05:59.250 based on this number of guests. 125 00:05:59.250 --> 00:06:01.380 And we want to set a default value 126 00:06:01.380 --> 00:06:03.080 if this doesn't exist. 127 00:06:03.080 --> 00:06:05.573 So basically, what we want to do is this. 128 00:06:07.950 --> 00:06:10.943 So guests, I'm gonna call it one here, 129 00:06:12.150 --> 00:06:14.850 and so what we want to do is this, 130 00:06:14.850 --> 00:06:16.810 we want to check if it exists, 131 00:06:16.810 --> 00:06:19.174 and then the result should be 132 00:06:19.174 --> 00:06:23.950 actually restaurant dot num guests, 133 00:06:23.950 --> 00:06:25.620 but if it doesn't exist, 134 00:06:25.620 --> 00:06:29.053 then we want to set a default value of 10. 135 00:06:30.240 --> 00:06:33.133 So let's log guests one to the console, 136 00:06:34.840 --> 00:06:37.210 and so you see that now it is 10. 137 00:06:37.210 --> 00:06:40.360 And so that's because restaurant dot num guests 138 00:06:40.360 --> 00:06:43.017 doesn't exist, so this is undefined, 139 00:06:43.017 --> 00:06:45.980 and so therefore 10 will be the result 140 00:06:45.980 --> 00:06:50.200 of this turnery operator, okay? 141 00:06:50.200 --> 00:06:52.910 But now if we do set the property 142 00:06:54.440 --> 00:06:55.323 like this, 143 00:06:56.250 --> 00:06:58.470 for example, to 23, 144 00:06:58.470 --> 00:07:01.133 then guests one is gonna be 23. 145 00:07:02.020 --> 00:07:04.250 So, but instead of doing this, 146 00:07:04.250 --> 00:07:07.260 we can take advantage of short circuiting 147 00:07:07.260 --> 00:07:08.563 and the OR operator. 148 00:07:10.000 --> 00:07:14.830 So let's again write restaurant dot num guests, 149 00:07:14.830 --> 00:07:18.710 and then simply or 10. 150 00:07:18.710 --> 00:07:20.673 So let's analyze why this works. 151 00:07:21.950 --> 00:07:25.150 And first actually store this into a variable. 152 00:07:25.150 --> 00:07:27.070 So guests two 153 00:07:27.070 --> 00:07:28.040 equals this 154 00:07:29.623 --> 00:07:32.773 and then console log guests two. 155 00:07:33.660 --> 00:07:35.930 So let's take a look at why this works 156 00:07:35.930 --> 00:07:39.390 and starting again with disabling this. 157 00:07:39.390 --> 00:07:42.570 And so right now restaurants dot number of guests 158 00:07:42.570 --> 00:07:43.930 is undefined. 159 00:07:43.930 --> 00:07:45.550 So it's a falsy value, 160 00:07:45.550 --> 00:07:47.040 and as we already know, 161 00:07:47.040 --> 00:07:48.870 then the second value here 162 00:07:48.870 --> 00:07:51.820 will be the result of the OR operator. 163 00:07:51.820 --> 00:07:56.010 And so, that's basically our default value of 10. 164 00:07:56.010 --> 00:07:59.343 So let's take a look and indeed we get 10 here. 165 00:08:00.290 --> 00:08:02.860 But now if we put it back on, 166 00:08:02.860 --> 00:08:07.430 then restaurant dot number of guests is now 23, 167 00:08:07.430 --> 00:08:09.100 which is a truthy value, 168 00:08:09.100 --> 00:08:12.210 and therefore the OR operator short circuits 169 00:08:12.210 --> 00:08:15.480 and it will become the return value, 170 00:08:15.480 --> 00:08:18.850 or let's say the result of the operation. 171 00:08:18.850 --> 00:08:21.720 And so now indeed, we get 23. 172 00:08:21.720 --> 00:08:24.020 And so this is a way easier method 173 00:08:24.020 --> 00:08:25.960 of setting default values 174 00:08:25.960 --> 00:08:28.580 than having to deal with this turnery operator 175 00:08:28.580 --> 00:08:32.960 or even worse an if else statement, okay? 176 00:08:32.960 --> 00:08:36.010 So that is short-circuiting with the AND operator, 177 00:08:36.010 --> 00:08:39.300 but we can also do the same with the OR operator, 178 00:08:39.300 --> 00:08:42.380 but the AND operator also has short circuiting. 179 00:08:42.380 --> 00:08:43.600 So let's take a look 180 00:08:44.500 --> 00:08:48.170 and it will start by log something to the console here, 181 00:08:48.170 --> 00:08:49.833 like a string to separate, 182 00:08:54.360 --> 00:08:57.600 so that we don't get confused by the results 183 00:08:57.600 --> 00:08:58.803 and the console then. 184 00:09:01.500 --> 00:09:05.010 Oh, but before we talk about the AND operator here, 185 00:09:05.010 --> 00:09:06.520 there's actually one more thing 186 00:09:06.520 --> 00:09:08.140 that I need to tell you here, 187 00:09:08.140 --> 00:09:11.350 which is that both of these solutions here, 188 00:09:11.350 --> 00:09:13.630 this and this will not work 189 00:09:13.630 --> 00:09:16.033 when the number of guests is zero. 190 00:09:17.000 --> 00:09:18.300 So let's see what happens. 191 00:09:19.680 --> 00:09:21.940 And so now they're both 10. 192 00:09:21.940 --> 00:09:24.330 And that's not the result that we want, 193 00:09:24.330 --> 00:09:27.330 but given what we already know, it makes sense 194 00:09:27.330 --> 00:09:28.950 because this is now zero, 195 00:09:28.950 --> 00:09:30.630 so it's a falsy value, 196 00:09:30.630 --> 00:09:33.840 and therefore the second one here will be the result 197 00:09:33.840 --> 00:09:38.220 of the operation and therefore assigned to guests two. 198 00:09:38.220 --> 00:09:41.720 However, zero is the real number of guests. 199 00:09:41.720 --> 00:09:43.580 And so that's the value that we actually 200 00:09:43.580 --> 00:09:46.680 would guests two to have. 201 00:09:46.680 --> 00:09:49.900 But instead it's set the default value of 10. 202 00:09:49.900 --> 00:09:52.480 So that's obviously not what we want 203 00:09:52.480 --> 00:09:55.360 and we will explore a great solution to this problem 204 00:09:55.360 --> 00:09:56.810 actually in the next lecture. 205 00:09:58.470 --> 00:10:02.270 But now, let's talk about the AND operator. 206 00:10:02.270 --> 00:10:06.090 And basically when it comes to short circuit evaluation, 207 00:10:06.090 --> 00:10:09.570 the AND operator works in the exact opposite way 208 00:10:09.570 --> 00:10:11.313 of the OR operator. 209 00:10:12.940 --> 00:10:14.330 So let's see. 210 00:10:14.330 --> 00:10:18.950 Zero and Jonas. 211 00:10:18.950 --> 00:10:22.280 And now the result of this is zero. 212 00:10:22.280 --> 00:10:24.120 And so what this means is that 213 00:10:24.120 --> 00:10:26.350 the AND operator short circuits, 214 00:10:26.350 --> 00:10:29.160 when the first value is falsy. 215 00:10:29.160 --> 00:10:32.320 And then immediately returns that falsy value 216 00:10:32.320 --> 00:10:35.710 without even evaluating the second operand. 217 00:10:39.440 --> 00:10:41.240 So again, that's exactly the opposite 218 00:10:41.240 --> 00:10:44.260 of what happens with the OR operator, 219 00:10:44.260 --> 00:10:47.823 which short circuits when the first operator is true. 220 00:10:49.500 --> 00:10:52.840 So let's now set it to a true value here, 221 00:10:52.840 --> 00:10:54.800 or actually a truthy value. 222 00:10:54.800 --> 00:10:59.310 And then at this case, Jonas is actually returned. 223 00:10:59.310 --> 00:11:03.847 So when it is truthy, it means that the evaluation continues 224 00:11:03.847 --> 00:11:07.350 and then simply the last value is returned. 225 00:11:07.350 --> 00:11:11.110 And once again, this makes sense if we think about it. 226 00:11:11.110 --> 00:11:13.670 So the AND operator is only true 227 00:11:13.670 --> 00:11:16.020 if all the operands are true. 228 00:11:16.020 --> 00:11:19.090 And so, if the first one here is false, 229 00:11:19.090 --> 00:11:22.430 then it means that the entire result of the AND operation 230 00:11:22.430 --> 00:11:24.500 will already be false anyway. 231 00:11:24.500 --> 00:11:26.520 And so there is no need to even look 232 00:11:26.520 --> 00:11:28.643 at any of the other operands. 233 00:11:30.040 --> 00:11:32.150 So I think that's a good way to memorize 234 00:11:32.150 --> 00:11:34.203 how both of them work. 235 00:11:35.270 --> 00:11:38.040 Anyway, let's again generalize. 236 00:11:38.040 --> 00:11:40.930 Add this to multiple operands here 237 00:11:40.930 --> 00:11:42.980 and 23, 238 00:11:42.980 --> 00:11:44.193 and null, 239 00:11:45.730 --> 00:11:48.590 and Jonas, 240 00:11:48.590 --> 00:11:53.230 and so what do you think this time the result will be? 241 00:11:53.230 --> 00:11:55.150 Well, let's see. 242 00:11:55.150 --> 00:11:57.450 And it is indeed null. 243 00:11:57.450 --> 00:12:01.700 And to understand why let's apply the same logic as before. 244 00:12:01.700 --> 00:12:03.560 So this is a truthy value, 245 00:12:03.560 --> 00:12:06.130 and therefore the evaluation continues, 246 00:12:06.130 --> 00:12:08.163 23 is also truthy, 247 00:12:08.163 --> 00:12:10.670 but then null is a falsy value 248 00:12:10.670 --> 00:12:14.120 and therefore evaluation no longer needs to continue 249 00:12:14.120 --> 00:12:16.360 because at this point, the whole result 250 00:12:16.360 --> 00:12:19.760 of the end operation is gonna be false anyway. 251 00:12:19.760 --> 00:12:21.390 And then as a result, 252 00:12:21.390 --> 00:12:24.390 this is then simply the value that's gonna be returned 253 00:12:24.390 --> 00:12:27.810 and it's short circuits the rest of the evaluation. 254 00:12:27.810 --> 00:12:30.923 So it will not even take a look at Jonas here. 255 00:12:33.610 --> 00:12:34.460 Alright. 256 00:12:34.460 --> 00:12:38.150 And so now let's see another practical example. 257 00:12:38.150 --> 00:12:40.250 So, let's say 258 00:12:40.250 --> 00:12:45.250 if restaurant dot order, order pizza. 259 00:12:46.930 --> 00:12:49.720 So basically we're checking if this method exists 260 00:12:50.570 --> 00:12:52.240 and then if it does exist, 261 00:12:52.240 --> 00:12:53.863 we want to call it. 262 00:12:54.780 --> 00:12:58.143 So restaurant dot order pizza, 263 00:12:59.310 --> 00:13:02.150 let's say with mushrooms 264 00:13:03.870 --> 00:13:05.143 and spinach. 265 00:13:09.730 --> 00:13:12.300 So many times we can use the AND operator 266 00:13:12.300 --> 00:13:16.090 to actually avoid an if statement like this one, 267 00:13:16.090 --> 00:13:18.330 where all we want to do is to check 268 00:13:18.330 --> 00:13:22.253 if a certain property or value actually exists. 269 00:13:24.660 --> 00:13:26.450 Okay, so in this case here, 270 00:13:26.450 --> 00:13:28.940 what we're doing is to basically pretending 271 00:13:28.940 --> 00:13:32.030 that we don't know if order pizza exists. 272 00:13:32.030 --> 00:13:34.630 And so we first check if it exists 273 00:13:34.630 --> 00:13:36.293 and only then we execute it. 274 00:13:37.620 --> 00:13:41.010 And so this now gives us mushrooms and spinach, 275 00:13:41.010 --> 00:13:42.790 but with the knowledge that we gained 276 00:13:42.790 --> 00:13:44.880 about the AND operator, 277 00:13:44.880 --> 00:13:46.623 we can do this in a simpler way. 278 00:13:48.220 --> 00:13:52.123 So we can say restaurant dot order pizza, 279 00:13:56.301 --> 00:14:00.430 and then basically if restaurant dot order pizza 280 00:14:00.430 --> 00:14:03.070 does not exist, so it's undefined, 281 00:14:03.070 --> 00:14:05.580 it will then short circuit the evaluation 282 00:14:05.580 --> 00:14:07.650 and nothing else will happen. 283 00:14:07.650 --> 00:14:09.960 And so that's essentially exactly the same 284 00:14:09.960 --> 00:14:11.913 as this if block here is doing. 285 00:14:13.120 --> 00:14:15.250 All right, but if it does exist. 286 00:14:15.250 --> 00:14:17.173 So if it's a truthy value, 287 00:14:17.173 --> 00:14:20.120 then the second part here will be evaluated. 288 00:14:20.120 --> 00:14:22.830 And so here in this second operand, 289 00:14:22.830 --> 00:14:26.053 we can then call the function. 290 00:14:33.560 --> 00:14:34.400 Okay. 291 00:14:34.400 --> 00:14:37.280 And it's perfectly fine to use this operands, 292 00:14:37.280 --> 00:14:39.843 the second operand` here to call a function. 293 00:14:39.843 --> 00:14:41.560 We can put anything here. 294 00:14:41.560 --> 00:14:44.163 It doesn't just have to be a single value. 295 00:14:46.070 --> 00:14:48.520 Now I'm not saying that you should go ahead 296 00:14:48.520 --> 00:14:50.890 and replace all your if statements 297 00:14:50.890 --> 00:14:53.850 with the AND or the OR operators, 298 00:14:53.850 --> 00:14:56.370 so please definitely don't do that 299 00:14:56.370 --> 00:14:58.880 because it's gonna make your code very hard 300 00:14:58.880 --> 00:15:01.020 to read in the future. 301 00:15:01.020 --> 00:15:03.570 But anyway, let's now summarize. 302 00:15:03.570 --> 00:15:07.580 So the OR operator will return the first truthy value 303 00:15:07.580 --> 00:15:09.290 of all the operands, 304 00:15:09.290 --> 00:15:13.210 or simply the last value if all of them are falsy. 305 00:15:13.210 --> 00:15:17.300 So that's what happened here, right? 306 00:15:17.300 --> 00:15:18.600 On the other hand, 307 00:15:18.600 --> 00:15:22.900 the AND operator will return the first falsy value 308 00:15:22.900 --> 00:15:26.470 or the last value if all of them are truthy. 309 00:15:26.470 --> 00:15:28.590 And as for practical applications, 310 00:15:28.590 --> 00:15:32.310 we can use the OR operator to set default values, 311 00:15:32.310 --> 00:15:34.360 and we can use the AND operator 312 00:15:34.360 --> 00:15:37.870 to execute code in the second operand 313 00:15:37.870 --> 00:15:40.510 if the first one is true. 314 00:15:40.510 --> 00:15:43.020 So play around some more with this maybe, 315 00:15:43.020 --> 00:15:45.570 and then let's just move on to the next video 316 00:15:45.570 --> 00:15:48.860 where we will solve this problem that we had here 317 00:15:48.860 --> 00:15:51.260 with this OR operator 318 00:15:51.260 --> 00:15:52.653 and this zero.