1 00:00:01,470 --> 00:00:02,190 Welcome, everyone. 2 00:00:02,220 --> 00:00:08,280 Today, we are going to talk about New Year's 11 or ECMAScript 20/20 features. 3 00:00:08,710 --> 00:00:09,520 How cool is this? 4 00:00:09,900 --> 00:00:13,650 So first, we have dynamic, important and big in the private class variables. 5 00:00:13,950 --> 00:00:17,940 Prom is all settled and optional chaining operator. 6 00:00:17,970 --> 00:00:23,580 Now, there are a couple of others, but these are one of the most important ones. 7 00:00:24,000 --> 00:00:26,960 Now, first, I'm going to start with dynamic import. 8 00:00:27,150 --> 00:00:30,900 So on the desktop I create a folder called S11 only. 9 00:00:32,070 --> 00:00:33,150 So you can do the same thing. 10 00:00:34,170 --> 00:00:37,040 You can create a folder or you can sit back and watch me. 11 00:00:37,060 --> 00:00:41,790 What I'm going to do now for the first dynamic import, I need to create a couple of files in order 12 00:00:41,790 --> 00:00:42,370 to show you. 13 00:00:42,570 --> 00:00:44,770 So I'm going to create a new file called Name. 14 00:00:44,810 --> 00:00:46,350 That is nice. 15 00:00:46,770 --> 00:00:57,960 I'm going to create a new folder called Modules Actually Models, and I'm going to create a new folder 16 00:00:57,960 --> 00:00:59,010 called Use. 17 00:01:00,540 --> 00:01:08,220 Now, remember the last project that we do with the API, the MAPI movies, API, so we used modules 18 00:01:08,220 --> 00:01:10,280 and we export and import files. 19 00:01:10,680 --> 00:01:12,180 So we're going to do this same. 20 00:01:12,180 --> 00:01:16,550 But dynamic import is a little bit a different way of importing. 21 00:01:16,770 --> 00:01:23,280 So what we have used so far was called static and now we can go back and change everything if you want. 22 00:01:23,550 --> 00:01:27,120 So in the models, I'm going to create a file called model. 23 00:01:27,370 --> 00:01:34,710 Remember the convention capital N and in views, I'm going to say you are actually going to save you 24 00:01:34,710 --> 00:01:36,770 here that just nothing else. 25 00:01:37,200 --> 00:01:43,090 Now inside here, we're going to export a function you can export of any function you want. 26 00:01:43,290 --> 00:01:53,070 So I'm going to export const hello view and it will not take any parameters and it will return only 27 00:01:53,070 --> 00:01:58,620 actually not going to return because I'm going to consulate like here and I'm going to say export done 28 00:01:58,620 --> 00:02:05,100 by the view that I'm going to copy the same thing and I'm going to paste it in the model. 29 00:02:05,340 --> 00:02:07,020 But instead hello view. 30 00:02:07,020 --> 00:02:11,640 It's going to be Hello Model Nice and export done by the model. 31 00:02:12,510 --> 00:02:12,920 Nice. 32 00:02:14,010 --> 00:02:21,420 So the models interviews are done the is it's where we are going to import things but we're not importing 33 00:02:21,420 --> 00:02:23,730 static, but we're going to import dynamic. 34 00:02:23,850 --> 00:02:27,440 And for that reason I need a new file called indexed HTML. 35 00:02:27,660 --> 00:02:28,860 So I want to see the result. 36 00:02:30,150 --> 00:02:32,520 So I'm going to use the Emet abbreviation here. 37 00:02:32,520 --> 00:02:38,250 I'm going to enter and that will create HTML5 markup now in the body. 38 00:02:38,250 --> 00:02:49,980 I'm going to use the script S.A.C. and I'm going to load the model XML domain mean that is now you can 39 00:02:49,980 --> 00:02:50,910 test this one out. 40 00:02:50,910 --> 00:02:54,840 I'm going to use the open left server or you can open from the folder. 41 00:02:55,110 --> 00:02:55,700 The file. 42 00:02:55,710 --> 00:02:58,020 Right, OK, and I'm going to grab this one. 43 00:02:58,020 --> 00:03:02,010 I'm not going to work in the I'm not going to work in the Firefox. 44 00:03:02,010 --> 00:03:06,150 I'm going to work here in the in the Google Chrome. 45 00:03:06,160 --> 00:03:09,180 OK, now so how do we know it's working. 46 00:03:09,190 --> 00:03:10,260 Console that lock. 47 00:03:11,610 --> 00:03:12,690 It's working. 48 00:03:15,660 --> 00:03:16,980 OK, let's save it. 49 00:03:17,880 --> 00:03:18,720 Inspect it. 50 00:03:19,860 --> 00:03:20,430 Console. 51 00:03:20,970 --> 00:03:21,560 Here we go. 52 00:03:21,930 --> 00:03:23,280 Everything is nice. 53 00:03:24,480 --> 00:03:27,990 Now I am going to do the dynamic dynamic important. 54 00:03:28,260 --> 00:03:34,800 But first I need to tell you that dynamic import introduce a new function like form of import import 55 00:03:34,800 --> 00:03:42,930 that unlocks new capabilities compared to the static way of importing so we can use it as a lazy loading. 56 00:03:43,410 --> 00:03:50,010 So now we, we know that the importing modules from different folders. 57 00:03:50,010 --> 00:03:50,820 It's very important. 58 00:03:51,360 --> 00:03:53,280 And I'm going to do it here in two ways. 59 00:03:53,310 --> 00:03:58,830 The first way that I'm going to do is actually I'm going to import the model. 60 00:03:59,550 --> 00:03:59,940 Right. 61 00:04:00,150 --> 00:04:03,630 So I'm going to see constant here within the clear, constant call model. 62 00:04:03,900 --> 00:04:07,140 And I need to use a path here. 63 00:04:07,380 --> 00:04:12,390 So this part will go to the current directory, then models, then model dodgiest. 64 00:04:12,660 --> 00:04:18,390 Remember here, we didn't include the years before, but now actually you need to write. 65 00:04:18,840 --> 00:04:24,270 OK, so I'm going to import using again the keyword import in here. 66 00:04:24,270 --> 00:04:25,530 I'm going to pass in the model. 67 00:04:25,680 --> 00:04:28,110 So if anything is wrong, it's not going to go there. 68 00:04:28,440 --> 00:04:36,090 But I haven't told you that every time that we are importing dynamically that will return a promise 69 00:04:36,630 --> 00:04:38,220 and we know how to handle promise. 70 00:04:38,220 --> 00:04:38,490 Right. 71 00:04:39,090 --> 00:04:42,850 Using that method now inside is then method. 72 00:04:42,870 --> 00:04:49,350 I'm going to create a module so you can call it whatever you want and I'm going to create a narrow function 73 00:04:49,350 --> 00:04:49,800 here. 74 00:04:50,940 --> 00:04:58,500 OK, inside this, I'm going to use the module to call hello. 75 00:05:00,160 --> 00:05:06,500 Model, the function that we created inside the model, so I have access to this one, right. 76 00:05:07,810 --> 00:05:08,590 Let's see here. 77 00:05:08,620 --> 00:05:10,680 Here it is, export done by the model. 78 00:05:10,830 --> 00:05:14,220 Nice how we can do this the other way. 79 00:05:14,230 --> 00:05:19,610 I told you that I'm going to do it in a different way, so I'm going to use the async away function. 80 00:05:19,660 --> 00:05:24,120 Remember, when we are dealing with promises, we can always do that. 81 00:05:24,370 --> 00:05:29,310 So async function called load, it's not going to take any parameters here. 82 00:05:29,630 --> 00:05:38,530 I'm going to say let's get view data and I'm going to say I'll wait here and I'm going to import it 83 00:05:38,530 --> 00:05:38,990 again. 84 00:05:39,610 --> 00:05:41,350 Now, where is this stored? 85 00:05:41,350 --> 00:05:42,160 Interviews. 86 00:05:42,490 --> 00:05:44,080 Who interviews? 87 00:05:44,320 --> 00:05:45,730 Jay is very cool. 88 00:05:46,030 --> 00:05:48,580 Now I'm going to say here, get new data that. 89 00:05:48,880 --> 00:05:49,610 Hello. 90 00:05:49,640 --> 00:05:54,070 You know, I do have the access of the view and that is pretty much it. 91 00:05:54,370 --> 00:05:55,000 So save it. 92 00:05:55,300 --> 00:05:56,230 Let's go back here. 93 00:05:56,260 --> 00:06:02,810 It's not working because we are not calling this low function nice. 94 00:06:03,250 --> 00:06:08,200 So you now know how this dynamic import is working now? 95 00:06:08,200 --> 00:06:14,800 Again, dynamic import unlocks new capabilities of of compared to the static one. 96 00:06:14,800 --> 00:06:20,080 And we can just get a new way of doing things. 97 00:06:20,230 --> 00:06:24,400 So you can just do this wherever we want. 98 00:06:24,560 --> 00:06:24,820 Right. 99 00:06:25,090 --> 00:06:26,800 So I didn't do it at top here. 100 00:06:26,800 --> 00:06:29,290 I didn't declare the import on top like before. 101 00:06:29,900 --> 00:06:32,230 Remember all of the inputs, we put it on the top. 102 00:06:32,470 --> 00:06:42,250 OK, next next function is called big int he and I'm going to call this one here and back it. 103 00:06:42,760 --> 00:06:45,520 Now what is big into. 104 00:06:45,520 --> 00:06:51,280 So one of the most anticipated features of JavaScript is here and it's actually allows developers to 105 00:06:51,280 --> 00:06:57,430 use much greater numbers in a four hour Jasco. 106 00:06:57,520 --> 00:07:01,190 Right for our is for data processing or data handling. 107 00:07:01,390 --> 00:07:07,690 Now at the moment, the maximum number we can use, we can store as an integer is to buy power of three 108 00:07:08,830 --> 00:07:09,570 minus one. 109 00:07:10,120 --> 00:07:16,930 So big integer will make this, will improve this. 110 00:07:17,740 --> 00:07:21,330 I'm not going to default but will improve the way we are doing. 111 00:07:21,490 --> 00:07:23,380 We are doing with the whole number. 112 00:07:23,390 --> 00:07:25,690 So we are going to have a larger whole numbers. 113 00:07:25,930 --> 00:07:30,250 There will be larger than to the power to buy power of fifty three minus one. 114 00:07:30,610 --> 00:07:30,980 Right. 115 00:07:31,310 --> 00:07:38,110 OK, now big integer can be used for example by developers. 116 00:07:38,110 --> 00:07:40,060 If we for example type. 117 00:07:40,330 --> 00:07:43,420 Let's create let old number here. 118 00:07:43,960 --> 00:07:51,310 And I'm just want to show you that we can use the three, we can use the number primitive here. 119 00:07:51,520 --> 00:07:51,930 Right. 120 00:07:52,240 --> 00:07:58,680 And I'm going to say Max safe integer and console log the old number. 121 00:08:00,280 --> 00:08:01,930 Now I'm going to copy this one here. 122 00:08:03,310 --> 00:08:04,420 I'm going to paste it here. 123 00:08:04,780 --> 00:08:05,230 Nice. 124 00:08:05,410 --> 00:08:07,570 I do have this number. 125 00:08:08,350 --> 00:08:11,590 So this is coming by to two by power of fifty three minus one. 126 00:08:12,430 --> 00:08:15,160 So well it's not always working. 127 00:08:15,160 --> 00:08:22,210 For example, I'm just going to comment this one out and I'm going to use comes a couple of times here. 128 00:08:22,210 --> 00:08:30,130 I'm going to add oops I'm going to add plus one, I'm going to add plus ten sorry plus two and I'm going 129 00:08:30,130 --> 00:08:31,420 to add plus ten. 130 00:08:31,720 --> 00:08:34,900 OK, and actually uncommon this one. 131 00:08:34,900 --> 00:08:36,400 So I'm going to copy it again. 132 00:08:37,180 --> 00:08:38,050 Paste it here. 133 00:08:38,770 --> 00:08:39,370 Put it there. 134 00:08:40,060 --> 00:08:40,540 That's it. 135 00:08:40,750 --> 00:08:41,920 So I adding one. 136 00:08:42,190 --> 00:08:43,930 This is the first one actually I'm adding one. 137 00:08:44,290 --> 00:08:47,380 It's correct but I'm adding two and this is not changed. 138 00:08:47,710 --> 00:08:48,550 I'm adding ten. 139 00:08:48,970 --> 00:08:49,600 Look at this. 140 00:08:49,720 --> 00:08:50,560 This is not correct. 141 00:08:51,040 --> 00:08:53,860 That's why we need to use the big integer. 142 00:08:53,860 --> 00:08:56,020 So how we are going to create this one. 143 00:08:56,260 --> 00:08:59,200 So these three here actually are false. 144 00:08:59,410 --> 00:09:00,670 They're not correct. 145 00:09:00,790 --> 00:09:02,770 Representation of what we're trying to achieve. 146 00:09:03,100 --> 00:09:05,530 So how we can use the big integer. 147 00:09:05,860 --> 00:09:10,330 So we need to actually have N in the end. 148 00:09:10,660 --> 00:09:18,520 So we need to have and end letter and append it at the end of the number. 149 00:09:18,970 --> 00:09:25,600 So the end annotates that this is a big integer and should be treated by the JavaScript engine a little 150 00:09:25,600 --> 00:09:26,440 bit differently. 151 00:09:26,440 --> 00:09:37,030 Right now I'm going to create your new number and the new number will be big sorry, big integer from 152 00:09:37,030 --> 00:09:38,140 the old number. 153 00:09:40,120 --> 00:09:40,480 Right. 154 00:09:40,480 --> 00:09:44,410 And I'm going to come as a log the new number 155 00:09:47,500 --> 00:09:53,130 so I'm going to copy again every day now based there based them here again and here it is. 156 00:09:53,470 --> 00:09:59,440 So I have the old number and I have the new integer that ends with N so. 157 00:09:59,500 --> 00:10:05,920 This tells the JavaScript engine, OK, so we are dealing with big integers right now. 158 00:10:06,940 --> 00:10:17,560 Also, what we can say here is that any mathematical operations that are can be done with the the numbers 159 00:10:17,560 --> 00:10:21,520 can be also used in the with the integers. 160 00:10:21,640 --> 00:10:31,870 OK, now also we can check the type of for example, I can see type of and if I have one and just imagine 161 00:10:32,200 --> 00:10:33,790 it, I will just see it. 162 00:10:33,790 --> 00:10:38,890 Is this equal to big begin and they should return me. 163 00:10:38,890 --> 00:10:39,310 True. 164 00:10:39,700 --> 00:10:40,060 Right. 165 00:10:40,930 --> 00:10:53,950 Also what I can say the typo and I'm going to say big int and here I'm going to pass this one just like 166 00:10:53,950 --> 00:10:59,950 that and I will see if this is equal to big and I will hit enter. 167 00:11:00,340 --> 00:11:01,230 That means it's true. 168 00:11:01,240 --> 00:11:05,620 So any number that we're going to put here, we can convert it to the big integer. 169 00:11:05,620 --> 00:11:05,890 Right. 170 00:11:06,490 --> 00:11:13,030 So also when wrapped in object, a big integer will be considered as a normal object. 171 00:11:13,030 --> 00:11:19,150 And this we will check with the type of, again, type of object. 172 00:11:19,600 --> 00:11:21,940 And I'm going to pass here once and again. 173 00:11:22,480 --> 00:11:28,950 And if this is equal to object, then we go, then it is true. 174 00:11:29,710 --> 00:11:30,190 That's it. 175 00:11:30,340 --> 00:11:34,190 So when wrapped in an object, integer will be considered as a normal object. 176 00:11:34,540 --> 00:11:36,880 OK, so the big integer are nothing special. 177 00:11:36,880 --> 00:11:42,950 We can just used larger numbers and they're defined with at the end. 178 00:11:43,640 --> 00:11:44,010 Cool. 179 00:11:44,440 --> 00:11:46,570 Let's move on now. 180 00:11:46,790 --> 00:11:47,440 What's the next. 181 00:11:47,920 --> 00:11:50,020 Next one is private class variables. 182 00:11:50,500 --> 00:11:52,480 OK, for this one we need to write a class. 183 00:11:52,660 --> 00:11:59,830 So private class variable means that we can add a simple hash symbol in front of our variable or a function 184 00:12:00,100 --> 00:12:06,350 and we can reserve them just for that class to be used internally inside of that class. 185 00:12:06,880 --> 00:12:10,480 So here I'm going to say here, begin 186 00:12:13,540 --> 00:12:14,100 now. 187 00:12:14,260 --> 00:12:17,560 This one will be number three. 188 00:12:18,520 --> 00:12:18,960 Right. 189 00:12:19,120 --> 00:12:20,200 And I'm going to copy it. 190 00:12:22,330 --> 00:12:29,870 OK, now I'm going to create a class student here and this class will have an empty constructor, I'm 191 00:12:29,870 --> 00:12:31,230 not going to set anything inside. 192 00:12:31,640 --> 00:12:35,260 This is just to show you that we can do it like this. 193 00:12:35,600 --> 00:12:43,400 So I'm going to have an empty constructor and I'm going to specify a variable called Wawn and I'm going 194 00:12:43,400 --> 00:12:44,630 to pass my year of birth. 195 00:12:44,660 --> 00:12:44,990 Right. 196 00:12:46,640 --> 00:12:50,440 Simple calc each function. 197 00:12:50,690 --> 00:13:02,330 This function will just consulate like the current year 2020, minus the this actually dot board. 198 00:13:03,270 --> 00:13:03,690 Next. 199 00:13:04,360 --> 00:13:13,740 OK, so as I told you here, we use hash in the name of the variable in this by adding this hash symbol 200 00:13:13,740 --> 00:13:20,910 means that we are reserving these variable as a private and debt to be used entirely for inside this 201 00:13:20,910 --> 00:13:21,330 class. 202 00:13:21,840 --> 00:13:25,120 OK, now can we use it outside of class? 203 00:13:25,170 --> 00:13:26,570 That is the question. 204 00:13:26,820 --> 00:13:33,870 So I'm going to say const student and I'm going to create I'm going to create the instance of the new 205 00:13:34,470 --> 00:13:35,330 student class. 206 00:13:35,340 --> 00:13:35,570 Right. 207 00:13:35,750 --> 00:13:42,960 It doesn't require any parameters if I'm going to say student, but first I'm going to say corkage and 208 00:13:42,960 --> 00:13:44,680 let's see what will happen. 209 00:13:44,700 --> 00:13:49,050 I'm just going to copy the entire one, save it, based it here, enter. 210 00:13:49,350 --> 00:13:51,840 And here it is is calling thirty three. 211 00:13:52,140 --> 00:13:54,570 But if I use student that 212 00:13:57,210 --> 00:14:00,420 hash one look at this error. 213 00:14:00,720 --> 00:14:08,250 Uncaught syntax private field born must be declared in the inclosing class night so we can declare the 214 00:14:08,250 --> 00:14:12,090 private class variable by adding the hash symbol in front of it. 215 00:14:12,340 --> 00:14:12,720 Right. 216 00:14:13,170 --> 00:14:19,470 And we can access the private fields when we have an instant, when we stenchy the object of that same 217 00:14:19,470 --> 00:14:19,910 class. 218 00:14:20,550 --> 00:14:22,110 But this is not possible outside. 219 00:14:22,110 --> 00:14:28,150 So we can do direct accessing through the student instance, right? 220 00:14:28,430 --> 00:14:31,430 It's not possible because a private pool. 221 00:14:32,220 --> 00:14:35,740 So this is the UNCAC syntax error. 222 00:14:36,060 --> 00:14:36,540 Nice. 223 00:14:37,610 --> 00:14:38,160 Next one. 224 00:14:38,910 --> 00:14:45,240 So this is all about the private classes so we can even create a private function and then we may not 225 00:14:45,240 --> 00:14:47,610 be able to access it here outside. 226 00:14:47,870 --> 00:14:48,200 Nice. 227 00:14:49,020 --> 00:14:58,020 So the number four was the number for the number four is actually promise all settled now. 228 00:14:58,320 --> 00:15:03,870 I've included the promises last lecture and now you will see why. 229 00:15:03,870 --> 00:15:07,230 Because here I wouldn't be able to explain this one correctly. 230 00:15:07,680 --> 00:15:09,930 And I'm going to just going to clean everything on top here. 231 00:15:09,930 --> 00:15:12,090 We don't need us now. 232 00:15:12,510 --> 00:15:13,200 Promise. 233 00:15:13,620 --> 00:15:19,020 All settled method is implementation of asynchronous operations. 234 00:15:19,020 --> 00:15:22,920 So all the promises are implementation of asynchronous operation. 235 00:15:23,130 --> 00:15:24,390 So promise in JavaScript. 236 00:15:24,390 --> 00:15:25,500 I'm going to go back a little bit. 237 00:15:25,650 --> 00:15:30,450 Just the history are used to handle asynchronous operations. 238 00:15:30,630 --> 00:15:33,000 Each promise has three stages, right? 239 00:15:33,610 --> 00:15:42,030 States or stages, fulfilled or resolved for successful rejected, four failed and either fulfilled 240 00:15:42,030 --> 00:15:42,750 or rejected. 241 00:15:42,900 --> 00:15:44,400 There are no other state. 242 00:15:44,910 --> 00:15:49,560 So promises are implemented in the standard part of JavaScript core language. 243 00:15:49,800 --> 00:15:52,170 And we have last lecture. 244 00:15:52,170 --> 00:15:55,950 We just look at all res reject and resolve. 245 00:15:56,460 --> 00:16:02,910 Now, you know, I'm going to show you both now I'm going to say problem is that all in then I'm going 246 00:16:02,910 --> 00:16:09,450 to use the example, same example with promise that all setup now all set of metal, on the other hand, 247 00:16:10,140 --> 00:16:14,420 is introduced at this stage in E is twenty twenty. 248 00:16:14,580 --> 00:16:22,590 So before we didn't have this all settled method, now we had the old and we are going to do this for 249 00:16:22,770 --> 00:16:28,470 no promise that oh first I'm going to do year six, promise that. 250 00:16:28,470 --> 00:16:35,010 Oh remember the promise that old takes and the array of promises holds the execution, throw out error 251 00:16:35,550 --> 00:16:40,350 and reject promise once rejected promise occur in the array of promises. 252 00:16:40,350 --> 00:16:43,500 So if something is happening is going to halt the execution. 253 00:16:43,980 --> 00:16:45,330 OK, enough talking. 254 00:16:45,330 --> 00:16:46,020 Let's do something. 255 00:16:46,020 --> 00:16:59,640 Const promise one equal new promise and here is hopes each side will have resolve and reject. 256 00:17:00,000 --> 00:17:02,970 Right create another function. 257 00:17:02,970 --> 00:17:09,570 We're not going to pass anything here, just we're going to set the set timeout and we set them out. 258 00:17:10,290 --> 00:17:17,850 Actually said time out now set them will always run successful. 259 00:17:17,850 --> 00:17:19,860 This is not API that something can go wrong. 260 00:17:20,070 --> 00:17:28,530 So we know that after a couple of by the milliseconds that we define, we know that this will be resolved 261 00:17:28,530 --> 00:17:29,310 in here. 262 00:17:29,310 --> 00:17:32,550 We can pass the state resolve. 263 00:17:32,940 --> 00:17:34,800 We can pass the milliseconds. 264 00:17:34,800 --> 00:17:38,160 I'm going to start with five hundred in the last one. 265 00:17:38,160 --> 00:17:41,430 I'm going to put a value that later on I will print it out. 266 00:17:41,670 --> 00:17:42,900 So promise one. 267 00:17:44,010 --> 00:17:44,430 Nice. 268 00:17:45,240 --> 00:17:46,260 So oops. 269 00:17:48,030 --> 00:17:49,650 Instead of semicolon I just put it. 270 00:17:50,280 --> 00:17:50,730 Yeah. 271 00:17:51,180 --> 00:17:51,600 Close. 272 00:17:51,750 --> 00:18:00,030 So copy this two more times and change this to promise to you and this will be promise to, this will 273 00:18:00,030 --> 00:18:02,310 be worth let's say reject this one. 274 00:18:04,020 --> 00:18:11,130 And this will be one thousand milliseconds, so after one second and this will be after two seconds, 275 00:18:11,820 --> 00:18:13,770 milliseconds, we're talking about milliseconds. 276 00:18:13,800 --> 00:18:14,890 This should be three here. 277 00:18:15,270 --> 00:18:21,510 This should be three right now when we did promise. 278 00:18:21,510 --> 00:18:23,670 So we have the access of the promised class. 279 00:18:24,330 --> 00:18:25,860 Now, I didn't explain here. 280 00:18:25,860 --> 00:18:29,280 So promise one is an instance of the promise class, right? 281 00:18:29,430 --> 00:18:32,640 Because they are all stored in the promise. 282 00:18:32,650 --> 00:18:34,500 So we have access to this promise class. 283 00:18:34,690 --> 00:18:38,930 So promise that all in here I'm going to pass an array of promises. 284 00:18:39,090 --> 00:18:46,380 So I'm going to see a promise, one promise to and promise three. 285 00:18:46,410 --> 00:18:52,920 Right, OK, then I'm going to use the then method on it and I have the data. 286 00:18:56,030 --> 00:19:05,300 And I'm going to Locke what so what we need to counsel here, only the data, that's it right here I'm 287 00:19:05,300 --> 00:19:06,860 going to say catch. 288 00:19:07,700 --> 00:19:10,100 So we're going to catch the error if there is an error. 289 00:19:10,130 --> 00:19:12,470 And obviously we do have one. 290 00:19:13,040 --> 00:19:13,450 Right. 291 00:19:14,710 --> 00:19:25,010 And I'm going to say cancel the error happened and I'm going to see error here. 292 00:19:25,040 --> 00:19:25,610 That's it. 293 00:19:26,360 --> 00:19:27,440 Semicolon at the end. 294 00:19:27,460 --> 00:19:28,860 No copying 30. 295 00:19:29,960 --> 00:19:37,280 So if something is happening here, the problem is spending an error happened. 296 00:19:37,820 --> 00:19:40,340 The execution of the problem is all right. 297 00:19:40,460 --> 00:19:41,240 It's halted. 298 00:19:41,390 --> 00:19:41,890 That's it. 299 00:19:42,560 --> 00:19:44,670 So takes in the real promises. 300 00:19:44,690 --> 00:19:48,440 Halt the execution if something happens, throws in there or. 301 00:19:48,590 --> 00:19:49,040 Yep. 302 00:19:49,040 --> 00:19:49,980 And that's it. 303 00:19:50,720 --> 00:19:52,370 Now, this was promised that. 304 00:19:52,370 --> 00:19:55,610 Oh, but we do have now something else called. 305 00:19:55,620 --> 00:19:59,150 I'm just going to comment this one comment called Promise. 306 00:20:02,910 --> 00:20:09,650 From promise that all settled, right? 307 00:20:09,910 --> 00:20:11,360 So problem is that all settled? 308 00:20:11,380 --> 00:20:12,700 So what's the difference here? 309 00:20:13,210 --> 00:20:13,940 OK. 310 00:20:14,320 --> 00:20:22,360 The problem is that all settled return returns a result of promises, but that will be regardless if 311 00:20:22,360 --> 00:20:28,900 they are rejected or fulfilled and it will just return the result. 312 00:20:29,530 --> 00:20:31,060 So how are we going to do it here? 313 00:20:31,090 --> 00:20:36,360 OK, now the syntaxes promised that all settled in here. 314 00:20:36,370 --> 00:20:39,460 We're going to pass the array of the promises so I can copy the same one. 315 00:20:40,030 --> 00:20:41,800 Actually, I can copy the scene. 316 00:20:43,150 --> 00:20:49,620 I can uncommented and here I'm going to change all set up nice. 317 00:20:50,500 --> 00:20:52,330 So everything is pretty much it. 318 00:20:52,660 --> 00:21:00,890 So this actually will return an array of promises, regardless of if they are rejected or fulfilled. 319 00:21:01,240 --> 00:21:03,730 And I'm going to copy the entire one actually. 320 00:21:03,730 --> 00:21:05,050 First, I'm going to copy this. 321 00:21:05,570 --> 00:21:06,790 I'm going to pasted there. 322 00:21:07,450 --> 00:21:10,330 Nice kind of copy this one. 323 00:21:11,790 --> 00:21:13,120 Imgur pasted there. 324 00:21:14,230 --> 00:21:15,100 And here it is. 325 00:21:15,100 --> 00:21:19,060 I do have array of three and it give me the status. 326 00:21:19,060 --> 00:21:20,690 It's fulfilled for the first one. 327 00:21:21,070 --> 00:21:26,680 So the first one will go, its return is going to be resolved successfully and it's going to be fulfilled 328 00:21:26,680 --> 00:21:28,030 in the values promise one. 329 00:21:28,300 --> 00:21:30,100 The second one will be rejected. 330 00:21:30,130 --> 00:21:30,750 Here it is. 331 00:21:31,450 --> 00:21:38,200 And the reason promised to do is give you the reason and the third is going to be again resolved and 332 00:21:38,200 --> 00:21:41,660 he's going to give us a value is going to be fulfilled, resolved in a value. 333 00:21:42,010 --> 00:21:46,720 So regardless of any error here happening or any. 334 00:21:48,400 --> 00:21:51,570 So if anything happens here, it's still going to be executed. 335 00:21:51,580 --> 00:21:53,290 That's why I'm trying to say it now. 336 00:21:53,290 --> 00:21:57,910 It's still going to return an array of promises, regardless of their outcome. 337 00:21:58,120 --> 00:22:01,330 Either will be the status will be fulfilled or rejected. 338 00:22:01,340 --> 00:22:01,960 So there is. 339 00:22:02,320 --> 00:22:02,780 That's it. 340 00:22:02,800 --> 00:22:04,030 Nothing else can be here. 341 00:22:04,780 --> 00:22:05,200 Nice. 342 00:22:05,260 --> 00:22:07,000 So one more I do have. 343 00:22:07,330 --> 00:22:10,720 And that is the optional chaining operator. 344 00:22:12,070 --> 00:22:12,490 No. 345 00:22:14,580 --> 00:22:20,330 This is the last one, I promise, this lecture is going to crazy long, but we have to do it. 346 00:22:20,580 --> 00:22:26,880 So the optional chaining operated optional training operator provides a way to simplify accessing values 347 00:22:26,880 --> 00:22:29,780 through the connected object when it's possible. 348 00:22:30,030 --> 00:22:34,770 So the optional training operator has a syntax like this question mark dot. 349 00:22:35,130 --> 00:22:42,780 So this permits reading the value of a property located deep in the chain of the connected object without 350 00:22:42,780 --> 00:22:50,340 having to expressly validate that each reference in the chain is valid to question mark dot operator 351 00:22:50,940 --> 00:22:53,790 function similarly to dot changing operator. 352 00:22:54,600 --> 00:22:55,060 Nice. 353 00:22:55,800 --> 00:23:04,320 So let's create here an example and you will understand where all of this I just mumbled seconds adventurer. 354 00:23:06,690 --> 00:23:16,470 And this will be of an object that holds a name and I'm going to put it here, Rick, and also a cat 355 00:23:17,160 --> 00:23:21,270 that will have another object that will have a name of a cat. 356 00:23:21,420 --> 00:23:21,780 Right. 357 00:23:22,750 --> 00:23:23,150 Nice. 358 00:23:23,970 --> 00:23:25,620 I'm I'm done with this object. 359 00:23:25,630 --> 00:23:35,010 So now if I create a const here dog named, for example, and I just try to access this chain, here 360 00:23:35,010 --> 00:23:35,310 it is. 361 00:23:35,490 --> 00:23:37,950 So this is inside a chain. 362 00:23:38,190 --> 00:23:47,010 So if I access this chain by adventure, dog name, sorry, dot, dot, dot name, what will happen? 363 00:23:47,130 --> 00:23:48,320 I don't have a dog here. 364 00:23:48,330 --> 00:23:48,670 Right. 365 00:23:48,930 --> 00:23:51,690 So this should throw me an error. 366 00:23:52,020 --> 00:23:59,160 But what kind of an error so uncute cannot read property name of undefined ness. 367 00:23:59,550 --> 00:24:00,990 So this is an error. 368 00:24:01,290 --> 00:24:08,040 But with, with this optional chaining operator, we can do this, we can simplify this by saying, 369 00:24:08,040 --> 00:24:16,110 OK, so I'm going to come in this one, I'm going to say cost dog name and we can check in the adventure. 370 00:24:16,740 --> 00:24:17,170 Right. 371 00:24:17,340 --> 00:24:18,360 The dog. 372 00:24:18,990 --> 00:24:26,880 Then I'm going to use the question that need now what what this will do, it will not actually throw 373 00:24:26,880 --> 00:24:27,810 us an error back. 374 00:24:28,080 --> 00:24:34,560 It's going to give us undefined and it will continue working with the execution right now. 375 00:24:35,700 --> 00:24:40,670 That is that is the point of the question mark operator. 376 00:24:40,680 --> 00:24:47,160 So it is similar to the dot chaining operator, except that instead of causing an error, if a reference 377 00:24:47,160 --> 00:24:52,310 is all or undefined, it will return value of undefined, and that's pretty much it. 378 00:24:52,740 --> 00:24:54,300 So it can be used. 379 00:24:54,300 --> 00:24:56,270 Same for the function calls. 380 00:24:56,550 --> 00:25:02,400 So if we something's wrong with the function, it is also going to return undefined if the function 381 00:25:02,550 --> 00:25:03,640 doesn't exist. 382 00:25:04,140 --> 00:25:09,690 So how we can check this simple I'm going to call a function that doesn't exist, but first I'm going 383 00:25:09,690 --> 00:25:11,900 to do it like we did before. 384 00:25:12,150 --> 00:25:13,950 So adventurer I'm going to use. 385 00:25:15,580 --> 00:25:17,340 So why is not giving me this? 386 00:25:17,580 --> 00:25:18,630 OK, it doesn't matter. 387 00:25:19,500 --> 00:25:28,470 So I'm going to say adventurer dot some non existent method and I'm going to say it here. 388 00:25:28,470 --> 00:25:33,120 I'm going to call it like this copy paste it down. 389 00:25:33,120 --> 00:25:36,000 Actually, I need to refresh because I'm using the same constant here. 390 00:25:36,300 --> 00:25:40,860 If you don't want to do it, OK, I need to select oops. 391 00:25:41,130 --> 00:25:43,200 I need to select to delete it now. 392 00:25:43,200 --> 00:25:43,850 It will work. 393 00:25:45,060 --> 00:25:52,770 Here is an adventure that some nonexisting method is not a function qu so is giving me not a function. 394 00:25:53,010 --> 00:25:57,030 So how we can escape this one with optional chaining operator. 395 00:25:57,030 --> 00:25:59,720 OK, let's do so. 396 00:25:59,730 --> 00:26:06,390 I'm going to come in this one again and I am going to say cancel that log. 397 00:26:06,390 --> 00:26:10,740 So I'm going to cancel the log the the one that what we trying to do adventurer. 398 00:26:11,310 --> 00:26:12,990 And I'm just going to copy it. 399 00:26:14,640 --> 00:26:19,410 So adventurer that some not existing method in here. 400 00:26:19,410 --> 00:26:24,120 I'm going to use the question mark dot and then the brackets. 401 00:26:24,390 --> 00:26:28,350 Now I should expect here to return undefined output. 402 00:26:28,560 --> 00:26:31,890 Actually we need to copy the entire thing again. 403 00:26:32,250 --> 00:26:34,650 We need to refresh it, based it there. 404 00:26:35,340 --> 00:26:36,060 And here it is. 405 00:26:36,060 --> 00:26:38,850 The first one defined is coming from this in the second. 406 00:26:38,850 --> 00:26:40,890 Undefined is coming for this now. 407 00:26:40,890 --> 00:26:44,730 It's not going to throw us and there we will be able to continue working in. 408 00:26:44,730 --> 00:26:49,470 That is the difference between the optional changing operator and the dot changing operator. 409 00:26:49,710 --> 00:26:54,810 So instead of causing us an error, if a reference is no or undefined, it will return to value. 410 00:26:54,990 --> 00:26:57,390 So this is actually a value of undefined. 411 00:26:58,020 --> 00:26:58,410 Right. 412 00:26:59,190 --> 00:27:04,350 And also the function it will return is undefined as well if that function doesn't exist. 413 00:27:04,650 --> 00:27:07,880 So, yeah, that is it for this one. 414 00:27:08,220 --> 00:27:14,580 So what we have done, the optional training operator, the problem is that all it's different than 415 00:27:14,580 --> 00:27:21,270 from the all settled because the old setup will just go through all of the promises regardless of their 416 00:27:22,620 --> 00:27:23,250 outcome. 417 00:27:23,400 --> 00:27:28,560 Right in this one was halting, stopping if something was wrong, if someone was rejected. 418 00:27:28,860 --> 00:27:29,280 Nice. 419 00:27:30,510 --> 00:27:36,900 Now we have primitive class variables we can define with dash sorry hash in the name of that one. 420 00:27:37,230 --> 00:27:43,350 And also they can be used inside function, but they will not be able to be called like this, a console 421 00:27:43,350 --> 00:27:44,130 that log. 422 00:27:44,850 --> 00:27:46,110 So I'm going to write it here. 423 00:27:46,110 --> 00:27:51,290 Student that hash board that. 424 00:27:51,360 --> 00:27:54,090 So this will throw an error. 425 00:27:54,300 --> 00:27:54,720 Right. 426 00:27:55,380 --> 00:27:57,810 So you're not going to be able to call it now. 427 00:27:57,810 --> 00:27:58,740 The big integer. 428 00:27:59,130 --> 00:28:02,640 Big integer is something that will help us to deal with the larger numbers. 429 00:28:03,060 --> 00:28:05,310 And this is how we write it down and actually. 430 00:28:05,380 --> 00:28:12,140 It's Friday and at the end of the number, right, and we can check the type of weekend check. 431 00:28:12,700 --> 00:28:18,630 Yeah, we can do all of the mathematical operations for the normal numbers and the dynamic import. 432 00:28:18,640 --> 00:28:22,110 I just explain you with the main dodgiest file. 433 00:28:22,450 --> 00:28:23,500 We can import it. 434 00:28:24,190 --> 00:28:32,410 First, we need to call the entire path here and we can just import it because it's going to return 435 00:28:32,420 --> 00:28:32,860 promise. 436 00:28:32,860 --> 00:28:33,880 We need to use that. 437 00:28:34,720 --> 00:28:43,900 Or more simple, we can use async function in a way is only working with async functions as well, and 438 00:28:43,900 --> 00:28:45,310 that is pretty much it. 439 00:28:46,120 --> 00:28:47,290 So thank you very much. 440 00:28:47,530 --> 00:28:52,170 This lecturer has been super long, but I'm so sorry and I will see you in the next one.