Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,300 --> 00:00:04,460 The last thing that we're gonna learn in this section 2 2 00:00:04,460 --> 00:00:08,393 is how to programmatically create and fill arrays. 3 3 00:00:10,160 --> 00:00:14,273 So far we have always simply created arrays like this. 4 4 00:00:15,940 --> 00:00:17,220 Right? 5 5 00:00:17,220 --> 00:00:20,623 So basically writing them out by hand, literally. 6 6 00:00:22,960 --> 00:00:24,560 So just like this, 7 7 00:00:24,560 --> 00:00:29,173 or maybe we might've done it also like this. 8 8 00:00:30,700 --> 00:00:35,700 So using a new Array, a constructor, 9 9 00:00:37,160 --> 00:00:40,710 and then passing in all the numbers here as arguments, 10 10 00:00:40,710 --> 00:00:42,953 and then that also creates this array. 11 11 00:00:44,640 --> 00:00:48,970 Now in this cases we basically already have all data. 12 12 00:00:48,970 --> 00:00:53,970 So for example, one, two, three, four, all the way to seven. 13 13 00:00:54,150 --> 00:00:56,480 So that's the data that we already have. 14 14 00:00:56,480 --> 00:01:00,960 And so therefore we could then manually create these arrays. 15 15 00:01:00,960 --> 00:01:03,870 However, we can actually also generate 16 16 00:01:03,870 --> 00:01:06,150 arrays programmatically, 17 17 00:01:06,150 --> 00:01:09,710 so without having to define all the items manually. 18 18 00:01:09,710 --> 00:01:13,070 And there are many situations in which this is necessary 19 19 00:01:13,070 --> 00:01:16,220 and there are also multiple ways of doing it. 20 20 00:01:16,220 --> 00:01:18,560 And the easiest one is to again, 21 21 00:01:18,560 --> 00:01:20,593 use the Array() constructor function. 22 22 00:01:22,050 --> 00:01:25,053 So let's create a new array here like this, 23 23 00:01:26,290 --> 00:01:30,113 and then I will pass an only one argument seven. 24 24 00:01:31,170 --> 00:01:33,183 So what do you think is gonna happen? 25 25 00:01:35,330 --> 00:01:38,580 Well, we might think that this is going to create an array 26 26 00:01:38,580 --> 00:01:41,203 with only one element number seven. 27 27 00:01:42,620 --> 00:01:44,320 But actually it doesn't, 28 28 00:01:44,320 --> 00:01:48,300 instead it creates a new array with seven empty elements 29 29 00:01:48,300 --> 00:01:51,483 in there and it simply contains nothing. 30 30 00:01:53,410 --> 00:01:56,820 So this output is very weird indeed. 31 31 00:01:56,820 --> 00:01:57,990 And the reason for that 32 32 00:01:57,990 --> 00:02:01,650 is this weird behavior of this Array() function 33 33 00:02:01,650 --> 00:02:06,520 which does it so that whenever we only pass in one argument, 34 34 00:02:06,520 --> 00:02:10,660 then it creates a new empty argument with that length. 35 35 00:02:10,660 --> 00:02:14,550 So if we don't know about this special particularity 36 36 00:02:14,550 --> 00:02:16,960 of the Array() constructor function 37 37 00:02:16,960 --> 00:02:19,990 then this can lead to weird errors. 38 38 00:02:19,990 --> 00:02:21,090 Okay? 39 39 00:02:21,090 --> 00:02:26,090 Now also we cannot really use this X array for anything. 40 40 00:02:26,270 --> 00:02:29,600 For example, we cannot call the map() method on it 41 41 00:02:29,600 --> 00:02:31,320 to now fill it up. 42 42 00:02:31,320 --> 00:02:35,530 For example, we might want to do this map(). 43 43 00:02:35,530 --> 00:02:37,800 And then in each element, 44 44 00:02:37,800 --> 00:02:42,040 we might simply want to put something there like a five, 45 45 00:02:42,040 --> 00:02:43,930 but then you will see, 46 46 00:02:43,930 --> 00:02:46,330 well, actually we need to log it to the console. 47 47 00:02:49,720 --> 00:02:52,660 But you will see that nothing happened here. 48 48 00:02:52,660 --> 00:02:56,460 So this is not really useful except for one thing, 49 49 00:02:56,460 --> 00:02:59,530 because there is one method that we can call 50 50 00:02:59,530 --> 00:03:03,690 on this empty array and that is the fill() method. 51 51 00:03:03,690 --> 00:03:06,630 So that's a new method that we haven't studied yet, 52 52 00:03:06,630 --> 00:03:08,690 but it's very straight forward. 53 53 00:03:08,690 --> 00:03:11,350 So let me show it to you. 54 54 00:03:11,350 --> 00:03:16,250 So that's x.fill() and then all we need to do 55 55 00:03:16,250 --> 00:03:19,500 is to pass in a value and it will then fill up 56 56 00:03:19,500 --> 00:03:22,503 the entire array with this specific value. 57 57 00:03:24,420 --> 00:03:27,860 And this does actually mutate the underlying array. 58 58 00:03:27,860 --> 00:03:30,120 so we can just change it there 59 59 00:03:31,050 --> 00:03:35,090 and then simply log the entire thing to the console here. 60 60 00:03:35,090 --> 00:03:37,643 So this doesn't work, let's take it out. 61 61 00:03:39,120 --> 00:03:42,573 And now we get this array full off once. 62 62 00:03:43,730 --> 00:03:45,700 But let's actually turn this off 63 63 00:03:45,700 --> 00:03:49,720 so we can experiment a little bit more with fill(). 64 64 00:03:49,720 --> 00:03:52,580 Because this method is actually a little bit similar 65 65 00:03:52,580 --> 00:03:54,530 to the slice() method. 66 66 00:03:54,530 --> 00:03:58,230 So besides this value that we want to fill the array with, 67 67 00:03:58,230 --> 00:04:02,200 we can also specify where we want it to start to fill. 68 68 00:04:02,200 --> 00:04:04,553 So let's say only at index three. 69 69 00:04:05,650 --> 00:04:08,640 And so we also can specify a begin parameter 70 70 00:04:08,640 --> 00:04:12,823 and then it only starts at index three, which is this one. 71 71 00:04:14,150 --> 00:04:16,640 So it will then fill it up until the end, 72 72 00:04:16,640 --> 00:04:20,747 unless we specify an end parameter just like in slice(). 73 73 00:04:21,630 --> 00:04:23,190 So let's say five, 74 74 00:04:23,190 --> 00:04:25,647 And also just like in a slice(), 75 75 00:04:25,647 --> 00:04:30,180 the final index here is not gonna be included in the array. 76 76 00:04:30,180 --> 00:04:33,090 So just these two here are filled up. 77 77 00:04:33,090 --> 00:04:35,850 And of course, we can also use the fill() method 78 78 00:04:35,850 --> 00:04:37,240 on other arrays. 79 79 00:04:37,240 --> 00:04:39,780 So it doesn't have to be an empty array. 80 80 00:04:39,780 --> 00:04:44,223 Let's say we actually defined this here as an array, 81 81 00:04:47,290 --> 00:04:51,380 and then we can also fill that array. 82 82 00:04:51,380 --> 00:04:56,080 So let's say arr.fill() and let's fill it with 23 83 83 00:04:57,560 --> 00:05:00,713 at position four to six. 84 84 00:05:02,030 --> 00:05:04,263 And again, it will mutate the original one, 85 85 00:05:05,250 --> 00:05:09,100 and so you'll see that we put these 23s 86 86 00:05:09,100 --> 00:05:11,160 in these two positions. 87 87 00:05:11,160 --> 00:05:13,180 So from four to six. 88 88 00:05:13,180 --> 00:05:16,843 Let's say from two to six to put some more in there. 89 89 00:05:18,890 --> 00:05:23,800 So this is the fill() method + empty arrays. 90 90 00:05:23,800 --> 00:05:28,800 So empty arrays + fill method. 91 91 00:05:29,840 --> 00:05:32,750 And with this, we created an array programmatically, 92 92 00:05:32,750 --> 00:05:36,083 so without actually having to write it down manually. 93 93 00:05:38,000 --> 00:05:41,200 So let's bring this part back also to see it. 94 94 00:05:41,200 --> 00:05:43,680 So it's an entire new array that 95 95 00:05:43,680 --> 00:05:46,060 we here just created with our code. 96 96 00:05:46,060 --> 00:05:50,420 And indeed the fill() method can be very useful sometimes. 97 97 00:05:50,420 --> 00:05:53,780 However, what if we actually wanted to recreate 98 98 00:05:53,780 --> 00:05:57,000 the array from our first example? 99 99 00:05:57,000 --> 00:06:00,210 So what if he wanted to create this arr array 100 100 00:06:00,210 --> 00:06:01,560 programmatically? 101 101 00:06:01,560 --> 00:06:05,593 Well, for that, we could use the Array.from() function. 102 102 00:06:07,130 --> 00:06:09,967 So that's Array.from(), 103 103 00:06:11,800 --> 00:06:13,620 and this is how we use it. 104 104 00:06:13,620 --> 00:06:16,700 And this is actually something completely new. 105 105 00:06:16,700 --> 00:06:18,670 And we didn't see this before. 106 106 00:06:18,670 --> 00:06:21,330 So here we are not using 107 107 00:06:21,330 --> 00:06:24,223 the from here as a method on an array. 108 108 00:06:25,490 --> 00:06:29,400 Instead we are using it on the Array() constructor. 109 109 00:06:29,400 --> 00:06:31,980 So that's why it's Array.from. 110 110 00:06:31,980 --> 00:06:35,500 And this array here is exactly the same as this one. 111 111 00:06:35,500 --> 00:06:39,670 So this function, so again, array here is a function 112 112 00:06:39,670 --> 00:06:44,330 and then on this function object, we call the from() method. 113 113 00:06:44,330 --> 00:06:48,160 So that sounds confusing, but we will make more sense of it 114 114 00:06:48,160 --> 00:06:51,140 in the object oriented programming section. 115 115 00:06:51,140 --> 00:06:53,300 But anyway, into this function here, 116 116 00:06:53,300 --> 00:06:57,883 we can first pass in an object with the length property. 117 117 00:06:58,880 --> 00:07:00,920 So let's set it to seven. 118 118 00:07:00,920 --> 00:07:04,430 And then the second argument is a mapping function. 119 119 00:07:04,430 --> 00:07:08,280 So it is exactly like the callback function that we pass 120 120 00:07:08,280 --> 00:07:10,390 into the map() method. 121 121 00:07:10,390 --> 00:07:13,970 So to start, let's also programmatically recreate 122 122 00:07:13,970 --> 00:07:16,920 this array here of seven ones. 123 123 00:07:16,920 --> 00:07:19,470 And so let's write a callback function here. 124 124 00:07:19,470 --> 00:07:22,670 And in this case we don't even need any arguments, 125 125 00:07:22,670 --> 00:07:24,710 but we still have to write a function. 126 126 00:07:24,710 --> 00:07:26,730 So let's write an arrow function here, 127 127 00:07:26,730 --> 00:07:31,170 which will simply return one in each iteration. 128 128 00:07:31,170 --> 00:07:34,120 So no arguments, no current element, 129 129 00:07:34,120 --> 00:07:36,950 no current index and nothing. 130 130 00:07:36,950 --> 00:07:39,080 So all we want to return is a one 131 131 00:07:39,080 --> 00:07:44,080 and that will then put a one in each of the array positions. 132 132 00:07:45,370 --> 00:07:48,560 So let's call this one here Y 133 133 00:07:50,160 --> 00:07:51,993 and then log it to the console. 134 134 00:07:54,770 --> 00:07:57,660 And indeed we get here the exact same result 135 135 00:07:57,660 --> 00:07:59,360 that we had before. 136 136 00:07:59,360 --> 00:08:00,490 But in my opinion, 137 137 00:08:00,490 --> 00:08:04,540 this is a lot cleaner than using this a weird new array 138 138 00:08:04,540 --> 00:08:09,100 behavior than and together with the fill() method. 139 139 00:08:09,100 --> 00:08:12,050 So in my opinion, this is way nicer. 140 140 00:08:12,050 --> 00:08:14,911 But anyway, let's not take it one step further 141 141 00:08:14,911 --> 00:08:19,673 and actually create this initial array from one to seven. 142 142 00:08:21,100 --> 00:08:24,127 So Array.from{length: 7} 143 143 00:08:30,200 --> 00:08:32,040 and then our callback function, 144 144 00:08:32,040 --> 00:08:35,530 and as always, we get access to the current element. 145 145 00:08:35,530 --> 00:08:38,653 So let's call it current first and then the current index. 146 146 00:08:40,570 --> 00:08:44,880 And so the index will vary between zero and six. 147 147 00:08:44,880 --> 00:08:48,390 And so all we have to return from this function is 148 148 00:08:48,390 --> 00:08:49,723 i + one. 149 149 00:08:51,570 --> 00:08:53,470 So again, this callback function here 150 150 00:08:53,470 --> 00:08:57,380 is exactly like the one in a map() method. 151 151 00:08:57,380 --> 00:09:00,300 So you can simply imagine that you're using this 152 152 00:09:00,300 --> 00:09:03,470 as a callback function in calling the map() method 153 153 00:09:03,470 --> 00:09:04,653 on an empty array. 154 154 00:09:05,863 --> 00:09:09,640 And so as always, we get access to the current element 155 155 00:09:09,640 --> 00:09:11,320 and the index. 156 156 00:09:11,320 --> 00:09:15,721 And so adding one to the index will then give us values 157 157 00:09:15,721 --> 00:09:17,423 from one to seven. 158 158 00:09:18,840 --> 00:09:21,350 So Z meant... 159 159 00:09:21,350 --> 00:09:22,863 Yeah, here we go. 160 160 00:09:24,190 --> 00:09:29,090 Now, remember how earlier I used a variable like this. 161 161 00:09:29,090 --> 00:09:32,940 So an underscore, which means a throwaway variable. 162 162 00:09:32,940 --> 00:09:36,590 And so this is another use case for using this convention 163 163 00:09:36,590 --> 00:09:39,650 because we do not need this current value at all. 164 164 00:09:39,650 --> 00:09:42,530 But we still of course have to define something 165 165 00:09:42,530 --> 00:09:46,330 as the first parameter because the index that we need 166 166 00:09:46,330 --> 00:09:48,410 is only the second parameter. 167 167 00:09:48,410 --> 00:09:52,060 But to denote that we are not using this current element, 168 168 00:09:52,060 --> 00:09:54,299 we simply write an underscore. 169 169 00:09:54,299 --> 00:09:56,170 And then other programmers 170 170 00:09:56,170 --> 00:09:58,230 will also understand this convention 171 171 00:09:58,230 --> 00:10:02,863 and automatically know that we don't use this parameter. 172 172 00:10:04,770 --> 00:10:08,300 So this is how we create an array programmatically. 173 173 00:10:08,300 --> 00:10:10,460 And I hope you can see all kinds of 174 174 00:10:10,460 --> 00:10:12,770 different use cases for this. 175 175 00:10:12,770 --> 00:10:14,950 For example, you could create an array 176 176 00:10:14,950 --> 00:10:17,940 with 100 random dice rolls. 177 177 00:10:17,940 --> 00:10:20,800 So maybe you want to try that out on your own, 178 178 00:10:20,800 --> 00:10:23,770 and that is actually one of the assignments that I have 179 179 00:10:23,770 --> 00:10:26,160 later here for this section. 180 180 00:10:26,160 --> 00:10:28,710 So there's gonna be a couple of exercises 181 181 00:10:28,710 --> 00:10:30,700 and this will be one of them. 182 182 00:10:30,700 --> 00:10:34,290 But you can try it out immediately if you feel like it. 183 183 00:10:34,290 --> 00:10:38,340 So try Array.from() to generate an array 184 184 00:10:38,340 --> 00:10:40,713 with 100 random dice rolls. 185 185 00:10:41,880 --> 00:10:45,010 See if you can do that, but anyway, 186 186 00:10:45,010 --> 00:10:48,100 let's now move on and see a more real use case 187 187 00:10:48,100 --> 00:10:51,290 of the Array.from() function. 188 188 00:10:51,290 --> 00:10:53,930 Now, this Array.from() function 189 189 00:10:53,930 --> 00:10:57,030 was initially introduced into JavaScript 190 190 00:10:57,030 --> 00:11:01,460 in order to create arrays from array like structures. 191 191 00:11:01,460 --> 00:11:05,770 So remember how I talked about so-called Iterables before, 192 192 00:11:05,770 --> 00:11:09,770 so things like Strings, Maps or Sets, 193 193 00:11:09,770 --> 00:11:12,530 they are all Iterables in JavaScript. 194 194 00:11:12,530 --> 00:11:15,620 And so they can be converted to real arrays 195 195 00:11:15,620 --> 00:11:17,507 using Array.from(). 196 196 00:11:18,570 --> 00:11:21,690 And that's the reason also for the name of the function, 197 197 00:11:21,690 --> 00:11:25,640 because we can create arrays from other things. 198 198 00:11:25,640 --> 00:11:26,940 All right. 199 199 00:11:26,940 --> 00:11:30,820 Now, besides these obvious Iterables that I just mentioned, 200 200 00:11:30,820 --> 00:11:34,050 like Maps or Sets another great example 201 201 00:11:34,050 --> 00:11:36,150 of an array like structure 202 202 00:11:36,150 --> 00:11:38,317 is the result of using querySelectorAll(). 203 203 00:11:39,670 --> 00:11:43,570 So maybe you remember that querySelectorAll() returns, 204 204 00:11:43,570 --> 00:11:45,730 something called a NodeList, 205 205 00:11:45,730 --> 00:11:47,740 which is something like an array, 206 206 00:11:47,740 --> 00:11:50,400 which contains all the selected elements. 207 207 00:11:50,400 --> 00:11:52,470 But it's not a real array, 208 208 00:11:52,470 --> 00:11:56,700 and so it doesn't have methods like map(), for example. 209 209 00:11:56,700 --> 00:11:58,550 But it's not a real array, 210 210 00:11:58,550 --> 00:12:01,560 and so it doesn't have most of the array methods 211 211 00:12:01,560 --> 00:12:04,260 like map() or reduce(). 212 212 00:12:04,260 --> 00:12:06,350 So if we actually wanted to use 213 213 00:12:06,350 --> 00:12:09,890 a real array method like that on a NodeList, 214 214 00:12:09,890 --> 00:12:13,850 we would first need to convert the NodeList to an array. 215 215 00:12:13,850 --> 00:12:17,320 And for that Array.from() is perfect. 216 216 00:12:17,320 --> 00:12:19,420 So let's do something here now. 217 217 00:12:19,420 --> 00:12:22,320 And let's say that we do not have the movements 218 218 00:12:22,320 --> 00:12:26,370 or for application here stored in an array. 219 219 00:12:26,370 --> 00:12:29,823 So let me show that real quick. 220 220 00:12:31,310 --> 00:12:35,760 So again, let's pretend that we only have these values, 221 221 00:12:35,760 --> 00:12:38,480 so all of these movements only stored here 222 222 00:12:38,480 --> 00:12:40,180 in the user interface, 223 223 00:12:40,180 --> 00:12:43,150 but we do not have them somewhere in our code. 224 224 00:12:43,150 --> 00:12:46,880 So we don't have an array containing these values. 225 225 00:12:46,880 --> 00:12:50,940 But now let's say we want to calculate their sum. 226 226 00:12:50,940 --> 00:12:53,900 And so therefore we need to somehow get them first 227 227 00:12:53,900 --> 00:12:57,550 from the user interface and then do the calculation 228 228 00:12:57,550 --> 00:12:58,523 based on that. 229 229 00:12:59,610 --> 00:13:02,893 So let's create a variable called movementsUI. 230 230 00:13:05,520 --> 00:13:08,820 So the ones that we get from the user interface. 231 231 00:13:08,820 --> 00:13:12,660 So Array.from() and now here, 232 232 00:13:12,660 --> 00:13:15,850 the elements that we want to convert to an array. 233 233 00:13:15,850 --> 00:13:19,213 And so that's gonna be document.querySelectorAll(), 234 234 00:13:22,480 --> 00:13:26,193 and then it is the movements of value class. 235 235 00:13:27,420 --> 00:13:29,190 I'm gonna show it to you in a second. 236 236 00:13:29,190 --> 00:13:30,837 So movements_value, 237 237 00:13:33,690 --> 00:13:37,130 so in our HTML, we can see that... 238 238 00:13:38,940 --> 00:13:42,400 Exactly, this is where the value itself is stored. 239 239 00:13:42,400 --> 00:13:44,370 And so that's what we want to get. 240 240 00:13:44,370 --> 00:13:46,690 So these numbers, right? 241 241 00:13:46,690 --> 00:13:49,400 And so we are selecting all of the elements 242 242 00:13:49,400 --> 00:13:50,893 that have this class. 243 243 00:13:54,450 --> 00:13:58,683 So let's just start by checking it out, movementsUI, 244 244 00:14:01,320 --> 00:14:05,010 but now we only get two elements here, 245 245 00:14:05,010 --> 00:14:07,800 and so that's the one that by the time we load 246 246 00:14:07,800 --> 00:14:11,700 this script here are already in the user interface. 247 247 00:14:11,700 --> 00:14:14,270 So it's this one here. 248 248 00:14:14,270 --> 00:14:19,270 So not the seven that are loaded from the account object. 249 249 00:14:20,890 --> 00:14:25,113 So it's not gonna be this seven here. 250 250 00:14:27,080 --> 00:14:30,690 So if we wanted to actually select exactly these elements, 251 251 00:14:30,690 --> 00:14:34,563 we would have to do this code here on some event handler. 252 252 00:14:35,460 --> 00:14:37,023 So let's do that, actually. 253 253 00:14:38,560 --> 00:14:40,330 Let's simply perform this action 254 254 00:14:40,330 --> 00:14:43,050 when we click somewhere here. 255 255 00:14:43,050 --> 00:14:45,513 Let's say here on this BalanceLabel. 256 256 00:14:46,840 --> 00:14:48,660 So it doesn't matter where we click, 257 257 00:14:48,660 --> 00:14:50,893 So that is called the Label Balance. 258 258 00:14:52,160 --> 00:14:57,160 So we can attach a EventListeners to every object. 259 259 00:14:58,350 --> 00:15:00,723 It doesn't have to be a button. 260 260 00:15:01,780 --> 00:15:04,113 So I think we never did this actually. 261 261 00:15:06,440 --> 00:15:08,193 But let's see what happens now. 262 262 00:15:11,100 --> 00:15:12,763 So let's login again here. 263 263 00:15:13,640 --> 00:15:15,975 And again, remember that we are doing this 264 264 00:15:15,975 --> 00:15:19,510 so that we can now read these seven movements 265 265 00:15:19,510 --> 00:15:21,993 from the user interface as we click here. 266 266 00:15:23,170 --> 00:15:25,260 And indeed now it worked. 267 267 00:15:25,260 --> 00:15:30,063 So now we get these eight movements here. 268 268 00:15:31,030 --> 00:15:32,460 and you see that indeed, 269 269 00:15:32,460 --> 00:15:35,593 it is these values that we see now on the screen. 270 270 00:15:37,735 --> 00:15:38,890 All right. 271 271 00:15:38,890 --> 00:15:41,610 But now let me also show you that we cannot 272 272 00:15:41,610 --> 00:15:43,530 call the map() method on it 273 273 00:15:43,530 --> 00:15:47,051 because the map() method would be useful to now actually get 274 274 00:15:47,051 --> 00:15:48,610 to adjust the number, 275 275 00:15:48,610 --> 00:15:50,841 because you'll see that here we also have 276 276 00:15:50,841 --> 00:15:54,560 this C or sign and so we need to get rid of that. 277 277 00:15:54,560 --> 00:15:57,173 And so the map() method would be perfect for that. 278 278 00:15:58,330 --> 00:16:01,540 So what we would like to do is, 279 279 00:16:01,540 --> 00:16:03,040 let's just do it here for now. 280 280 00:16:03,880 --> 00:16:07,283 We would love to do take the current movement, 281 281 00:16:11,050 --> 00:16:12,830 and so in this case, the movement here, 282 282 00:16:12,830 --> 00:16:14,960 let's just call it element actually, 283 283 00:16:14,960 --> 00:16:17,393 because right now it is a dumb element. 284 284 00:16:18,460 --> 00:16:20,830 So we would take this movement, 285 285 00:16:20,830 --> 00:16:24,410 which is, remember one of these elements here, 286 286 00:16:24,410 --> 00:16:28,173 and so from this element, we need to take the text content. 287 287 00:16:29,780 --> 00:16:33,550 And then we also want to replace the Euro sign 288 288 00:16:33,550 --> 00:16:35,283 with nothing basically. 289 289 00:16:36,250 --> 00:16:40,530 So I'm using the emoji picker here again on the Mac, 290 290 00:16:40,530 --> 00:16:44,790 but you can just get a symbol from your text up there, 291 291 00:16:44,790 --> 00:16:46,533 so from the code we already wrote. 292 292 00:16:47,970 --> 00:16:51,530 And I want to replace it with nothing, 293 293 00:16:51,530 --> 00:16:56,300 but now you will see as we try this again, 294 294 00:16:56,300 --> 00:16:57,573 that is not gonna work. 295 295 00:17:01,170 --> 00:17:04,440 And in fact it does actually work, 296 296 00:17:04,440 --> 00:17:06,780 and that's because I was saying it wrong. 297 297 00:17:06,780 --> 00:17:09,660 Of course it's gonna work because this one here is 298 298 00:17:09,660 --> 00:17:12,490 already a real array at this point. 299 299 00:17:12,490 --> 00:17:17,490 So we created this movementsUI using Array.from() 300 300 00:17:17,600 --> 00:17:20,060 and so of course it is gonna work already. 301 301 00:17:20,060 --> 00:17:24,490 It would not work if we did it directly on the results 302 302 00:17:24,490 --> 00:17:27,550 of the querySelectorAll(). 303 303 00:17:27,550 --> 00:17:29,430 So sorry for that mistake. 304 304 00:17:29,430 --> 00:17:32,040 So it did indeed work already. 305 305 00:17:32,040 --> 00:17:33,773 But we can make this even better. 306 306 00:17:34,700 --> 00:17:37,123 First of course, we need to convert to a number, 307 307 00:17:38,950 --> 00:17:41,960 but that is not the point here, actually. 308 308 00:17:41,960 --> 00:17:45,910 So the point is that we can use now the second argument 309 309 00:17:45,910 --> 00:17:48,860 of the Array.from() a function here, 310 310 00:17:48,860 --> 00:17:51,730 which remember the mapping callback. 311 311 00:17:51,730 --> 00:17:56,010 And so basically we can simply put this entire callback 312 312 00:17:57,570 --> 00:18:00,863 right here as the second argument. 313 313 00:18:04,240 --> 00:18:09,240 And now this movementsUI array is already the final array 314 314 00:18:10,410 --> 00:18:11,493 as we see it here. 315 315 00:18:12,760 --> 00:18:14,490 So let's just check that out 316 316 00:18:16,060 --> 00:18:19,193 and then make really clear what just happened here. 317 317 00:18:21,290 --> 00:18:22,273 So again, 318 318 00:18:24,920 --> 00:18:28,470 and as we click here, we get indeed all the numbers 319 319 00:18:28,470 --> 00:18:29,563 that we have here. 320 320 00:18:30,440 --> 00:18:31,960 So let's recap. 321 321 00:18:31,960 --> 00:18:36,210 We used a Array.from() to create an array from 322 322 00:18:36,210 --> 00:18:39,000 the result of the querySelectorAll() 323 323 00:18:39,000 --> 00:18:42,210 which is a NodeList, which is not really an array, 324 324 00:18:42,210 --> 00:18:44,600 but an array like structure 325 325 00:18:44,600 --> 00:18:46,530 and that array like structure 326 326 00:18:46,530 --> 00:18:48,900 can easily be converted to an array 327 327 00:18:48,900 --> 00:18:50,930 using Array.from(). 328 328 00:18:50,930 --> 00:18:52,480 And then as a second step, 329 329 00:18:52,480 --> 00:18:54,950 we even included a mapping function, 330 330 00:18:54,950 --> 00:18:57,440 which then forms that initial array 331 331 00:18:57,440 --> 00:19:00,570 to an array exactly as we want it. 332 332 00:19:00,570 --> 00:19:05,570 So basically converting the raw element to its text content 333 333 00:19:06,400 --> 00:19:09,453 and replacing the Euro sign with nothing. 334 334 00:19:10,690 --> 00:19:13,430 And so then in the end, we end up exactly 335 335 00:19:13,430 --> 00:19:16,470 with the array of numbers that we intended. 336 336 00:19:16,470 --> 00:19:20,490 And by the way, I'm not sure if I mentioned it earlier, 337 337 00:19:20,490 --> 00:19:23,110 but there is another way of converting 338 338 00:19:23,110 --> 00:19:24,790 this here to an array, 339 339 00:19:24,790 --> 00:19:26,093 so let me grab it here. 340 340 00:19:28,230 --> 00:19:32,940 So movementsUI2, and then we can actually 341 341 00:19:32,940 --> 00:19:36,590 spread the results of this querySelectorAll() 342 342 00:19:36,590 --> 00:19:38,590 into a new array as well. 343 343 00:19:38,590 --> 00:19:41,500 So this also creates the array, 344 344 00:19:41,500 --> 00:19:44,490 but then we would have to do the mapping separately. 345 345 00:19:44,490 --> 00:19:47,423 And so actually I prefer this. 346 346 00:19:48,500 --> 00:19:52,120 So to me, the Array.from() function was a great addition 347 347 00:19:52,120 --> 00:19:56,420 to JavaScript in ES6. 348 348 00:19:56,420 --> 00:19:58,840 And that's actually all I had to tell you 349 349 00:19:58,840 --> 00:20:00,870 here in this video. 350 350 00:20:00,870 --> 00:20:04,670 So that was the last couple of methods and functions 351 351 00:20:04,670 --> 00:20:07,310 that we learned about a arrays. 352 352 00:20:07,310 --> 00:20:11,930 And indeed, we learned a lot of methods in the section. 353 353 00:20:12,910 --> 00:20:15,050 Now, keeping all of them in your mind 354 354 00:20:15,050 --> 00:20:17,640 to solve different tasks is of course, 355 355 00:20:17,640 --> 00:20:19,970 a very hard thing to do. 356 356 00:20:19,970 --> 00:20:22,462 And so to make sense of all this mess, 357 357 00:20:22,462 --> 00:20:26,350 in the next video, I will help you decide which array method 358 358 00:20:26,350 --> 00:20:29,050 you should use in each situation 359 359 00:20:29,050 --> 00:20:30,833 to solve different problems. 31590