WEBVTT 1 00:00:01.160 --> 00:00:02.480 Let's learn about 2 00:00:02.480 --> 00:00:07.010 an even newer feature of objects and also of arrays 3 00:00:07.010 --> 00:00:09.630 which is called optional chaining. 4 00:00:09.630 --> 00:00:11.973 And this one is really amazing. 5 00:00:13.290 --> 00:00:16.510 So, let's say that we wanted to get the opening hours 6 00:00:16.510 --> 00:00:19.163 of our restaurant for Monday. 7 00:00:20.160 --> 00:00:22.860 So let's quickly check that. 8 00:00:22.860 --> 00:00:25.077 So restaurant.openingHours, 9 00:00:26.510 --> 00:00:30.430 and then since we are checking for Monday, 10 00:00:30.430 --> 00:00:32.600 let's try .mon. 11 00:00:32.600 --> 00:00:35.470 So which could stand for Monday. 12 00:00:35.470 --> 00:00:38.840 Now, actually this property doesn't exist. 13 00:00:38.840 --> 00:00:42.840 So you see that this is undefined, right? 14 00:00:42.840 --> 00:00:45.890 But let's pretend that we do not know 15 00:00:45.890 --> 00:00:49.353 whether this restaurant opens on Monday or not. 16 00:00:50.220 --> 00:00:51.280 And that could be the case. 17 00:00:51.280 --> 00:00:55.350 For example if this data came from a real web service. 18 00:00:55.350 --> 00:00:57.120 So a web API. 19 00:00:57.120 --> 00:01:00.170 And in their service there could be multiple restaurants 20 00:01:00.170 --> 00:01:03.020 and not all of them would open on Monday. 21 00:01:03.020 --> 00:01:05.220 And so we had no way of knowing 22 00:01:05.220 --> 00:01:07.530 if this particular restaurant 23 00:01:07.530 --> 00:01:10.030 would open on Monday or not. 24 00:01:10.030 --> 00:01:12.320 But now let's go even further 25 00:01:12.320 --> 00:01:15.620 because we actually want to know exactly the hour 26 00:01:15.620 --> 00:01:19.040 on which the restaurant opens on Monday. 27 00:01:19.040 --> 00:01:20.690 So let's see what we get. 28 00:01:20.690 --> 00:01:24.220 And now we do actually get an error 29 00:01:24.220 --> 00:01:27.640 because the results of this was undefined. 30 00:01:27.640 --> 00:01:31.760 And then undefined.open is really an error. 31 00:01:31.760 --> 00:01:34.330 So that's the error that we get here. 32 00:01:34.330 --> 00:01:36.820 So in order to avoid this error, 33 00:01:36.820 --> 00:01:40.930 we would first have to check if this here actually exists. 34 00:01:40.930 --> 00:01:44.653 So we could do something like this. 35 00:01:45.530 --> 00:01:49.563 If this property exists, basically then do this. 36 00:01:50.560 --> 00:01:52.730 Or we could also use a logical operator 37 00:01:52.730 --> 00:01:54.650 as we already learned 38 00:01:54.650 --> 00:01:57.563 but this here is a bit more readable, all right? 39 00:01:58.970 --> 00:02:01.380 So if we did the same for 40 00:02:02.240 --> 00:02:04.160 let's say Friday, 41 00:02:04.160 --> 00:02:06.150 then we already know that Friday exists. 42 00:02:06.150 --> 00:02:07.600 And so this would then work 43 00:02:08.440 --> 00:02:09.493 and it would be 11. 44 00:02:10.930 --> 00:02:12.880 But let's focus here on Monday, 45 00:02:12.880 --> 00:02:15.640 which is the day that doesn't exist. 46 00:02:15.640 --> 00:02:19.220 And so now at least we got rid of our error here. 47 00:02:19.220 --> 00:02:23.770 So it's not a big deal to having to add this logic here 48 00:02:23.770 --> 00:02:27.190 but it does make our code a little bit more unreadable 49 00:02:27.190 --> 00:02:28.630 and more messy. 50 00:02:28.630 --> 00:02:31.960 However, this is checking just for one property. 51 00:02:31.960 --> 00:02:33.950 So just for Monday. 52 00:02:33.950 --> 00:02:36.650 But now imagine that opening hours here 53 00:02:36.650 --> 00:02:38.530 would also be optional. 54 00:02:38.530 --> 00:02:42.220 Or in other words that maybe the restaurant object 55 00:02:42.220 --> 00:02:44.870 can also not have opening hours. 56 00:02:44.870 --> 00:02:48.600 So, in this case, we would have to check for both, right? 57 00:02:48.600 --> 00:02:49.860 So we would have to do 58 00:02:51.570 --> 00:02:55.467 if restaurant.openingHours exists 59 00:02:58.630 --> 00:03:02.920 and if restaurants.openingHours.mon exists 60 00:03:02.920 --> 00:03:07.450 while only then unlock the opening hours to the console. 61 00:03:07.450 --> 00:03:10.230 And this can get out of hand pretty quickly 62 00:03:10.230 --> 00:03:12.560 when we have deeply nested objects 63 00:03:12.560 --> 00:03:15.290 with lots of optional properties. 64 00:03:15.290 --> 00:03:18.470 And sometimes that happens in the real world. 65 00:03:18.470 --> 00:03:19.990 And so therefore ES2020 66 00:03:20.990 --> 00:03:23.600 introduced a great solution for this, 67 00:03:23.600 --> 00:03:27.390 which is a feature called optional chaining. 68 00:03:27.390 --> 00:03:29.060 And with optional chaining, 69 00:03:29.060 --> 00:03:31.710 if a certain property does not exist, 70 00:03:31.710 --> 00:03:34.530 then undefined is returned immediately. 71 00:03:34.530 --> 00:03:35.990 And so that will then avoid 72 00:03:35.990 --> 00:03:39.110 that kind of error that we saw earlier. 73 00:03:39.110 --> 00:03:41.270 And this is how it works. 74 00:03:41.270 --> 00:03:44.343 So let's recreate it now with optional chaining. 75 00:03:47.397 --> 00:03:50.290 (keyboard clunking) 76 00:03:50.290 --> 00:03:54.297 So now we can say restaurant.openingHours.mon 77 00:03:58.460 --> 00:04:01.800 and now here is the optional chaining operator. 78 00:04:01.800 --> 00:04:03.350 So instead of just a dot, 79 00:04:03.350 --> 00:04:07.820 we use question mark, dot and then open. 80 00:04:07.820 --> 00:04:12.290 Okay? So here is how optional chaining works. 81 00:04:12.290 --> 00:04:13.970 So only if the property 82 00:04:13.970 --> 00:04:17.040 that is before this question mark here. 83 00:04:17.040 --> 00:04:19.670 So only if Monday exists, 84 00:04:19.670 --> 00:04:23.940 then this open property will be read from there. 85 00:04:23.940 --> 00:04:24.773 All right? 86 00:04:24.773 --> 00:04:29.240 But if not, then immediately undefined will be returned. 87 00:04:29.240 --> 00:04:32.740 And exists here actually means the nullish concept 88 00:04:32.740 --> 00:04:34.600 that we already talked before. 89 00:04:34.600 --> 00:04:39.600 So, a property exists if it's not null and not undefined. 90 00:04:39.880 --> 00:04:40.713 Okay? 91 00:04:40.713 --> 00:04:43.120 So if it's zero or the empty string, 92 00:04:43.120 --> 00:04:45.600 then it still exists of course. 93 00:04:45.600 --> 00:04:49.300 So if we try this now, then we get undefined. 94 00:04:49.300 --> 00:04:51.760 So that's exactly what I was saying. 95 00:04:51.760 --> 00:04:55.530 Let's just, again, recreate it here 96 00:04:55.530 --> 00:04:57.323 without the optional chaining. 97 00:04:58.330 --> 00:05:00.573 Just to see the error again. 98 00:05:02.430 --> 00:05:05.210 And so here we would indeed get the error. 99 00:05:05.210 --> 00:05:07.890 Again because all of this here is undefined, 100 00:05:07.890 --> 00:05:11.350 and then we read open here from undefined, 101 00:05:11.350 --> 00:05:12.750 which doesn't work. 102 00:05:12.750 --> 00:05:17.750 But here this next operation of trying to read open 103 00:05:17.820 --> 00:05:22.610 only happens if all of this here actually exists. 104 00:05:22.610 --> 00:05:26.390 So if it's not null and not undefined. 105 00:05:26.390 --> 00:05:28.820 But if it is undefined or null, 106 00:05:28.820 --> 00:05:31.283 then the result will be undefined immediately. 107 00:05:32.770 --> 00:05:34.710 So let's take this out again. 108 00:05:34.710 --> 00:05:38.223 And so that is why we get undefined right now. 109 00:05:39.720 --> 00:05:42.563 And of course we can have multiple optional chainings. 110 00:05:43.420 --> 00:05:46.703 So let's basically recreate what we have here. 111 00:05:47.660 --> 00:05:49.120 So in this example, 112 00:05:49.120 --> 00:05:52.020 so here we are testing for both opening hours 113 00:05:52.020 --> 00:05:54.130 and for Monday. 114 00:05:54.130 --> 00:05:57.600 So these are essentially the two optional properties 115 00:05:57.600 --> 00:06:00.743 that we do not know beforehand if they exist. 116 00:06:01.920 --> 00:06:03.180 So Monday is optional, 117 00:06:03.180 --> 00:06:06.390 and that's why we have the question mark here basically, 118 00:06:06.390 --> 00:06:08.460 asking if it exists 119 00:06:08.460 --> 00:06:11.540 and now we can do the same for opening hours. 120 00:06:11.540 --> 00:06:16.180 And now if restaurant.openingHours does not even exist, 121 00:06:16.180 --> 00:06:19.790 well, then the Monday property will not even be read 122 00:06:19.790 --> 00:06:23.300 and so therefore we don't get that error. 123 00:06:23.300 --> 00:06:24.180 All right? 124 00:06:24.180 --> 00:06:25.960 And so this makes it really easy 125 00:06:25.960 --> 00:06:28.170 to prevent all kinds of bugs 126 00:06:28.170 --> 00:06:32.290 that sometimes we might not even expect. 127 00:06:32.290 --> 00:06:33.520 All right? 128 00:06:33.520 --> 00:06:37.020 So, it also takes away all this work of doing this 129 00:06:38.500 --> 00:06:41.700 simply by adding this simple question mark in there. 130 00:06:41.700 --> 00:06:45.660 But now let's see a little bit more real world example. 131 00:06:45.660 --> 00:06:48.150 And for that, let me grab this 132 00:06:49.400 --> 00:06:51.003 weekdays array and put it here. 133 00:06:53.685 --> 00:06:56.685 (keyboard clunking) 134 00:06:58.060 --> 00:06:59.730 Let's just call it days here 135 00:06:59.730 --> 00:07:01.720 so it's not the same variable. 136 00:07:01.720 --> 00:07:05.530 And now what I want to do is to loop over this array 137 00:07:05.530 --> 00:07:06.990 and then lock to the console, 138 00:07:06.990 --> 00:07:09.970 whether the restaurant is open or closed 139 00:07:09.970 --> 00:07:11.871 on each of the days. 140 00:07:11.871 --> 00:07:14.570 (keyboard clunking) 141 00:07:14.570 --> 00:07:17.860 So, that's a good application 142 00:07:17.860 --> 00:07:20.877 of optional chaining right there. 143 00:07:20.877 --> 00:07:23.780 (keyboard clunking) 144 00:07:23.780 --> 00:07:26.380 So let's start just by logging here today 145 00:07:26.380 --> 00:07:29.693 just so that you can remember how this loop works. 146 00:07:31.080 --> 00:07:34.070 And so indeed now we can do some code 147 00:07:34.070 --> 00:07:36.960 with each of these days here. 148 00:07:36.960 --> 00:07:41.653 So, let's now essentially do the same as we did up here. 149 00:07:42.960 --> 00:07:45.093 So restaurant.openingHours 150 00:07:47.280 --> 00:07:51.120 but now we cannot do this, right? 151 00:07:51.120 --> 00:07:54.880 Because this is not an actual property name of the object. 152 00:07:54.880 --> 00:07:58.230 And so remember if we want to use a variable name 153 00:07:58.230 --> 00:08:00.090 as the property name, 154 00:08:00.090 --> 00:08:03.620 basically, we need to use the brackets notation. 155 00:08:03.620 --> 00:08:05.640 So we learned about this way back 156 00:08:05.640 --> 00:08:07.290 in the fundamental section. 157 00:08:07.290 --> 00:08:09.953 And so make sure to remember that. 158 00:08:11.090 --> 00:08:12.230 Okay? 159 00:08:12.230 --> 00:08:15.630 So, basically this would be the same in the first day 160 00:08:18.717 --> 00:08:23.717 .mon and then .tue and so on and so forth. 161 00:08:23.980 --> 00:08:28.973 But the day here is coming dynamically from this array. 162 00:08:30.080 --> 00:08:30.913 Okay? 163 00:08:33.780 --> 00:08:38.030 But optional chaining of course also works with that. 164 00:08:38.030 --> 00:08:42.820 And so now we can ask if open exists, basically. 165 00:08:42.820 --> 00:08:45.470 And now let's save this to a variable 166 00:08:47.440 --> 00:08:50.370 and then let's log to the console. 167 00:08:50.370 --> 00:08:52.230 And this is not yet complete 168 00:08:52.230 --> 00:08:54.830 but for now, let's see what's gonna happen. 169 00:08:54.830 --> 00:08:59.260 So, on day and then whatever is the current day 170 00:08:59.260 --> 00:09:01.523 we open at, 171 00:09:02.830 --> 00:09:06.293 and in here we use the open variable that we just created. 172 00:09:07.930 --> 00:09:10.173 Let's get rid of this console.log here. 173 00:09:12.610 --> 00:09:13.690 Okay. 174 00:09:13.690 --> 00:09:16.500 So, we get on Monday we open at undefined, 175 00:09:16.500 --> 00:09:18.730 undefined, undefined, 176 00:09:18.730 --> 00:09:21.300 and then indeed on Thursday, Friday and Saturday, 177 00:09:21.300 --> 00:09:22.530 we are open. 178 00:09:22.530 --> 00:09:24.930 And so then we get the opening hour 179 00:09:24.930 --> 00:09:27.250 that is actually also in the object. 180 00:09:27.250 --> 00:09:28.720 Let's just make sure. 181 00:09:28.720 --> 00:09:33.610 So this one is open 12, 11 and zero. 182 00:09:33.610 --> 00:09:36.310 So essentially it's open 24 hours. 183 00:09:36.310 --> 00:09:40.050 It opens at 12 and closes at 24. 184 00:09:40.050 --> 00:09:41.383 So at midnight again. 185 00:09:42.540 --> 00:09:44.570 All right? So that's working. 186 00:09:44.570 --> 00:09:48.240 But now we don't want this undefined here. Okay? 187 00:09:48.240 --> 00:09:49.940 And so just like before 188 00:09:49.940 --> 00:09:52.300 let's set a default value. 189 00:09:52.300 --> 00:09:53.323 So let's use or, 190 00:09:57.468 --> 00:10:00.767 and so as a default, we want to say closed. 191 00:10:01.690 --> 00:10:03.210 So we are open at closed. 192 00:10:03.210 --> 00:10:05.510 So that doesn't make a lot of sense. 193 00:10:05.510 --> 00:10:07.890 So we could create a better sentence there 194 00:10:07.890 --> 00:10:10.300 but let's leave it like this. 195 00:10:10.300 --> 00:10:13.620 But maybe you're noticing that now we have a problem 196 00:10:13.620 --> 00:10:17.200 which is that on Saturday it says that we are closed. 197 00:10:17.200 --> 00:10:19.880 Although actually we open 198 00:10:19.880 --> 00:10:21.730 or the restaurant opens. 199 00:10:21.730 --> 00:10:24.210 So here on Saturday which is this one, 200 00:10:24.210 --> 00:10:26.700 indeed, this property exists. 201 00:10:26.700 --> 00:10:29.263 So there is a property called Saturday. 202 00:10:30.290 --> 00:10:32.460 And so we have a problem here. 203 00:10:32.460 --> 00:10:35.980 And the problem is that the restaurant opens at zero. 204 00:10:35.980 --> 00:10:38.840 And so here we have the same problem as before 205 00:10:38.840 --> 00:10:41.010 where zero is a falsy value. 206 00:10:41.010 --> 00:10:44.470 And so therefore it will then trigger this second part 207 00:10:44.470 --> 00:10:46.030 of the operator. 208 00:10:46.030 --> 00:10:48.640 But we also saw the solution to this, 209 00:10:48.640 --> 00:10:52.050 which is to use the nullish coalescing operator. 210 00:10:52.050 --> 00:10:54.190 And so that's what we do now. 211 00:10:54.190 --> 00:10:57.720 And now we get back to open at zero. 212 00:10:57.720 --> 00:10:58.553 Great. 213 00:10:58.553 --> 00:11:00.990 So, this is an amazing use case 214 00:11:00.990 --> 00:11:03.160 of the optional chaining operator 215 00:11:03.160 --> 00:11:06.920 and the nullish coalescing operator working together. 216 00:11:06.920 --> 00:11:09.600 And in fact, they were introduced into the language 217 00:11:09.600 --> 00:11:11.320 at the same time in ES2020 218 00:11:12.240 --> 00:11:13.920 because they were really designed 219 00:11:13.920 --> 00:11:16.300 to work well with each other. 220 00:11:16.300 --> 00:11:20.870 So again, both of them rely on this new concept of nullish 221 00:11:20.870 --> 00:11:24.850 and so nullish values are null and undefined. 222 00:11:24.850 --> 00:11:25.890 And that's it. 223 00:11:25.890 --> 00:11:30.230 And so that's true both for this nullish coalescing operator 224 00:11:30.230 --> 00:11:32.393 and also for optional chaining. 225 00:11:34.510 --> 00:11:36.380 Okay. Great. 226 00:11:36.380 --> 00:11:38.860 Now that you understand how it works, 227 00:11:38.860 --> 00:11:42.720 let's move to the next topic, which is on methods. 228 00:11:42.720 --> 00:11:45.330 So optional chaining does indeed also work 229 00:11:45.330 --> 00:11:46.950 for calling methods. 230 00:11:46.950 --> 00:11:48.980 So, essentially we can check 231 00:11:48.980 --> 00:11:52.453 if a method actually exists before we call it. 232 00:11:53.490 --> 00:11:57.740 So, restaurant.order, 233 00:11:57.740 --> 00:12:00.540 and now we can check if it exists. 234 00:12:00.540 --> 00:12:04.800 So we use the question mark, dot, and if it does exist, 235 00:12:04.800 --> 00:12:06.860 then we can call it. 236 00:12:06.860 --> 00:12:08.913 So let's just pass zero and one here. 237 00:12:09.980 --> 00:12:12.560 And then we should always use together 238 00:12:12.560 --> 00:12:14.620 the nullish coalescing operator. 239 00:12:14.620 --> 00:12:19.620 And so, method does not exist. 240 00:12:20.290 --> 00:12:21.770 So let's run this 241 00:12:21.770 --> 00:12:25.040 but in this case, the method does actually exist. 242 00:12:25.040 --> 00:12:27.403 And so here we get the expected result. 243 00:12:29.740 --> 00:12:33.430 When we try to call a method that doesn't exist. 244 00:12:33.430 --> 00:12:35.197 So let's say orderRisotto, 245 00:12:36.820 --> 00:12:40.410 and so we never wrote a method for that. 246 00:12:40.410 --> 00:12:42.003 And so, let's see. 247 00:12:43.200 --> 00:12:46.770 And yeah, now we get method does not exist. 248 00:12:46.770 --> 00:12:48.530 And so just like before 249 00:12:48.530 --> 00:12:50.380 this optional chaining operator 250 00:12:50.380 --> 00:12:54.100 will check if orderRisotto actually exists. 251 00:12:54.100 --> 00:12:55.260 And if it doesn't, 252 00:12:55.260 --> 00:12:58.630 well then it will immediately return undefined. 253 00:12:58.630 --> 00:13:01.550 And so all of this then returns undefined. 254 00:13:01.550 --> 00:13:05.050 And so here in the nullish coalescing operator, 255 00:13:05.050 --> 00:13:08.240 we immediately go to that second operant. 256 00:13:08.240 --> 00:13:09.513 So that's this one here. 257 00:13:10.600 --> 00:13:14.630 And yeah, then that's the result of this whole operation. 258 00:13:14.630 --> 00:13:17.100 So of course, if we hadn't this, 259 00:13:17.100 --> 00:13:19.170 then we were trying to attempt 260 00:13:19.170 --> 00:13:21.200 something that is not a function. 261 00:13:21.200 --> 00:13:23.940 So really useful on methods as well. 262 00:13:23.940 --> 00:13:27.433 And finally, optional chaining even works on arrays. 263 00:13:29.876 --> 00:13:32.250 (keyboard clunking) 264 00:13:32.250 --> 00:13:36.210 So basically we can use it to check if an array is empty. 265 00:13:36.210 --> 00:13:40.880 So let's simply create a users array 266 00:13:40.880 --> 00:13:43.453 in which we can put a couple of user objects. 267 00:13:45.280 --> 00:13:47.440 So name Jonas 268 00:13:49.569 --> 00:13:50.763 and email, 269 00:13:52.550 --> 00:13:56.053 hello@Jonas.io. 270 00:13:57.977 --> 00:13:58.810 (murmurs) 271 00:13:58.810 --> 00:14:00.040 This is just for demonstration. 272 00:14:00.040 --> 00:14:03.120 So let's just put one object here 273 00:14:05.340 --> 00:14:10.330 and now to get the name of the first element of this array, 274 00:14:10.330 --> 00:14:12.680 we can do this. 275 00:14:12.680 --> 00:14:16.750 We can write users, element number zero 276 00:14:16.750 --> 00:14:18.930 and only if it exists. 277 00:14:18.930 --> 00:14:23.930 So, optional chaining only then take its name. 278 00:14:24.320 --> 00:14:25.420 Okay? 279 00:14:25.420 --> 00:14:30.420 And otherwise we want to log user array empty. 280 00:14:32.470 --> 00:14:33.740 So let's see. 281 00:14:33.740 --> 00:14:36.450 And indeed we get Jonas. 282 00:14:36.450 --> 00:14:39.190 And so again, this optional chaining here 283 00:14:39.190 --> 00:14:43.230 tests if the value on the left does exist. 284 00:14:43.230 --> 00:14:44.973 So users zero. 285 00:14:47.040 --> 00:14:47.873 Okay? 286 00:14:47.873 --> 00:14:48.943 So if it was empty, 287 00:14:50.440 --> 00:14:51.563 so users, 288 00:14:52.460 --> 00:14:53.870 so like this, 289 00:14:53.870 --> 00:14:56.433 then we get user array empty. 290 00:14:57.520 --> 00:14:59.120 And without optional chaining, 291 00:14:59.120 --> 00:15:02.290 we would have to write something like this. 292 00:15:02.290 --> 00:15:06.070 So if users.length 293 00:15:06.070 --> 00:15:07.540 greater equals zero 294 00:15:08.750 --> 00:15:10.290 then console.log 295 00:15:11.196 --> 00:15:12.340 and this here 296 00:15:19.407 --> 00:15:22.893 and else console.log, 297 00:15:24.850 --> 00:15:27.163 user array empty. 298 00:15:28.290 --> 00:15:29.840 All right? 299 00:15:29.840 --> 00:15:32.810 And so that looks like a lot more work 300 00:15:32.810 --> 00:15:34.920 than what we just have up there. 301 00:15:34.920 --> 00:15:37.760 So, here we don't need to do any check 302 00:15:37.760 --> 00:15:40.053 so that's a lot better. 303 00:15:41.460 --> 00:15:44.433 And so now in both cases, we get Jonas. 304 00:15:45.690 --> 00:15:48.920 So, get used to this optional chaining operator, 305 00:15:48.920 --> 00:15:50.180 which almost always, 306 00:15:50.180 --> 00:15:54.030 we use them together with the nullish coalescing operator 307 00:15:54.030 --> 00:15:56.090 so that we can actually do something 308 00:15:56.090 --> 00:15:59.560 in case we don't get a result from the object 309 00:15:59.560 --> 00:16:02.433 or from the array that's here on the left hand side. 310 00:16:03.860 --> 00:16:04.693 All right. 311 00:16:04.693 --> 00:16:07.803 And with that being said, I see you in the next video.