WEBVTT 1 00:00:01.499 --> 00:00:03.087 In this lecture, we're gonna take 2 00:00:03.087 --> 00:00:06.063 a look at Arrays in ES6 because a lot 3 00:00:06.063 --> 00:00:08.746 of things were added to Arrays. 4 00:00:08.746 --> 00:00:10.760 We now have a lot of new methods 5 00:00:10.760 --> 00:00:13.148 and also a new kind of loop so let's 6 00:00:13.148 --> 00:00:15.565 dive right into this lecture. 7 00:00:16.456 --> 00:00:18.590 And we're actually gonna use all of these 8 00:00:18.590 --> 00:00:21.856 colored boxes now here in this lecture. 9 00:00:21.856 --> 00:00:24.606 So let's start by selecting them. 10 00:00:26.719 --> 00:00:29.802 And we're gonna save it in a constant 11 00:00:30.745 --> 00:00:34.662 and of course we use document.querySelectorAll. 12 00:00:39.419 --> 00:00:42.651 And now let's first take a look now at the HTML. 13 00:00:42.651 --> 00:00:46.260 And we see that all of them have this box class name here. 14 00:00:46.260 --> 00:00:49.927 Right, so let's use that one to select them. 15 00:00:51.500 --> 00:00:54.583 So box, now we already know that this 16 00:00:56.388 --> 00:00:58.949 querySelectorAll method does not return 17 00:00:58.949 --> 00:01:01.241 an array with these elements but instead, 18 00:01:01.241 --> 00:01:05.200 it returns a node list, you remember that one, right? 19 00:01:05.200 --> 00:01:09.184 So what we have to do is to transform it into an array. 20 00:01:09.184 --> 00:01:11.991 And what we always did in this course was using 21 00:01:11.991 --> 00:01:15.385 this weird trick where we called this light 22 00:01:15.385 --> 00:01:18.565 method on the array prototype in setting the 23 00:01:18.565 --> 00:01:22.398 dis-variable to the boxes in this case, right? 24 00:01:23.713 --> 00:01:26.880 So in ES5, this is how we would do it. 25 00:01:28.819 --> 00:01:31.402 So boxesArray and five for ES5. 26 00:01:34.300 --> 00:01:37.800 You would say Array.prototype and then use 27 00:01:39.160 --> 00:01:42.910 the slice method and then call it with boxes. 28 00:01:45.602 --> 00:01:47.607 So you remember this part, right? 29 00:01:47.607 --> 00:01:49.231 And so now we have an array. 30 00:01:49.231 --> 00:01:51.453 And now we can use all of the array methods. 31 00:01:51.453 --> 00:01:53.713 So let's say we wanted to change all of these 32 00:01:53.713 --> 00:01:55.796 boxes here to blue, okay. 33 00:01:56.891 --> 00:01:59.109 So like this blue color here. 34 00:01:59.109 --> 00:02:02.276 So we can now use the for each method. 35 00:02:03.251 --> 00:02:07.418 So boxes array five .forEach and our call back function. 36 00:02:11.923 --> 00:02:15.535 And here I'm going to write it the ES5 way. 37 00:02:15.535 --> 00:02:19.702 So the current element and I want to change the style. 38 00:02:25.344 --> 00:02:29.020 The background color this blue color 39 00:02:29.020 --> 00:02:31.353 which is called Dodger Blue. 40 00:02:32.834 --> 00:02:35.167 So this is a CSS color name. 41 00:02:36.600 --> 00:02:40.767 Okay, and that's it actually so let's test it out. 42 00:02:41.967 --> 00:02:45.025 And nothing changed and yeah, it's because 43 00:02:45.025 --> 00:02:49.883 I misspelled here this word so it's called Dodger Blue. 44 00:02:49.883 --> 00:02:53.061 Okay, so just like this and yeah, 45 00:02:53.061 --> 00:02:56.894 so now they're all blue but we had to use this 46 00:02:57.903 --> 00:03:01.427 hack here, right, and so there's actually a better 47 00:03:01.427 --> 00:03:03.731 way now in ES6 so let's get rid of 48 00:03:03.731 --> 00:03:06.231 this code and write it in ES6. 49 00:03:11.150 --> 00:03:14.983 So boxesArray six and now we have a new method 50 00:03:16.645 --> 00:03:20.812 which is called from so all we have to do is say Array.from 51 00:03:23.646 --> 00:03:27.328 and then boxes and what this is gonna do is to 52 00:03:27.328 --> 00:03:30.006 simply transform this node list that we have in 53 00:03:30.006 --> 00:03:33.756 boxes to an array and it's as simple as that. 54 00:03:34.622 --> 00:03:38.455 And so now we can say boxes array six for each 55 00:03:42.795 --> 00:03:45.811 and now I'm gonna use the arrow function, okay. 56 00:03:45.811 --> 00:03:49.978 So I want the current element and I wanna change its style. 57 00:04:00.164 --> 00:04:04.247 To dodger blue and I hope it's correct this time. 58 00:04:08.160 --> 00:04:11.508 And yeah, it works and since this is actually so short 59 00:04:11.508 --> 00:04:15.091 and simple, we can even take this from here 60 00:04:16.743 --> 00:04:19.587 and do it like this and so we went from all of this 61 00:04:19.587 --> 00:04:23.754 code here to doing the same thing in just one line of code. 62 00:04:25.039 --> 00:04:29.227 So this new from method makes our code a bit shorter 63 00:04:29.227 --> 00:04:32.539 and it also looks better, alright. 64 00:04:32.539 --> 00:04:35.094 So let's now talk about loops. 65 00:04:35.094 --> 00:04:38.322 So usually when we want to loop over an array, 66 00:04:38.322 --> 00:04:41.464 we use the for each or the map method. 67 00:04:41.464 --> 00:04:44.062 And they usually work just fine, right? 68 00:04:44.062 --> 00:04:45.988 Now the problem with them is that we 69 00:04:45.988 --> 00:04:48.292 actually cannot break from them. 70 00:04:48.292 --> 00:04:51.345 And we can also not use the continue statement. 71 00:04:51.345 --> 00:04:54.193 So if we want to use the break or the continue 72 00:04:54.193 --> 00:04:57.589 statements in a loops, we cannot use for each. 73 00:04:57.589 --> 00:05:00.181 And we can also not use map and so we would 74 00:05:00.181 --> 00:05:03.737 use a simple four loop in ES5, which forces 75 00:05:03.737 --> 00:05:08.718 us to write a lot of code just for a very simple loop. 76 00:05:08.718 --> 00:05:10.476 So suppose that we wanted to change the text 77 00:05:10.476 --> 00:05:13.906 here in the boxes, okay, because now this 78 00:05:13.906 --> 00:05:16.920 box is not longer green and this is no longer orange. 79 00:05:16.920 --> 00:05:19.596 So let's say that we want to change the text 80 00:05:19.596 --> 00:05:22.192 from this box and from this box. 81 00:05:22.192 --> 00:05:23.991 So if we're in a loop, we can simply say that 82 00:05:23.991 --> 00:05:27.000 here in the second box, we want the loop to continue 83 00:05:27.000 --> 00:05:29.895 and not to do anything so let's 84 00:05:29.895 --> 00:05:32.728 start by writing that the ES5 way. 85 00:05:35.673 --> 00:05:40.571 So as I was saying, we use a simple for loop here. 86 00:05:40.571 --> 00:05:44.071 So you already know how this works, right? 87 00:05:47.879 --> 00:05:51.617 Boxes array five and it's not active 88 00:05:51.617 --> 00:05:55.450 because I commented out this code here, right? 89 00:05:56.469 --> 00:06:00.636 Okay, .length and I++ so this is nothing 90 00:06:02.916 --> 00:06:05.306 new at all for you and now all we have to do 91 00:06:05.306 --> 00:06:08.790 is to say that if it's this second box here, 92 00:06:08.790 --> 00:06:11.540 then we want to continue to loop. 93 00:06:12.520 --> 00:06:15.914 So let's check it out and the class name of 94 00:06:15.914 --> 00:06:17.588 this one here is box blue. 95 00:06:17.588 --> 00:06:21.031 So we cannot simply say just blue 96 00:06:21.031 --> 00:06:22.665 but instead we have to say that the class 97 00:06:22.665 --> 00:06:26.832 name is box blue, let me show you how we can do that. 98 00:06:28.069 --> 00:06:30.902 So we say that if the box is array 99 00:06:33.731 --> 00:06:36.898 at the current position so position I, 100 00:06:37.924 --> 00:06:41.868 the class name and I'm not sure if we already 101 00:06:41.868 --> 00:06:45.350 used that in a course, but I think we didn't, 102 00:06:45.350 --> 00:06:49.517 so this is a great time to learn this new property. 103 00:06:52.857 --> 00:06:55.793 So a class name here, we can retrieve the name 104 00:06:55.793 --> 00:06:58.685 of the class, of course, and then perform 105 00:06:58.685 --> 00:07:00.487 this kind of check that we have here 106 00:07:00.487 --> 00:07:03.379 so in this case to see if this element has 107 00:07:03.379 --> 00:07:05.462 the box blue class on it. 108 00:07:06.525 --> 00:07:09.942 And if it does, then we want to continue. 109 00:07:11.348 --> 00:07:13.108 Okay, and I'm sure that you remember the 110 00:07:13.108 --> 00:07:15.752 continue and break keywords from right 111 00:07:15.752 --> 00:07:18.058 from the beginning of the course. 112 00:07:18.058 --> 00:07:20.448 So what the continue will do is to simply 113 00:07:20.448 --> 00:07:23.878 skip this iteration of the loop and go right 114 00:07:23.878 --> 00:07:26.222 to the next on and the break keyword will 115 00:07:26.222 --> 00:07:29.407 break this loop and then we don't continue 116 00:07:29.407 --> 00:07:32.381 to the next iteration so if we would use break here, 117 00:07:32.381 --> 00:07:34.013 then we simply would break the loop 118 00:07:34.013 --> 00:07:37.205 and it would stop here and not continue. 119 00:07:37.205 --> 00:07:41.691 Okay, but in the other cases, we simply want to 120 00:07:41.691 --> 00:07:45.858 change the text so boxes array five and of course, 121 00:07:48.306 --> 00:07:51.139 we need to select the current box. 122 00:07:53.204 --> 00:07:57.371 And then text content and let's say I changed to blue. 123 00:08:00.072 --> 00:08:01.496 Which wouldn't make much sense on the second 124 00:08:01.496 --> 00:08:04.079 one because it is already blue. 125 00:08:04.971 --> 00:08:07.941 So let's see what happens here. 126 00:08:07.941 --> 00:08:11.427 Okay, so I changed to blue, nothing changed here. 127 00:08:11.427 --> 00:08:13.229 And I changed to blue. 128 00:08:13.229 --> 00:08:17.312 Let me just show you what happens with the break. 129 00:08:21.911 --> 00:08:24.571 Okay and so in this case, only the first one 130 00:08:24.571 --> 00:08:28.547 would change and then as soon as we hit the second 131 00:08:28.547 --> 00:08:32.950 element, it would break from the loop and not continue. 132 00:08:32.950 --> 00:08:37.136 Okay, now I really don't like to use the for loop like this. 133 00:08:37.136 --> 00:08:39.270 We have to write all of this code here 134 00:08:39.270 --> 00:08:41.654 which always seems a bit repetitive. 135 00:08:41.654 --> 00:08:43.750 And then to select each element we always have 136 00:08:43.750 --> 00:08:47.268 to write it out like this and so in ES6, 137 00:08:47.268 --> 00:08:49.701 we now have a new loop and this new loop 138 00:08:49.701 --> 00:08:53.387 combines the easy to use for each with the for loop. 139 00:08:53.387 --> 00:08:56.071 And this new loop is called the for off. 140 00:08:56.071 --> 00:08:58.335 Instead of for, it's called for off. 141 00:08:58.335 --> 00:09:02.502 So then take out this code and write it the ES6 way. 142 00:09:06.716 --> 00:09:09.224 And here is how the for off loop works. 143 00:09:09.224 --> 00:09:11.910 So for and then in here we can create a new 144 00:09:11.910 --> 00:09:14.840 variable, constant for example. 145 00:09:14.840 --> 00:09:17.434 And then such as we do in the for each method, 146 00:09:17.434 --> 00:09:19.690 we can define our current element. 147 00:09:19.690 --> 00:09:21.448 And we can call this whatever we want. 148 00:09:21.448 --> 00:09:25.721 We can say current of element or whatever we want. 149 00:09:25.721 --> 00:09:29.888 And we say that this is an element of the boxes array six. 150 00:09:33.177 --> 00:09:36.937 And that's it, so this is a simple loop, 151 00:09:36.937 --> 00:09:39.997 where we can define the current element 152 00:09:39.997 --> 00:09:44.944 rather than having to do all of this weird code here. 153 00:09:44.944 --> 00:09:48.464 So again, this combines the very easy to use, 154 00:09:48.464 --> 00:09:50.888 for each or map methods with the for loop. 155 00:09:50.888 --> 00:09:54.672 So then in here we can also use the continue or the break 156 00:09:54.672 --> 00:09:58.532 statements which we cannot in map or in for each. 157 00:09:58.532 --> 00:10:00.998 So let's do the same thing that we did before. 158 00:10:00.998 --> 00:10:04.581 So if boxes array and actually we want six, 159 00:10:07.654 --> 00:10:09.671 let me see if it's active here. 160 00:10:09.671 --> 00:10:13.907 Oh, it's actually not because I deleted that variable. 161 00:10:13.907 --> 00:10:16.907 So let me just edit back here, okay. 162 00:10:19.312 --> 00:10:22.895 So boxesArr6, alright, just because we need 163 00:10:24.379 --> 00:10:26.712 this variable here later on. 164 00:10:29.322 --> 00:10:33.489 So .className equals box blue, then we want to continue. 165 00:10:47.279 --> 00:10:50.133 Okay and now let's just copy this part here. 166 00:10:50.133 --> 00:10:52.687 So we don't have to write it all over again. 167 00:10:52.687 --> 00:10:55.987 But here it's now the simpler cur 168 00:10:55.987 --> 00:11:00.017 or it could be even simpler like c or whatever we want. 169 00:11:00.017 --> 00:11:02.489 No, this here is actually not correct 170 00:11:02.489 --> 00:11:04.293 because what we want is the class name of 171 00:11:04.293 --> 00:11:07.941 the current element, right, not off the entire boxes array. 172 00:11:07.941 --> 00:11:11.941 So this was a mistake so let's now check it out. 173 00:11:13.053 --> 00:11:15.316 And yup, it worked just like before. 174 00:11:15.316 --> 00:11:17.116 This one changed and this one changed, 175 00:11:17.116 --> 00:11:19.298 the one in the middle just stays the same. 176 00:11:19.298 --> 00:11:22.730 So we went from this a bit more confusing 177 00:11:22.730 --> 00:11:25.660 and bigger code to this one here. 178 00:11:25.660 --> 00:11:28.844 And in here, we can actually do a little bit better. 179 00:11:28.844 --> 00:11:32.235 Because now we have these new string methods. 180 00:11:32.235 --> 00:11:34.501 And so what we can do here is to use the 181 00:11:34.501 --> 00:11:37.597 includes method so I hope you remember that one 182 00:11:37.597 --> 00:11:41.117 from one of the previous lectures. 183 00:11:41.117 --> 00:11:44.117 So includes and we can now say blue. 184 00:11:45.059 --> 00:11:49.079 And remember that this one is gonna return a true 185 00:11:49.079 --> 00:11:51.678 is the class name contains the name blue. 186 00:11:51.678 --> 00:11:53.519 And so this way we don't have to write 187 00:11:53.519 --> 00:11:56.914 here the entire class name because we're 188 00:11:56.914 --> 00:11:59.718 just interested in the blue part. 189 00:11:59.718 --> 00:12:03.742 So this makes it even a bit better and more readable. 190 00:12:03.742 --> 00:12:06.296 And so you also just saw a good application 191 00:12:06.296 --> 00:12:09.063 of this new includes method. 192 00:12:09.063 --> 00:12:11.659 And of course, it still works so this was 193 00:12:11.659 --> 00:12:14.509 of course, a very simple example but it's 194 00:12:14.509 --> 00:12:16.723 really important to show you that sometimes 195 00:12:16.723 --> 00:12:19.451 we might need the break or continue statements 196 00:12:19.451 --> 00:12:21.963 in a loop and in this case, the new for 197 00:12:21.963 --> 00:12:24.796 off loop here comes in very handy. 198 00:12:26.442 --> 00:12:28.818 Alright, and just to finish there are also 199 00:12:28.818 --> 00:12:31.754 two new and very useful array methods 200 00:12:31.754 --> 00:12:35.310 that allow us to find elements in an array. 201 00:12:35.310 --> 00:12:39.286 So up until this point, we only had the index off method, 202 00:12:39.286 --> 00:12:41.967 right but now they're a couple of new ones. 203 00:12:41.967 --> 00:12:43.601 And I'm gonna show you two of them 204 00:12:43.601 --> 00:12:46.489 which are the best ones, in my opinion. 205 00:12:46.489 --> 00:12:49.299 So suppose that we have a group of children 206 00:12:49.299 --> 00:12:52.899 and we know that only one of them is a full age. 207 00:12:52.899 --> 00:12:57.066 So let's now find out who and how old that person is. 208 00:12:59.558 --> 00:13:03.725 So again, we start with ES5 and let's say the ages 209 00:13:04.584 --> 00:13:08.751 of these children were 12, 17, eight, 21, 14 and 11. 210 00:13:14.044 --> 00:13:16.211 That's not quite 11, okay. 211 00:13:18.781 --> 00:13:22.677 So the ES5 way, we would first have to 212 00:13:22.677 --> 00:13:25.711 create a blue and array to determine whether 213 00:13:25.711 --> 00:13:29.613 each element of the array is younger or older than 18. 214 00:13:29.613 --> 00:13:31.625 And we could then use the index off to determine 215 00:13:31.625 --> 00:13:33.708 the element that we want. 216 00:13:34.685 --> 00:13:37.949 So let's use the map method to create an array 217 00:13:37.949 --> 00:13:41.032 which true or false values like this. 218 00:13:43.026 --> 00:13:47.125 So full age which I'm gonna abbreviate as full 219 00:13:47.125 --> 00:13:51.292 and then ages.map, okay and I want the current, of course. 220 00:13:57.837 --> 00:14:01.031 And all we need to do here is to return if the current 221 00:14:01.031 --> 00:14:04.698 element is older or equal to 18 years, okay. 222 00:14:08.348 --> 00:14:11.598 Let's just check this, so false, false, 223 00:14:17.190 --> 00:14:19.616 false, true and false, false. 224 00:14:19.616 --> 00:14:21.925 So only this one is true. 225 00:14:21.925 --> 00:14:23.939 But now we have to find out the position 226 00:14:23.939 --> 00:14:26.439 of this element here in array. 227 00:14:27.923 --> 00:14:32.090 And in order to do that, we use the index off method. 228 00:14:33.241 --> 00:14:37.408 Index off and we want the one that is true, right? 229 00:14:38.685 --> 00:14:42.852 And in order to see this, let's use console.log again. 230 00:14:45.010 --> 00:14:47.146 And here we go, so it's element number three. 231 00:14:47.146 --> 00:14:50.916 Zero, one, two, three and if you want to now see 232 00:14:50.916 --> 00:14:53.888 how old the person is, we need to retrieve 233 00:14:53.888 --> 00:14:56.721 that exact element from the array. 234 00:14:59.295 --> 00:15:03.462 So ages and then to retrieve and now we need to again, 235 00:15:04.957 --> 00:15:09.124 calculate the position of that element that's true. 236 00:15:11.287 --> 00:15:15.454 And so, that person is, that's right, 21 years old. 237 00:15:16.736 --> 00:15:19.416 So that's a lot of work just for this very 238 00:15:19.416 --> 00:15:23.906 simple task, right and so in ES5, once again, 239 00:15:23.906 --> 00:15:27.720 our life is made easier with a couple of new methods. 240 00:15:27.720 --> 00:15:31.887 And these new methods are to find index and to find methods. 241 00:15:32.745 --> 00:15:37.311 So in ES6, let's now start by using the find index method. 242 00:15:37.311 --> 00:15:40.575 And this method we can pass a call back function 243 00:15:40.575 --> 00:15:43.919 into it and it's then gonna return us the index 244 00:15:43.919 --> 00:15:47.485 of the array where the call back function returns true. 245 00:15:47.485 --> 00:15:51.652 So it's just like this, so it's ages.find the index. 246 00:15:54.992 --> 00:15:57.926 And then this works a bit like the map or the for each 247 00:15:57.926 --> 00:16:00.988 methods so we have a call back function that 248 00:16:00.988 --> 00:16:03.716 has access to the current element to the current 249 00:16:03.716 --> 00:16:08.709 index and the entire array and so I can write cur, 250 00:16:08.709 --> 00:16:12.145 then my arrow function and then what I want is 251 00:16:12.145 --> 00:16:14.869 the same expression that we had before which 252 00:16:14.869 --> 00:16:19.315 is when the current is greater or equal to 18 years old. 253 00:16:19.315 --> 00:16:23.253 So what this does is to basically return the index 254 00:16:23.253 --> 00:16:26.562 for the element in which this expression here, 255 00:16:26.562 --> 00:16:30.418 so this call back function returns the value true. 256 00:16:30.418 --> 00:16:34.585 And that's as simple as it, so that's actually console.log. 257 00:16:36.159 --> 00:16:39.826 This result to see if it's the same as here. 258 00:16:44.629 --> 00:16:48.443 And yes it is, so it's number three. 259 00:16:48.443 --> 00:16:50.747 And if we actually want to retrieve the element 260 00:16:50.747 --> 00:16:54.849 and not just the index, then we could do something 261 00:16:54.849 --> 00:16:59.016 very similar instead of having to write it like this way 262 00:17:01.182 --> 00:17:03.782 here so the array and then retrieve the value. 263 00:17:03.782 --> 00:17:06.132 Now we have a simple method that 264 00:17:06.132 --> 00:17:08.972 does all of that automatically 265 00:17:08.972 --> 00:17:13.139 so ages find and then this part here is of course, the same. 266 00:17:19.993 --> 00:17:22.383 So if you don't want to know the end index, 267 00:17:22.383 --> 00:17:24.523 we actually don't even have to calculate it. 268 00:17:24.523 --> 00:17:27.209 So we could just use this one if all we are interested 269 00:17:27.209 --> 00:17:31.209 in is to find the value that is greater than 18. 270 00:17:32.483 --> 00:17:35.708 And that value is 21, of course. 271 00:17:35.708 --> 00:17:39.768 So a lot of new and very useful stuff about arrays. 272 00:17:39.768 --> 00:17:41.442 These are great additions to the new 273 00:17:41.442 --> 00:17:44.458 standard of JavaScript so to ES6. 274 00:17:44.458 --> 00:17:47.625 Alright, so see you in the next video.