WEBVTT 1 00:00:01.114 --> 00:00:02.141 All right. 2 00:00:02.141 --> 00:00:03.624 I hope that you actually completed 3 00:00:03.624 --> 00:00:05.759 the coding challenge on your own 4 00:00:05.759 --> 00:00:08.838 and really started to use all these new features. 5 00:00:08.838 --> 00:00:11.005 So let's see how I did it. 6 00:00:12.402 --> 00:00:15.754 So, we are in charge of two town elements 7 00:00:15.754 --> 00:00:18.106 and these are parks and streets. 8 00:00:18.106 --> 00:00:19.890 And they both have in common that 9 00:00:19.890 --> 00:00:22.959 they have a name and also a build year. 10 00:00:22.959 --> 00:00:26.808 And so what I'm gonna do here is to create a class, 11 00:00:26.808 --> 00:00:29.128 which is gonna be a super class 12 00:00:29.128 --> 00:00:31.806 that contains the name and the build year. 13 00:00:31.806 --> 00:00:34.536 And then for each of the park and street, 14 00:00:34.536 --> 00:00:36.792 I'm gonna have a subclass. 15 00:00:36.792 --> 00:00:39.389 And each of these subclasses will hold 16 00:00:39.389 --> 00:00:42.380 their specific attributes or properties 17 00:00:42.380 --> 00:00:45.012 and also their specific methods. 18 00:00:45.012 --> 00:00:47.047 So, let's implement that. 19 00:00:47.047 --> 00:00:47.880 So class, 20 00:00:49.556 --> 00:00:50.389 element, 21 00:00:53.981 --> 00:00:58.148 and the constructor is the name and the build year. 22 00:01:09.733 --> 00:01:12.150 So the name and a build year. 23 00:01:16.384 --> 00:01:17.545 And that's actually it. 24 00:01:17.545 --> 00:01:19.925 So this is our element super class. 25 00:01:19.925 --> 00:01:22.602 We could also of course add some methods in here, 26 00:01:22.602 --> 00:01:26.575 that all of the park and street elements could then inherit, 27 00:01:26.575 --> 00:01:28.162 but I guess that we're not gonna 28 00:01:28.162 --> 00:01:30.995 need that for this small exercise. 29 00:01:32.692 --> 00:01:36.025 Okay, so let's now create the park class 30 00:01:37.865 --> 00:01:41.324 and remember, since it's a subclass of the element, 31 00:01:41.324 --> 00:01:45.157 we need to use the extends keyword, so extends 32 00:01:46.304 --> 00:01:50.471 and the super class that we extend is called element. 33 00:01:52.166 --> 00:01:55.249 All right, so we need the constructor 34 00:01:57.100 --> 00:01:59.081 and as I explained in the last lecture, 35 00:01:59.081 --> 00:02:02.360 we need to repeat the property names 36 00:02:02.360 --> 00:02:05.114 that we have in our super constructor, 37 00:02:05.114 --> 00:02:07.244 which is called element in this case. 38 00:02:07.244 --> 00:02:09.827 So, again, name and build year. 39 00:02:11.366 --> 00:02:14.940 And then what we also have is the area 40 00:02:14.940 --> 00:02:17.526 and the number of trees. 41 00:02:17.526 --> 00:02:19.339 So we saw in the exercise that 42 00:02:19.339 --> 00:02:21.827 you want to calculate the tree density 43 00:02:21.827 --> 00:02:24.805 and that it's calculated by dividing 44 00:02:24.805 --> 00:02:27.189 the total number of trees by the area. 45 00:02:27.189 --> 00:02:29.323 And so of course, we need to have both 46 00:02:29.323 --> 00:02:32.424 of these properties in our object. 47 00:02:32.424 --> 00:02:34.863 So the first thing that we do in a constructor 48 00:02:34.863 --> 00:02:38.280 of a subclass is to call the super class. 49 00:02:40.500 --> 00:02:42.833 So name here and build year. 50 00:02:45.016 --> 00:02:49.956 So all of this is nothing new for you at this point. 51 00:02:49.956 --> 00:02:53.706 So area is of course the area that we pass in 52 00:02:55.376 --> 00:02:58.126 and the same for number of trees. 53 00:03:01.641 --> 00:03:04.413 And so let's now add a method for 54 00:03:04.413 --> 00:03:08.234 calculating the tree density of an object. 55 00:03:08.234 --> 00:03:09.567 So tree density. 56 00:03:15.182 --> 00:03:17.418 So as I mentioned in the previous video, 57 00:03:17.418 --> 00:03:20.278 this is calculated by dividing the number of trees 58 00:03:20.278 --> 00:03:22.278 by the area of the park. 59 00:03:23.431 --> 00:03:25.848 And so of course it should be 60 00:03:26.932 --> 00:03:30.265 the number of trees divided by the area. 61 00:03:32.793 --> 00:03:34.047 And that's it. 62 00:03:34.047 --> 00:03:37.052 And since we're building something very simple here, 63 00:03:37.052 --> 00:03:39.055 we're just gonna console that log 64 00:03:39.055 --> 00:03:41.399 the result of this calculation, 65 00:03:41.399 --> 00:03:45.028 since that is the final output that we want. 66 00:03:45.028 --> 00:03:47.536 So instead of returning it, such as we would do 67 00:03:47.536 --> 00:03:51.641 in the real app, we're just gonna log it to the console. 68 00:03:51.641 --> 00:03:53.994 So let's now use a template string here 69 00:03:53.994 --> 00:03:56.910 and I hope that you did this one as well 70 00:03:56.910 --> 00:04:01.499 because this is one of the easier measures to implement. 71 00:04:01.499 --> 00:04:05.666 So, what I'm gonna do is to say the name of the park 72 00:04:06.557 --> 00:04:08.057 has a tree density 73 00:04:12.010 --> 00:04:12.843 of 74 00:04:16.253 --> 00:04:19.336 and then our density value, trees per 75 00:04:22.194 --> 00:04:25.724 square and I'm gonna use the square kilometer unit. 76 00:04:25.724 --> 00:04:29.883 And so in here, the unit that we'll have to put in here 77 00:04:29.883 --> 00:04:32.222 will always be a square kilometer. 78 00:04:32.222 --> 00:04:34.805 So I'm just putting it at a comment here, 79 00:04:34.805 --> 00:04:37.319 so that we later know that that's the unit 80 00:04:37.319 --> 00:04:39.693 that we're gonna use here. 81 00:04:39.693 --> 00:04:41.592 So this is not specific to JavaScript, 82 00:04:41.592 --> 00:04:45.528 it's just we could also use square miles or something else, 83 00:04:45.528 --> 00:04:47.651 but I'm gonna go with square kilometers and 84 00:04:47.651 --> 00:04:50.250 that's why I'm putting it here in the text. 85 00:04:50.250 --> 00:04:52.577 So, this should be it for the park. 86 00:04:52.577 --> 00:04:57.251 Now, let's add another subclass for the streets. 87 00:04:57.251 --> 00:05:00.501 So, class street and of course this one 88 00:05:02.837 --> 00:05:06.837 is also gonna extend the previous element class. 89 00:05:08.382 --> 00:05:10.475 And I'm sure that you know what comes now, 90 00:05:10.475 --> 00:05:13.142 which is the constructor, right? 91 00:05:14.822 --> 00:05:18.989 So of course, once again, the name, the build year, 92 00:05:20.048 --> 00:05:23.214 and now we need to add our properties here, 93 00:05:23.214 --> 00:05:27.453 which is the length, so the length of the street, 94 00:05:27.453 --> 00:05:28.349 and the size. 95 00:05:28.349 --> 00:05:30.527 Because remember, in our final report, 96 00:05:30.527 --> 00:05:33.201 we need to say the average and total length 97 00:05:33.201 --> 00:05:34.980 of all the streets together and 98 00:05:34.980 --> 00:05:39.476 also a classification of the size of each street. 99 00:05:39.476 --> 00:05:43.928 And the classification is tiny, small, normal, big, or huge. 100 00:05:43.928 --> 00:05:46.032 And so here as the size parameter, 101 00:05:46.032 --> 00:05:48.572 I'm gonna pass in a number for each of these 102 00:05:48.572 --> 00:05:51.513 and then write a method later on 103 00:05:51.513 --> 00:05:56.127 that will then classify the street based on this number. 104 00:05:56.127 --> 00:05:57.713 And remember that in our text, 105 00:05:57.713 --> 00:06:00.708 it said that default should be normal. 106 00:06:00.708 --> 00:06:02.763 And so we're gonna have a default here 107 00:06:02.763 --> 00:06:05.324 but I'll leave that one for later 108 00:06:05.324 --> 00:06:07.062 and I'll put it here when we write 109 00:06:07.062 --> 00:06:09.088 our method to classify the street. 110 00:06:09.088 --> 00:06:10.866 So it will be just in a second, 111 00:06:10.866 --> 00:06:14.284 so let's just finish this one and then we write that method. 112 00:06:14.284 --> 00:06:17.394 So again, we first need to call our super class 113 00:06:17.394 --> 00:06:20.061 with the name and the build year 114 00:06:21.873 --> 00:06:25.456 and then we need to set our own properties. 115 00:06:27.032 --> 00:06:30.532 So the length we'll be doing and the size. 116 00:06:34.804 --> 00:06:37.366 All right, so let's now write that method 117 00:06:37.366 --> 00:06:41.366 that I was talking about called classify street. 118 00:06:43.927 --> 00:06:45.347 And I'm gonna use one number 119 00:06:45.347 --> 00:06:47.106 for each of these classifications. 120 00:06:47.106 --> 00:06:49.894 So tiny is gonna be one, small is gonna be two, 121 00:06:49.894 --> 00:06:52.663 normal is gonna be three, big is gonna be four, 122 00:06:52.663 --> 00:06:54.922 and huge, it's gonna be five. 123 00:06:54.922 --> 00:06:56.999 So what does this sound like to you? 124 00:06:56.999 --> 00:06:58.472 To me, it sounds a lot like 125 00:06:58.472 --> 00:07:00.906 we're doing a HashMap here, right? 126 00:07:00.906 --> 00:07:02.473 And so we're gonna make use of 127 00:07:02.473 --> 00:07:05.931 the new ES6 feature which is the map. 128 00:07:05.931 --> 00:07:08.209 So let's create a new variable 129 00:07:08.209 --> 00:07:11.042 and I will call it classification. 130 00:07:13.281 --> 00:07:16.364 Now I'll create a new empty map here. 131 00:07:19.018 --> 00:07:20.851 So, classification.set 132 00:07:22.281 --> 00:07:26.114 and I'm gonna say that number one is for tiny. 133 00:07:33.071 --> 00:07:37.071 Two is for small and let me just duplicate these 134 00:07:38.053 --> 00:07:42.220 couple of times so one, two, three, four, and five. 135 00:07:44.191 --> 00:07:46.858 And this one is gonna be normal, 136 00:07:48.658 --> 00:07:49.741 big and huge. 137 00:07:51.409 --> 00:07:55.306 And so when we put in a size here, then as an argument, 138 00:07:55.306 --> 00:07:57.864 we can use that argument to simply read 139 00:07:57.864 --> 00:08:00.090 our classification out of this map here. 140 00:08:00.090 --> 00:08:02.431 Because we can make use here of the fact that 141 00:08:02.431 --> 00:08:06.461 we can use something different than a string for our keys. 142 00:08:06.461 --> 00:08:08.323 So it's different from the objects 143 00:08:08.323 --> 00:08:11.529 that we used to use before for this kind of thing. 144 00:08:11.529 --> 00:08:13.807 Now, just remember that part where I said 145 00:08:13.807 --> 00:08:17.140 that we want to be normal to be the default. 146 00:08:17.140 --> 00:08:19.701 And so we can make use of default parameters 147 00:08:19.701 --> 00:08:24.185 here in ES6 and simply set this one to three. 148 00:08:24.185 --> 00:08:26.607 So now if we create a new street 149 00:08:26.607 --> 00:08:28.087 and don't specify this argument, 150 00:08:28.087 --> 00:08:31.729 so we can just specify name, build year and length, 151 00:08:31.729 --> 00:08:34.168 then the size will automatically be three 152 00:08:34.168 --> 00:08:38.168 and then the three will be classified as normal. 153 00:08:39.037 --> 00:08:43.204 All right, and so now we can just log it to the console, 154 00:08:45.104 --> 00:08:47.611 once again using a template string here 155 00:08:47.611 --> 00:08:49.444 and say that the name, 156 00:08:51.374 --> 00:08:54.291 so name of the street in this case. 157 00:08:55.543 --> 00:08:57.953 And we could also use the year now in this case 158 00:08:57.953 --> 00:09:01.703 so we can say the street, which was built in, 159 00:09:04.946 --> 00:09:08.139 so just to give some more information to the console 160 00:09:08.139 --> 00:09:12.306 and also to use the variable that we have available, 161 00:09:15.484 --> 00:09:19.651 is a, and now, how do we get the data out of our map? 162 00:09:21.369 --> 00:09:23.343 Remember that? 163 00:09:23.343 --> 00:09:26.284 Right, we use the get method. 164 00:09:26.284 --> 00:09:29.201 So we simply say classification.get 165 00:09:31.836 --> 00:09:35.753 and then we need our number, which is the size. 166 00:09:36.827 --> 00:09:40.994 And so of course, we can get that by saying this.size. 167 00:09:42.439 --> 00:09:44.916 And that's it, so the name of the street, 168 00:09:44.916 --> 00:09:49.083 build and a year, is a normal, for example, street. 169 00:09:53.137 --> 00:09:53.970 And that's it. 170 00:09:53.970 --> 00:09:57.808 Now with this method, we can classify our street. 171 00:09:57.808 --> 00:10:00.037 So we now have all our classes 172 00:10:00.037 --> 00:10:03.120 or data model, let's say so, defined. 173 00:10:04.128 --> 00:10:06.053 So now it's time to create some data. 174 00:10:06.053 --> 00:10:09.036 So to create some objects. 175 00:10:09.036 --> 00:10:10.856 And we're gonna start with the parks. 176 00:10:10.856 --> 00:10:13.400 So I'll create an array which will contain 177 00:10:13.400 --> 00:10:15.315 all of our three parks, because remember, 178 00:10:15.315 --> 00:10:17.462 we have three parks and four streets. 179 00:10:17.462 --> 00:10:19.545 So I will say, all parks, 180 00:10:24.232 --> 00:10:25.315 so, new park. 181 00:10:27.305 --> 00:10:30.972 The first one, let's call it the Green Park. 182 00:10:33.763 --> 00:10:37.930 It was built in 1987, has 0.2 square kilometers of area, 183 00:10:40.114 --> 00:10:41.614 and has 215 trees, 184 00:10:44.327 --> 00:10:46.327 so that's the first one. 185 00:10:47.244 --> 00:10:49.244 Now let's make new park. 186 00:10:51.388 --> 00:10:55.471 This one is going to be called the National Park. 187 00:10:56.336 --> 00:10:59.522 So this one is gonna be a little better or bigger, 188 00:10:59.522 --> 00:11:03.689 so this is one old, 1894, it has 2.9 square kilometers, 189 00:11:07.290 --> 00:11:09.623 and, let's say, 3,541 trees, 190 00:11:13.473 --> 00:11:15.469 so really a huge one. 191 00:11:15.469 --> 00:11:17.302 And now the third one, 192 00:11:19.341 --> 00:11:22.091 let's call this one the Oak Park, 193 00:11:23.825 --> 00:11:24.992 built in 1953, 194 00:11:27.174 --> 00:11:28.757 0.4, and 949 trees. 195 00:11:31.577 --> 00:11:33.947 Okay, so now we have our parks. 196 00:11:33.947 --> 00:11:36.364 Let's now create the streets. 197 00:11:44.614 --> 00:11:48.364 So first one, and I call it the Ocean Avenue, 198 00:11:50.802 --> 00:11:54.969 built in 1999, 1.1 kilometers length, and the size of 4. 199 00:11:57.052 --> 00:12:01.219 So this will then be classified using our classify method. 200 00:12:03.317 --> 00:12:04.317 So next one, 201 00:12:07.653 --> 00:12:10.653 and this one is to Evergreen Street, 202 00:12:14.393 --> 00:12:18.560 built in 2008, 2.7 kilometers, and a smaller street. 203 00:12:30.462 --> 00:12:32.791 So, I'm just kind of putting some random data 204 00:12:32.791 --> 00:12:34.180 here for a very small town. 205 00:12:34.180 --> 00:12:38.347 You could of course put data for your own town or whatever. 206 00:12:39.707 --> 00:12:43.209 And maybe you noticed that in here and this line before, 207 00:12:43.209 --> 00:12:46.036 I didn't specify it, this last parameter here. 208 00:12:46.036 --> 00:12:49.385 So this is the size one, so just to see what happens 209 00:12:49.385 --> 00:12:52.770 when I don't put anything in, so just to show that 210 00:12:52.770 --> 00:12:56.520 this default parameter here is going to work. 211 00:12:58.213 --> 00:13:00.546 Okay, and just the last one, 212 00:13:02.656 --> 00:13:06.073 let's call this one the Sunset Boulevard, 213 00:13:08.982 --> 00:13:11.437 which is a beautiful name, I think. 214 00:13:11.437 --> 00:13:15.270 1982, 2.5, and this, with this beautiful name, 215 00:13:16.126 --> 00:13:19.734 it has to be a huge street, so number five here. 216 00:13:19.734 --> 00:13:24.028 All right, so let's now start generating our report 217 00:13:24.028 --> 00:13:26.577 and what I'm gonna do is to write one function 218 00:13:26.577 --> 00:13:30.361 for each report and then pass in our array, 219 00:13:30.361 --> 00:13:31.723 which contains our data. 220 00:13:31.723 --> 00:13:34.401 So for the parks, I'm gonna pass in this one, 221 00:13:34.401 --> 00:13:37.751 and for the streets, of course, this one. 222 00:13:37.751 --> 00:13:39.834 So, function, report park 223 00:13:44.742 --> 00:13:47.659 and I'm simply gonna call it p here 224 00:13:52.109 --> 00:13:56.278 and I will also already define the other function here, 225 00:13:56.278 --> 00:13:57.748 so that we then just have to fill it. 226 00:13:57.748 --> 00:14:00.581 So report parks and report streets 227 00:14:02.885 --> 00:14:05.556 and this one is called s. 228 00:14:05.556 --> 00:14:08.056 Then we'll also just call them 229 00:14:10.608 --> 00:14:13.358 so report parks, which all parks, 230 00:14:15.830 --> 00:14:18.590 and report streets, and all streets. 231 00:14:18.590 --> 00:14:22.764 So again, in this exercise, I don't wanna write 232 00:14:22.764 --> 00:14:26.881 any fancy code like we did in our big app project, 233 00:14:26.881 --> 00:14:28.772 but instead I'm really focusing here 234 00:14:28.772 --> 00:14:31.691 on using some of the ES6 features. 235 00:14:31.691 --> 00:14:33.589 So just very simple functions 236 00:14:33.589 --> 00:14:36.926 and very simple data structures. 237 00:14:36.926 --> 00:14:40.600 So, let's start with the parks report. 238 00:14:40.600 --> 00:14:44.767 First one I'm gonna print, simply say PARKS REPORT 239 00:14:48.426 --> 00:14:52.135 to make it well visible here in the console. 240 00:14:52.135 --> 00:14:53.276 So, what do we want here? 241 00:14:53.276 --> 00:14:56.301 Let's take a look at our exercise. 242 00:14:56.301 --> 00:14:59.743 We want the tree density of each park, 243 00:14:59.743 --> 00:15:03.705 then we want the average age of the town's park, 244 00:15:03.705 --> 00:15:05.766 this actually doesn't make much sense. 245 00:15:05.766 --> 00:15:09.401 So it's average age of the entire parks, 246 00:15:09.401 --> 00:15:11.997 but then we also want the name of the park 247 00:15:11.997 --> 00:15:14.004 that has more than 1,000 trees. 248 00:15:14.004 --> 00:15:17.171 So these three things are about parks. 249 00:15:18.899 --> 00:15:22.482 So let's put it here, you want the density, 250 00:15:25.533 --> 00:15:27.283 you want average age, 251 00:15:29.289 --> 00:15:30.456 and which park 252 00:15:34.716 --> 00:15:36.966 have more than 1,000 trees. 253 00:15:39.091 --> 00:15:41.268 So the first one is really simple. 254 00:15:41.268 --> 00:15:43.229 So for each of our park objects, 255 00:15:43.229 --> 00:15:46.562 we want to call the tree density method. 256 00:15:49.824 --> 00:15:53.083 So we have three parks in our array 257 00:15:53.083 --> 00:15:55.296 and for each of them we want to call that method. 258 00:15:55.296 --> 00:15:57.931 So it makes sense that we loop through them. 259 00:15:57.931 --> 00:16:01.630 And for that, we're simply gonna use for each method 260 00:16:01.630 --> 00:16:03.139 and in our callback function, 261 00:16:03.139 --> 00:16:05.780 we only want the current element, 262 00:16:05.780 --> 00:16:07.541 so this one is for the current element 263 00:16:07.541 --> 00:16:09.746 and then on that element, 264 00:16:09.746 --> 00:16:12.746 we can call the tree density method. 265 00:16:17.335 --> 00:16:18.269 And that's it. 266 00:16:18.269 --> 00:16:20.827 So again, we loop through all of our parks 267 00:16:20.827 --> 00:16:24.149 and for each one, we simply call the tree density method, 268 00:16:24.149 --> 00:16:28.002 which is then going to print to the console the density. 269 00:16:28.002 --> 00:16:31.824 So let's try that out and we have some kind of bug here. 270 00:16:31.824 --> 00:16:32.824 In line 658, 271 00:16:35.809 --> 00:16:39.642 so we already wrote a lot of code here, so 658 272 00:16:41.895 --> 00:16:46.337 and here it is, and yes, so I forgot these parentheses here, 273 00:16:46.337 --> 00:16:49.691 so such like regular functions, of course, 274 00:16:49.691 --> 00:16:53.745 all of the code has to have these parentheses. 275 00:16:53.745 --> 00:16:57.085 So let's try it again and another small mistake, 276 00:16:57.085 --> 00:17:01.083 line 641, and yeah, so here I see the problem. 277 00:17:01.083 --> 00:17:04.916 I have numTrees here and here I misspelled it. 278 00:17:06.589 --> 00:17:10.524 And let's hope, yeah, so now it works, great. 279 00:17:10.524 --> 00:17:12.306 So the Green Park has a tree density 280 00:17:12.306 --> 00:17:15.306 of 1,075 trees per square kilometer. 281 00:17:16.371 --> 00:17:19.063 This one has about 1,200 and this one 282 00:17:19.063 --> 00:17:22.680 has about 2,300 trees per square kilometer. 283 00:17:22.680 --> 00:17:25.759 All right, so that part is already working. 284 00:17:25.759 --> 00:17:28.902 So let's now talk about the average age thing. 285 00:17:28.902 --> 00:17:33.009 And what I'm gonna do here is to create an external function 286 00:17:33.009 --> 00:17:37.039 which is going to calculate the average and the total 287 00:17:37.039 --> 00:17:40.092 for any array that we input into that function. 288 00:17:40.092 --> 00:17:42.892 And so, this way, we can then reuse it down here 289 00:17:42.892 --> 00:17:46.128 in our reportStreets function to calculate 290 00:17:46.128 --> 00:17:49.825 the total and average length of all the streets. 291 00:17:49.825 --> 00:17:52.075 So let me do that out here. 292 00:17:54.167 --> 00:17:56.320 And I'm simply gonna calculate it calc 293 00:17:56.320 --> 00:17:58.680 because that's what we do, we calculate stuff 294 00:17:58.680 --> 00:18:01.513 based on an array that we receive. 295 00:18:02.989 --> 00:18:06.800 So we want the total and the average. 296 00:18:06.800 --> 00:18:09.347 Now, there's an extremely handy method that 297 00:18:09.347 --> 00:18:14.021 I didn't show you before and it's called the reduce method. 298 00:18:14.021 --> 00:18:16.099 And the reduce method is used to 299 00:18:16.099 --> 00:18:19.544 basically reduce an array to a single value. 300 00:18:19.544 --> 00:18:21.729 And it's actually an ES5 method, 301 00:18:21.729 --> 00:18:24.276 so it's nothing new with ES6, 302 00:18:24.276 --> 00:18:28.494 it's just one of the ES5 methods similar to for each or map, 303 00:18:28.494 --> 00:18:31.164 because all of these loop through arrays. 304 00:18:31.164 --> 00:18:33.158 Now the difference is that this one 305 00:18:33.158 --> 00:18:36.862 loops through an array to accumulate all the values 306 00:18:36.862 --> 00:18:39.775 into a single value, so this is perfect 307 00:18:39.775 --> 00:18:43.220 for adding up all of the elements in an array. 308 00:18:43.220 --> 00:18:45.554 So let me show you how this one works. 309 00:18:45.554 --> 00:18:49.054 So let's say we want a variable called sum 310 00:18:51.688 --> 00:18:53.232 and so we use the reduce method 311 00:18:53.232 --> 00:18:55.649 on our input array of course. 312 00:18:58.072 --> 00:19:01.529 And now in here, as with all our other methods, 313 00:19:01.529 --> 00:19:05.449 like for each in map, we can use a callback function. 314 00:19:05.449 --> 00:19:07.647 Now, what's different about this one is 315 00:19:07.647 --> 00:19:09.974 that we not only have access to the current value 316 00:19:09.974 --> 00:19:14.115 and the current index, but also to the previous value. 317 00:19:14.115 --> 00:19:16.240 So let me write that out, actually. 318 00:19:16.240 --> 00:19:19.073 So previous, the current and index 319 00:19:21.999 --> 00:19:23.517 and we're not gonna use all of these, 320 00:19:23.517 --> 00:19:25.207 but I just wanna write it out here 321 00:19:25.207 --> 00:19:28.456 so that you have this kind of as a reference. 322 00:19:28.456 --> 00:19:31.457 And then what we need to return is in the case 323 00:19:31.457 --> 00:19:33.418 that we want to sum everything, 324 00:19:33.418 --> 00:19:35.918 the previous plus the current. 325 00:19:37.896 --> 00:19:40.927 And that's actually it for the callback function. 326 00:19:40.927 --> 00:19:44.357 Now, another argument for the reduce method 327 00:19:44.357 --> 00:19:46.690 is the initial value of the accumulator, 328 00:19:46.690 --> 00:19:48.771 so the number at which we want to start. 329 00:19:48.771 --> 00:19:50.334 So in this case, it's gonna be zero, 330 00:19:50.334 --> 00:19:53.661 because we want to start with our sum at exactly zero. 331 00:19:53.661 --> 00:19:56.427 If we wanted to add everything to 100, let's say, 332 00:19:56.427 --> 00:19:58.355 then you could put 100 in here, 333 00:19:58.355 --> 00:20:00.628 but that's of course not what we want. 334 00:20:00.628 --> 00:20:03.103 So imagine that we had an array 335 00:20:03.103 --> 00:20:07.270 with three, five, and six, like this, just as an example. 336 00:20:10.049 --> 00:20:12.902 So the previous value would then be zero in the beginning 337 00:20:12.902 --> 00:20:15.832 because that's the initial value that we defined here 338 00:20:15.832 --> 00:20:18.030 and then here in our callback function 339 00:20:18.030 --> 00:20:22.197 or previous plus the current would be zero plus three. 340 00:20:24.323 --> 00:20:27.203 Then in the next iteration, the previous value 341 00:20:27.203 --> 00:20:29.878 would be zero plus three, which is three, 342 00:20:29.878 --> 00:20:33.603 and so what we had here would be three plus five, so eight. 343 00:20:33.603 --> 00:20:34.953 Then in the next iteration, it would be 344 00:20:34.953 --> 00:20:38.582 the previous, which is eight, plus six, which is 14. 345 00:20:38.582 --> 00:20:41.174 And so the final result would be 14. 346 00:20:41.174 --> 00:20:44.702 And we had then reduced all of the elements in a array 347 00:20:44.702 --> 00:20:46.995 to a single value which is 14. 348 00:20:46.995 --> 00:20:49.313 Now, of course we can use different things in here, 349 00:20:49.313 --> 00:20:51.407 for example, we could multiply them 350 00:20:51.407 --> 00:20:55.040 or we could divide or subtract or even other things, 351 00:20:55.040 --> 00:20:57.836 but now, all we want to do is to simply 352 00:20:57.836 --> 00:21:00.031 add all of these elements together. 353 00:21:00.031 --> 00:21:02.922 And this reduce method is perfect for that. 354 00:21:02.922 --> 00:21:06.324 And so that's now returned that sum and also the average. 355 00:21:06.324 --> 00:21:09.343 Now we can use the concept of the structuring 356 00:21:09.343 --> 00:21:11.781 that I showed you in one of these lectures, 357 00:21:11.781 --> 00:21:15.247 in which we simply return an array of two elements 358 00:21:15.247 --> 00:21:18.558 and we can then use this structuring to save these elements 359 00:21:18.558 --> 00:21:23.027 into two different variables when we call this function. 360 00:21:23.027 --> 00:21:27.615 So return, of course, the sum and then the average 361 00:21:27.615 --> 00:21:31.005 and we can calculate it right here because it's very simple. 362 00:21:31.005 --> 00:21:33.771 The average is simply the sum of all the elements 363 00:21:33.771 --> 00:21:37.744 of an array divided by the length of this array. 364 00:21:37.744 --> 00:21:41.494 So sum divided by array.length, so that's it. 365 00:21:44.762 --> 00:21:48.870 This is actually all that we have to do in this function. 366 00:21:48.870 --> 00:21:51.790 So let's now use it down here and as I was saying, 367 00:21:51.790 --> 00:21:53.988 we can now use the structuring. 368 00:21:53.988 --> 00:21:56.905 So const total age and average age. 369 00:22:02.303 --> 00:22:05.778 Now what do we pass into this calc function? 370 00:22:05.778 --> 00:22:09.926 We want an array of all the ages of all the parks. 371 00:22:09.926 --> 00:22:13.086 So let's maybe first calculate this. 372 00:22:13.086 --> 00:22:16.919 So we wanna calculate the ages, so const ages. 373 00:22:18.233 --> 00:22:20.135 So what we're gonna do is to loop through 374 00:22:20.135 --> 00:22:22.041 all of the elements of our park array 375 00:22:22.041 --> 00:22:24.206 and calculate the age for each of them. 376 00:22:24.206 --> 00:22:27.108 And we could actually write a different function for that, 377 00:22:27.108 --> 00:22:28.672 but I'm not gonna do that right now, 378 00:22:28.672 --> 00:22:31.653 but of course you could totally do that. 379 00:22:31.653 --> 00:22:33.991 So if you want, feel free to do that. 380 00:22:33.991 --> 00:22:36.621 So, I'm gonna use the map method 381 00:22:36.621 --> 00:22:37.955 to loop through all the arrays, 382 00:22:37.955 --> 00:22:40.219 then I want the current element 383 00:22:40.219 --> 00:22:43.828 and then the age is very simply 2016, 384 00:22:43.828 --> 00:22:47.995 so the current year, minus, of course, the buildYear. 385 00:22:52.159 --> 00:22:55.242 Okay, and let's actually replace this 386 00:22:57.625 --> 00:23:00.042 with a new date, getFullYear, 387 00:23:01.613 --> 00:23:03.643 so that this is always up to date. 388 00:23:03.643 --> 00:23:06.434 And so like this, we will have here an array 389 00:23:06.434 --> 00:23:09.994 with all of the ages for all of the parks. 390 00:23:09.994 --> 00:23:13.327 So, we saved both of the variables here. 391 00:23:14.192 --> 00:23:16.175 So one with the age and one with the average 392 00:23:16.175 --> 00:23:19.503 using once again the concept of the structuring, 393 00:23:19.503 --> 00:23:22.177 but all we need here is actually the average, 394 00:23:22.177 --> 00:23:25.045 but that's no problem, we can just ignore the total. 395 00:23:25.045 --> 00:23:28.128 And so I'm gonna print to the console 396 00:23:29.027 --> 00:23:33.195 that our, let's put in a number of our parks, 397 00:23:33.195 --> 00:23:35.528 so it's p.length, obviously, 398 00:23:39.331 --> 00:23:41.498 have an average of avg age 399 00:23:48.062 --> 00:23:48.895 years. 400 00:23:50.872 --> 00:23:54.820 Okay, and that should be it, let me check it out. 401 00:23:54.820 --> 00:23:58.357 Okay, so date get full years not a constructor, 402 00:23:58.357 --> 00:24:02.388 so this is what I was missing here, these parentheses 403 00:24:02.388 --> 00:24:04.971 and now current is not defined. 404 00:24:06.135 --> 00:24:08.718 So 681, of course it's cur year 405 00:24:10.237 --> 00:24:13.034 and I'm sure that you saw it coming (chuckles), 406 00:24:13.034 --> 00:24:14.618 but I didn't. 407 00:24:14.618 --> 00:24:15.948 But now it works, okay. 408 00:24:15.948 --> 00:24:20.179 So our three parks have an average of 71 years. 409 00:24:20.179 --> 00:24:22.660 All right, now finally, 410 00:24:22.660 --> 00:24:24.158 let's take care of this last part here, 411 00:24:24.158 --> 00:24:28.452 which is to determine which park has more than 1,000 trees. 412 00:24:28.452 --> 00:24:30.463 So, to me it makes lot of sense 413 00:24:30.463 --> 00:24:34.730 to use the very new ES6 method called find index, 414 00:24:34.730 --> 00:24:36.817 which remember, we use on an array 415 00:24:36.817 --> 00:24:39.905 to get the index of the element of the array 416 00:24:39.905 --> 00:24:43.797 which satisfies or a callback function. 417 00:24:43.797 --> 00:24:46.574 So let's first get all of the numbers of trees 418 00:24:46.574 --> 00:24:50.741 into an array and then use the find index method on that. 419 00:24:52.861 --> 00:24:57.028 So what we're gonna determine here is an index, so i. 420 00:25:01.403 --> 00:25:06.025 And so at first, get all of the number of trees 421 00:25:06.025 --> 00:25:08.712 and these of course stored in our p array. 422 00:25:08.712 --> 00:25:10.848 So we loop through p and then store 423 00:25:10.848 --> 00:25:13.569 all of the tree numbers into a new array. 424 00:25:13.569 --> 00:25:16.002 So from the current element, 425 00:25:16.002 --> 00:25:19.835 we want to read the number of trees, property. 426 00:25:21.043 --> 00:25:23.844 So, this one return us an array. 427 00:25:23.844 --> 00:25:25.698 And since this one is an array, 428 00:25:25.698 --> 00:25:28.528 you could now immediately put the next method here, 429 00:25:28.528 --> 00:25:30.341 so we could chain these methods. 430 00:25:30.341 --> 00:25:34.508 So in order to write less lines of code let's do that. 431 00:25:37.221 --> 00:25:39.624 Now what we want here is to find the index 432 00:25:39.624 --> 00:25:43.041 of the element that is larger than 1,000. 433 00:25:44.385 --> 00:25:46.052 So it's simply this, 434 00:25:47.730 --> 00:25:51.063 element greater or equal to 1,000 trees. 435 00:25:51.992 --> 00:25:55.855 And that's it and we didn't use the find method here, 436 00:25:55.855 --> 00:25:57.646 remember that we have the find 437 00:25:57.646 --> 00:26:00.573 and the find index method here, which are both new, 438 00:26:00.573 --> 00:26:02.508 but we didn't want to use the find 439 00:26:02.508 --> 00:26:05.317 because we're not interested in the number of trees, 440 00:26:05.317 --> 00:26:07.785 but in the index, so that we can now select 441 00:26:07.785 --> 00:26:11.143 the correct park and retrieve its name. 442 00:26:11.143 --> 00:26:14.188 So that's what we're gonna do now. 443 00:26:14.188 --> 00:26:16.938 Console.log and we can simply say 444 00:26:18.616 --> 00:26:22.199 that we want p number i, and then its name, 445 00:26:26.862 --> 00:26:29.029 has more than 1,000 trees. 446 00:26:31.170 --> 00:26:33.761 So, does that make sense to you? 447 00:26:33.761 --> 00:26:35.344 Let's check it out. 448 00:26:36.881 --> 00:26:38.480 And that's right, the National Park 449 00:26:38.480 --> 00:26:41.011 has more than 1,000 trees. 450 00:26:41.011 --> 00:26:44.383 And let's see it if it's actually true. 451 00:26:44.383 --> 00:26:48.133 So this one only has 215, this one has 3,541, 452 00:26:50.073 --> 00:26:51.490 and this has 949. 453 00:26:52.375 --> 00:26:55.724 So this is the correct answer and so it works. 454 00:26:55.724 --> 00:26:57.589 So, all there's left to do now 455 00:26:57.589 --> 00:27:00.422 is to do the report for our trees. 456 00:27:01.462 --> 00:27:03.368 So let's copy this one here 457 00:27:03.368 --> 00:27:06.535 and not trees of course, it's streets. 458 00:27:10.326 --> 00:27:12.509 All right, so what do we want here? 459 00:27:12.509 --> 00:27:15.694 Let's go check our text here. 460 00:27:15.694 --> 00:27:18.236 And we want the total and average length 461 00:27:18.236 --> 00:27:21.240 of the town's streets, let's actually copy this one, 462 00:27:21.240 --> 00:27:23.573 and then classify the sizes. 463 00:27:29.139 --> 00:27:33.222 And classify the sizes, which would be very easy. 464 00:27:35.513 --> 00:27:38.499 Now, we already have our function which does this, 465 00:27:38.499 --> 00:27:42.612 so now all we have to do is to reuse it. 466 00:27:42.612 --> 00:27:44.739 And again using the structuring, 467 00:27:44.739 --> 00:27:46.822 we can write total length 468 00:27:50.347 --> 00:27:51.930 and average length. 469 00:27:53.935 --> 00:27:56.667 So, we use a calc function and now let's 470 00:27:56.667 --> 00:27:59.870 actually direct the get all of our length 471 00:27:59.870 --> 00:28:02.491 and we're doing it the same way that we did before, 472 00:28:02.491 --> 00:28:04.741 so s.map, then the element, 473 00:28:07.780 --> 00:28:11.947 and then simply retrieve the length of each of them. 474 00:28:13.284 --> 00:28:16.663 So this builds us our array with all the length 475 00:28:16.663 --> 00:28:20.413 that we can then pass into the calc function. 476 00:28:21.739 --> 00:28:24.406 Let's now log it to the console. 477 00:28:26.932 --> 00:28:31.099 Once again, we're using a template string and say, our 478 00:28:35.090 --> 00:28:39.173 the number of streets here, such as I did before, 479 00:28:40.288 --> 00:28:41.121 streets 480 00:28:43.853 --> 00:28:45.686 have a total length of 481 00:28:52.421 --> 00:28:55.338 totallength, obviously, kilometers, 482 00:28:56.385 --> 00:28:57.885 with an average of 483 00:29:02.338 --> 00:29:04.505 average length kilometers. 484 00:29:06.617 --> 00:29:09.700 So let's check it out and here we go. 485 00:29:10.648 --> 00:29:13.700 Our four streets have a total length of 7.1, 486 00:29:13.700 --> 00:29:16.524 with an average of 7.775. 487 00:29:16.524 --> 00:29:20.265 And ignore these values here, this is a weird bug 488 00:29:20.265 --> 00:29:23.140 that JavaScript sometimes has, so of course 489 00:29:23.140 --> 00:29:26.608 it should be simply 7.1 but the JavaScript engine 490 00:29:26.608 --> 00:29:29.227 sometimes gets a bit confused and it adds 491 00:29:29.227 --> 00:29:33.420 all of these zero zero zero and then some random value here. 492 00:29:33.420 --> 00:29:37.267 So not to worry about this, the correct result is 7.1. 493 00:29:37.267 --> 00:29:41.364 So you can simply ignore these strange number here 494 00:29:41.364 --> 00:29:43.708 and the same thing of course in here. 495 00:29:43.708 --> 00:29:48.077 And now all that's left to do is to classify our streets 496 00:29:48.077 --> 00:29:51.018 and so that's very easy as well. 497 00:29:51.018 --> 00:29:53.238 We just need to loop through all of them 498 00:29:53.238 --> 00:29:56.238 and call our classify street method. 499 00:30:10.100 --> 00:30:11.327 And so here we go. 500 00:30:11.327 --> 00:30:13.781 Ocean Avenue, 1999, is a big street, 501 00:30:13.781 --> 00:30:15.647 a small, a normal and a huge. 502 00:30:15.647 --> 00:30:17.654 So remember here, the third one, 503 00:30:17.654 --> 00:30:19.541 which is called the fourth street, 504 00:30:19.541 --> 00:30:21.962 I did not pass in any argument. 505 00:30:21.962 --> 00:30:25.140 But it still was classified as a normal street 506 00:30:25.140 --> 00:30:28.158 and that's because, and I showed you, 507 00:30:28.158 --> 00:30:30.517 the default parameter here is set to three, 508 00:30:30.517 --> 00:30:32.650 which then maps to normal. 509 00:30:32.650 --> 00:30:34.346 All right, and that's actually it. 510 00:30:34.346 --> 00:30:37.112 So our report now has all of the things 511 00:30:37.112 --> 00:30:41.469 that our bosses asked us to include in the report. 512 00:30:41.469 --> 00:30:44.377 So with this, we conclude our coding challenge, 513 00:30:44.377 --> 00:30:46.809 in which we used not all but at least 514 00:30:46.809 --> 00:30:49.226 some of the new ES6 features. 515 00:30:50.117 --> 00:30:53.222 What you can do now to practice ES6 even more 516 00:30:53.222 --> 00:30:55.661 is to, for example, convert code 517 00:30:55.661 --> 00:30:57.886 that we wrote before to ES6 codes. 518 00:30:57.886 --> 00:31:01.022 So, for example, we can redo the older challenges 519 00:31:01.022 --> 00:31:03.417 but this time write it in ES6. 520 00:31:03.417 --> 00:31:06.475 Or you could even, if you really feel like it, 521 00:31:06.475 --> 00:31:09.101 convert our budget app project to ES6. 522 00:31:09.101 --> 00:31:10.852 So that should be a lot of work 523 00:31:10.852 --> 00:31:13.137 but if you feel like it, then it's of course 524 00:31:13.137 --> 00:31:15.887 one of the tasks that you can do. 525 00:31:17.206 --> 00:31:19.173 All right, so have fun with that 526 00:31:19.173 --> 00:31:21.840 and see you in the next lecture.