1 00:00:01,230 --> 00:00:02,620 Hey there everyone. 2 00:00:02,700 --> 00:00:09,090 We're now ready for yes 10 or Xmas script 20 19. 3 00:00:09,120 --> 00:00:09,900 That's right. 4 00:00:09,900 --> 00:00:10,620 Every year. 5 00:00:10,650 --> 00:00:14,460 They're constantly trying to improve the language and that is javascript. 6 00:00:14,460 --> 00:00:18,370 And now ESPN is the latest. 7 00:00:18,410 --> 00:00:23,750 So what new features do we get in this new version of JavaScript. 8 00:00:24,650 --> 00:00:27,890 Well luckily for you there aren't too many. 9 00:00:27,920 --> 00:00:38,290 So let's start off with my favorite one and it's called flat and flat is a method that we can use on 10 00:00:38,530 --> 00:00:40,610 a race. 11 00:00:40,640 --> 00:00:50,470 Let me show you what I mean let's say I have a array variable that contains a very exciting array of 12 00:00:50,470 --> 00:00:57,640 1 2 3 4 5 if I now run array dot flat. 13 00:00:57,680 --> 00:01:02,050 Let's copy this code and run it here. 14 00:01:02,100 --> 00:01:03,570 What do you think will happen. 15 00:01:04,140 --> 00:01:09,400 Well absolutely nothing we return to a new array. 16 00:01:09,420 --> 00:01:17,540 It looks like but it looks the exact same but this is where Flight gets exciting. 17 00:01:17,550 --> 00:01:20,350 Imagine if this had nested arrays. 18 00:01:20,430 --> 00:01:29,190 So for example two and three where it's own array and then four and five were also an array nested inside 19 00:01:29,190 --> 00:01:30,950 of a bigger array. 20 00:01:31,170 --> 00:01:36,900 If I now copy this and let's call this array to find out. 21 00:01:36,930 --> 00:01:42,330 Copy this and pasted in here Hey check that out. 22 00:01:42,530 --> 00:01:46,160 We get a new array that is flattened. 23 00:01:46,340 --> 00:01:50,700 That is there's no nested Arrays anymore. 24 00:01:50,920 --> 00:01:58,040 All right let's keep going then and what happens if we have array 3 and array 3 is even more nested 25 00:01:58,190 --> 00:02:09,570 than we had before let's say we have one two three like this and then maybe we'll have a five that is 26 00:02:10,229 --> 00:02:14,270 well nested pretty deep like that. 27 00:02:14,310 --> 00:02:21,450 So now we have an array there's an other array and inside of that there's another array. 28 00:02:21,510 --> 00:02:23,110 What do you think will happen here. 29 00:02:23,410 --> 00:02:27,360 Want to copy and paste run this code. 30 00:02:27,380 --> 00:02:28,420 All right. 31 00:02:28,580 --> 00:02:36,550 So I get a new array back but we see that there's actually not a completely flat array. 32 00:02:36,560 --> 00:02:44,970 Instead we have one two three four but then five was only flattened one level so essentially just removed 33 00:02:45,150 --> 00:02:48,370 these brackets. 34 00:02:48,380 --> 00:02:54,470 Now the interesting thing with flat is that we can tell it how many layers to fly in the array. 35 00:02:54,620 --> 00:02:59,590 So if we go back to our example and in here the default was 1. 36 00:02:59,660 --> 00:03:01,370 But if we change this to two now 37 00:03:04,260 --> 00:03:12,720 let's copy and paste let's refreshes and run it again a look at that we have a completely flattened 38 00:03:12,900 --> 00:03:13,220 array. 39 00:03:13,800 --> 00:03:20,680 So in here I can tell it how many times I want to fly in or how many layers I want to fly in the array. 40 00:03:20,750 --> 00:03:20,990 All right. 41 00:03:21,000 --> 00:03:23,580 But I have a really exciting example for you. 42 00:03:23,580 --> 00:03:25,620 Get ready for this. 43 00:03:25,650 --> 00:03:30,510 Congratulations you just became the owner of Jurassic Park. 44 00:03:30,510 --> 00:03:39,600 You have a park with all these ancient creatures and the t rex over here is extremely dangerous. 45 00:03:39,600 --> 00:03:40,180 That's why. 46 00:03:40,200 --> 00:03:48,090 Well it's in its own contained area of the park with a lot of barricades around because we don't want 47 00:03:48,090 --> 00:03:50,090 the t rex going wild. 48 00:03:50,190 --> 00:03:52,710 But here's the problem. 49 00:03:52,790 --> 00:03:55,190 You're a bad guy at Jurassic Park. 50 00:03:55,190 --> 00:04:02,610 If I asked you hey how can you completely flan this array how would you go about doing it. 51 00:04:03,570 --> 00:04:04,560 Pause the video. 52 00:04:04,560 --> 00:04:05,400 Think about it. 53 00:04:05,400 --> 00:04:07,070 Ready for the answer. 54 00:04:07,080 --> 00:04:16,980 Well we can do Jurassic Park dot flat and then you might want to actually count how many arrays are 55 00:04:16,980 --> 00:04:20,730 nested in here but there is a trick here. 56 00:04:21,829 --> 00:04:31,870 I could maybe just do 50 let's see what happens if I copy this let's make this a little bit bigger. 57 00:04:31,990 --> 00:04:33,480 I refresh here. 58 00:04:33,580 --> 00:04:35,190 Copy and paste this. 59 00:04:35,230 --> 00:04:36,930 Let's see what happens. 60 00:04:37,060 --> 00:04:40,940 And Jurassic Park should be Jurassic Park. 61 00:04:40,960 --> 00:04:42,430 Let's copy this again. 62 00:04:42,460 --> 00:04:46,060 Let's refresh. 63 00:04:46,090 --> 00:04:47,070 All right. 64 00:04:47,170 --> 00:04:52,220 All the barricades are down and the animals are now going wild. 65 00:04:52,370 --> 00:04:56,800 And I just randomly picked 50 because I knew that 50 wasn't. 66 00:04:56,870 --> 00:05:02,720 Well how many nested arrays we have now in the exercise after this video. 67 00:05:02,860 --> 00:05:10,600 I'm gonna show you a cool little trick of making sure that we can fund the utmost level but that's for 68 00:05:10,600 --> 00:05:11,680 the exercise. 69 00:05:11,720 --> 00:05:20,440 Another really useful thing that you can do with flat is let's say you get a bunch of entries and these 70 00:05:20,440 --> 00:05:30,130 entries from your users come in and maybe we get Bob we get Sally entering their name but then we also 71 00:05:30,130 --> 00:05:38,440 get a bunch of entries that are completely empty with maybe Cindy at the end here using flat. 72 00:05:38,440 --> 00:05:47,870 We can actually offline the entries and clean up our data so I can say entries dot flat like this. 73 00:05:48,100 --> 00:05:58,000 And if I copy and paste this look at that it cleans up the data for me which is really really nice. 74 00:05:58,070 --> 00:05:58,550 All right. 75 00:05:58,550 --> 00:06:10,980 The next feature of ESPN is flat map and flat map as the name suggests allows us to use a flat function 76 00:06:11,910 --> 00:06:17,280 and the map function or method on an array. 77 00:06:17,370 --> 00:06:19,680 So let's do something fun here. 78 00:06:19,740 --> 00:06:25,100 Let's say we have the Jurassic Park again and this time around we're going to use flat map. 79 00:06:25,140 --> 00:06:32,220 So let's say Jurassic Park and we'll call this new variable. 80 00:06:32,290 --> 00:06:33,650 Let's do concept. 81 00:06:33,800 --> 00:06:35,210 Jurassic Park. 82 00:06:35,420 --> 00:06:40,020 Chaos and this chaos will have. 83 00:06:40,020 --> 00:06:44,230 While the Jurassic Park array that we had above. 84 00:06:44,270 --> 00:06:46,160 Let's make this a little bit bigger. 85 00:06:46,370 --> 00:06:49,730 And now we can use a flat map to do something interesting. 86 00:06:51,110 --> 00:07:01,670 I can say for each item that we're going to fun we're going to get a creature and this creature using 87 00:07:01,670 --> 00:07:06,730 arrow functions is going to get creature plus the T-Rex. 88 00:07:06,740 --> 00:07:10,310 So I'm going to copy the T-Rex over here. 89 00:07:10,430 --> 00:07:16,910 So each creature is going to get a T-Rex as a neighbor which is well not good. 90 00:07:16,910 --> 00:07:23,840 They're all going to get eaten by the T-Rex is the T-Rex they cannot carnivore I'm not sure you'll have 91 00:07:23,840 --> 00:07:24,850 to google that on your own. 92 00:07:25,240 --> 00:07:25,760 All right. 93 00:07:25,820 --> 00:07:36,710 So we have the Jurassic Park flat map so I'm flattening the Jurassic Park and then mapping over this 94 00:07:36,840 --> 00:07:42,170 flattened array and doing some sort of a map function to it. 95 00:07:42,920 --> 00:07:53,230 So let's see what happens if I now copy this and I paste this in if I now check out what Jurassic Park 96 00:07:53,410 --> 00:08:04,680 chaos is and I hit enter oh boy look at that we have t rex neighbors with all the creatures and while 97 00:08:04,740 --> 00:08:11,940 it's absolute chaos and Jurassic Park flat map allows us to use the basic map function and then flattens 98 00:08:12,030 --> 00:08:14,980 the result to a depth of one. 99 00:08:15,000 --> 00:08:16,500 All right let's keep going. 100 00:08:16,590 --> 00:08:19,030 Next is a very very simple one. 101 00:08:19,050 --> 00:08:22,970 Let's say you get a user email and user email. 102 00:08:22,980 --> 00:08:29,880 Well it gets entered a little incorrectly so we get a bunch of spaces and then we have Eddie the Eagle 103 00:08:30,000 --> 00:08:39,200 at gmail dot com that we receive from the user or maybe we have user email too. 104 00:08:39,659 --> 00:08:50,610 And this time around Johnny Dangerous at G.M. dot com enters their information but we have again some 105 00:08:50,610 --> 00:08:52,580 blank spaces. 106 00:08:52,690 --> 00:08:53,930 What can we do. 107 00:08:53,980 --> 00:09:04,890 Well with the new iOS 10 feature we can simply say user email dot trim start on a string and it will 108 00:09:04,890 --> 00:09:17,600 trim the beginning and user email too can say trim and and trim the end of the string. 109 00:09:17,830 --> 00:09:20,800 So let's console dialogue log this and see what happens 110 00:09:24,300 --> 00:09:33,460 if I copy this and make sure we declare these variables so be const and make sure that I can smell e-mail 111 00:09:33,490 --> 00:09:34,600 right. 112 00:09:34,600 --> 00:09:39,220 If I copy this now and enter it in here 113 00:09:42,230 --> 00:09:48,870 I don't know if you can see but now my strings don't have any blank spaces in them. 114 00:09:49,040 --> 00:09:57,890 If I check out user email here you see that the blank space is still there but the new generated string 115 00:09:58,820 --> 00:10:04,720 user email start won't have any blank spaces. 116 00:10:04,840 --> 00:10:08,840 Nice and easy. 117 00:10:08,890 --> 00:10:10,750 All right we're flying through these. 118 00:10:10,780 --> 00:10:11,760 What's next. 119 00:10:11,770 --> 00:10:13,650 We only have a few more left. 120 00:10:13,720 --> 00:10:15,320 Actually two more left. 121 00:10:15,400 --> 00:10:18,570 The next one is called form entries. 122 00:10:18,760 --> 00:10:23,950 It transforms a list of key value pairs into an object. 123 00:10:23,950 --> 00:10:29,260 Let me show you what I mean let's clear this and let's just comment. 124 00:10:29,260 --> 00:10:30,440 All of this. 125 00:10:30,880 --> 00:10:36,650 Maybe bring it down to the bottom and focus on this one. 126 00:10:36,770 --> 00:10:48,630 So imagine we had some user profiles that we receive but these user profiles are formatted in the wrong 127 00:10:48,630 --> 00:10:49,560 way. 128 00:10:49,560 --> 00:10:56,850 So we have let's say an array and inside of an array we have the user profiles of a game. 129 00:10:56,850 --> 00:11:07,330 So we have let's call him Commander Tom as the player name and Commander Tom is 23 years old. 130 00:11:07,360 --> 00:11:20,700 Next we have a let's say an array of Derek Zealander and Derek Zealander is let's say 40 let's make 131 00:11:20,700 --> 00:11:23,960 this a little bit bigger. 132 00:11:24,110 --> 00:11:34,190 And then finally we have an array Hansel and Hansel is 18 so we have these user profiles but as a race 133 00:11:34,250 --> 00:11:36,100 they're not really useful right now. 134 00:11:36,110 --> 00:11:44,330 Wouldn't it be great if we can convert them into an object where each user name is associated with an 135 00:11:44,360 --> 00:11:44,720 H. 136 00:11:45,320 --> 00:11:48,460 Well this is exactly what entries is used for. 137 00:11:48,740 --> 00:12:03,320 We simply do object dot form or from entries so from entries and from entries is going to receive an 138 00:12:03,320 --> 00:12:05,150 array like this. 139 00:12:05,150 --> 00:12:13,320 So let's do user profiles here and see what happens fight. 140 00:12:13,340 --> 00:12:14,210 Copy this code 141 00:12:17,050 --> 00:12:18,350 paste it in here. 142 00:12:20,100 --> 00:12:21,270 Hey look at that. 143 00:12:21,480 --> 00:12:24,940 We get an object now with Commander Tom. 144 00:12:24,940 --> 00:12:26,030 Twenty three. 145 00:12:26,040 --> 00:12:34,320 Derek Zealander has a key and a value of 40 and Hansel has a key of Hansel and value of eighteen. 146 00:12:34,440 --> 00:12:41,700 Now the name might trigger something while you're watching this because in yes eight we talked about 147 00:12:42,570 --> 00:12:45,370 something called entries right. 148 00:12:45,720 --> 00:12:54,860 Object dot entries allowed us to do well the exact opposite thing. 149 00:12:54,880 --> 00:13:04,540 So for example if this was now an object if I do object entries on this object now. 150 00:13:04,540 --> 00:13:07,150 So let's copy and paste refreshes 151 00:13:09,770 --> 00:13:13,100 I get exactly what I had originally back. 152 00:13:13,130 --> 00:13:16,570 So from entries the name from entries simply comes from. 153 00:13:16,640 --> 00:13:18,880 Well object dot entries. 154 00:13:18,950 --> 00:13:19,310 All right. 155 00:13:19,310 --> 00:13:19,800 All right. 156 00:13:19,910 --> 00:13:21,310 One last one I promise. 157 00:13:21,310 --> 00:13:22,500 And then we're done. 158 00:13:22,640 --> 00:13:34,600 The last part is an update to a feature that we have in JavaScript which is the try catch block like 159 00:13:34,600 --> 00:13:36,330 this. 160 00:13:36,390 --> 00:13:42,810 Now this try catch block is something we're going to talk about a lot more when we get into the asynchronous 161 00:13:43,170 --> 00:13:45,530 javascript part of the course. 162 00:13:45,780 --> 00:13:53,730 But essentially the try and cache block in JavaScript allow us to try a piece of code and if there's 163 00:13:53,730 --> 00:13:56,350 any errors to catch them. 164 00:13:56,400 --> 00:14:09,560 So for example if I do hear let's say four plus five and I run this piece of code i click Run I get 165 00:14:09,670 --> 00:14:10,430 nine. 166 00:14:10,590 --> 00:14:15,970 It's the exact same thing as us writing four plus five. 167 00:14:15,980 --> 00:14:23,810 The only difference is that within this tribe block we're telling javascript Hey try this and if there's 168 00:14:23,810 --> 00:14:29,110 any errors on line three here then do something within the cache block. 169 00:14:29,750 --> 00:14:44,580 So I could for example say console dot log you messed up and now if I do let's say true or true plus 170 00:14:45,090 --> 00:14:56,010 hi fi copy and paste this and run this code I get true high because of something we've seen before that 171 00:14:56,010 --> 00:14:57,830 is type coercion. 172 00:14:58,350 --> 00:15:07,470 So it tried this in javascript that is valid javascript because it turns true into a string and combines 173 00:15:07,470 --> 00:15:08,500 it with high. 174 00:15:08,640 --> 00:15:12,230 But if we let's say do a variable that we haven't seen before. 175 00:15:12,240 --> 00:15:21,770 So instead of true let's say we have a bob variable fire run this I get to the cache block which says 176 00:15:22,040 --> 00:15:29,990 you messed up because while this through an error and as soon as it throws an error it catches and here's 177 00:15:29,990 --> 00:15:30,710 the thing. 178 00:15:30,710 --> 00:15:39,050 You actually saw a new feature here in ESPN because back in the day before yes 10 in order for this 179 00:15:39,050 --> 00:15:47,280 code to actually catch you had to pass it an error object or parameter. 180 00:15:47,280 --> 00:15:49,050 So I could have called this whatever I want. 181 00:15:49,110 --> 00:15:55,850 So I had to do error like this so that I could perhaps say error. 182 00:15:56,040 --> 00:16:08,080 So if I copy this refresh and let's give Bob here so that we error out I get you messed up but then 183 00:16:08,080 --> 00:16:12,150 I also catch the error which is a reference error. 184 00:16:12,250 --> 00:16:13,420 Bob is not defined. 185 00:16:14,260 --> 00:16:21,970 So before we had to pass it a parameter otherwise this whole block of code even if it was working properly 186 00:16:22,390 --> 00:16:25,840 would actually error because we didn't pass it the parameter with. 187 00:16:25,840 --> 00:16:32,260 Yes Stan we have an update where you're not forced to use that parameter if you don't want to. 188 00:16:32,290 --> 00:16:37,210 Again this is something we'll cover later on in the course when we talk about asynchronous javascript 189 00:16:39,260 --> 00:16:44,190 oh boy that looked like a lot but I mean it wasn't that much rain. 190 00:16:44,330 --> 00:16:46,760 Nice and easy nice and simple. 191 00:16:46,760 --> 00:16:48,670 I'll see you in the next video. 192 00:16:48,670 --> 00:16:49,130 Bye bye.