WEBVTT 1 00:00:01.140 --> 00:00:04.110 So, we're almost finished with this section 2 00:00:04.110 --> 00:00:05.850 and with our application, 3 00:00:05.850 --> 00:00:09.150 but one feature that is still missing in our application 4 00:00:09.150 --> 00:00:12.570 is the ability to sort for movements. 5 00:00:12.570 --> 00:00:16.413 And so in this lecture, let's talk about sorting arrays. 6 00:00:17.880 --> 00:00:22.740 Now, sorting is a much discussed topic in computer science, 7 00:00:22.740 --> 00:00:24.181 and there are countless algorithms 8 00:00:24.181 --> 00:00:27.510 and methods of sorting values. 9 00:00:27.510 --> 00:00:29.460 And we might actually talk about this 10 00:00:29.460 --> 00:00:31.052 a little bit later in the course. 11 00:00:31.052 --> 00:00:33.690 For now, though, we're simply gonna use 12 00:00:33.690 --> 00:00:36.213 JavaScript's built-in sort() method. 13 00:00:37.050 --> 00:00:40.323 And let's start here with an array of strings, 14 00:00:41.880 --> 00:00:44.133 and let's call it owners. 15 00:00:48.000 --> 00:00:53.000 So, Jonas, Zach, Adam, and Martha. 16 00:01:00.030 --> 00:01:01.140 Okay. 17 00:01:01.140 --> 00:01:05.213 And now all we need to do is owners.sort(). 18 00:01:08.790 --> 00:01:09.780 Okay? 19 00:01:09.780 --> 00:01:14.010 And so, indeed, we now get our array here nicely sorted. 20 00:01:14.010 --> 00:01:17.073 So alphabetically from A to Z. 21 00:01:17.910 --> 00:01:22.290 So this works, indeed, just as expected, right? 22 00:01:22.290 --> 00:01:26.070 Now this actually mutates the original array. 23 00:01:26.070 --> 00:01:28.770 So if we take a look at owners now, 24 00:01:28.770 --> 00:01:33.450 you will see that it also is now mutated, okay? 25 00:01:33.450 --> 00:01:37.110 And so we have to be very careful with this method. 26 00:01:37.110 --> 00:01:38.793 So, this is with strings. 27 00:01:40.170 --> 00:01:43.083 Now let's try it with numbers as well. 28 00:01:45.270 --> 00:01:49.503 So, let's use our movements array here one more time. 29 00:01:50.730 --> 00:01:53.943 So I'll start by logging it to the console so we can see it. 30 00:01:56.376 --> 00:01:59.207 And then let's also log movements.sort(). 31 00:02:03.660 --> 00:02:05.523 So give it some more space here. 32 00:02:06.570 --> 00:02:09.840 And if we take a look at the result here, this time, 33 00:02:09.840 --> 00:02:14.220 the result is not really what we are expecting, right? 34 00:02:14.220 --> 00:02:19.220 These numbers are not at all ordered in any way, are they? 35 00:02:19.620 --> 00:02:22.337 And the reason for this is that the sort() method 36 00:02:22.337 --> 00:02:26.492 does the sorting based on strings, all right? 37 00:02:26.492 --> 00:02:28.530 So that might sound weird, 38 00:02:28.530 --> 00:02:31.740 but that is just how it works by default. 39 00:02:31.740 --> 00:02:35.100 So, basically, what it does is to convert everything 40 00:02:35.100 --> 00:02:38.640 to strings and then it does the sorting itself. 41 00:02:38.640 --> 00:02:41.940 And if we look at the results as if they were strings, 42 00:02:41.940 --> 00:02:44.073 then the result actually makes sense. 43 00:02:45.210 --> 00:02:49.920 So, the minus here, you see, always comes first, okay? 44 00:02:49.920 --> 00:02:52.830 So, first, you have all the minuses here. 45 00:02:52.830 --> 00:02:55.244 And so that's basically alphabetically 46 00:02:55.244 --> 00:02:58.080 the first string that occurs. 47 00:02:58.080 --> 00:03:01.253 And then afterwards, you have this one which starts with one 48 00:03:01.253 --> 00:03:05.160 before this four, and then before this six. 49 00:03:05.160 --> 00:03:07.740 So these three are alphabetically ordered 50 00:03:07.740 --> 00:03:09.123 if they were strings. 51 00:03:09.123 --> 00:03:10.800 It's the same here. 52 00:03:10.800 --> 00:03:13.200 So you have one first, then two, 53 00:03:13.200 --> 00:03:16.650 then three, then four, and then seven. 54 00:03:16.650 --> 00:03:19.110 So again, if they were strings, 55 00:03:19.110 --> 00:03:23.130 then this result would make sense, but they are not strings. 56 00:03:23.130 --> 00:03:25.140 And so we have to fix this. 57 00:03:25.140 --> 00:03:26.810 And, in fact, we can fix this 58 00:03:26.810 --> 00:03:29.830 by passing in a compare callback function 59 00:03:29.830 --> 00:03:32.220 into the sort() method. 60 00:03:32.220 --> 00:03:36.270 So, this here does not work, let's get rid of it. 61 00:03:36.270 --> 00:03:40.147 And so let's write movements.sort() 62 00:03:42.510 --> 00:03:45.000 and we need to give it a callback function. 63 00:03:45.000 --> 00:03:48.900 And this callback function is called with two arguments. 64 00:03:48.900 --> 00:03:51.993 And let's simply call them a and b. 65 00:03:53.580 --> 00:03:54.720 Okay? 66 00:03:54.720 --> 00:03:57.243 And these two parameters here are essentially 67 00:03:57.243 --> 00:04:00.027 the current value and the next value 68 00:04:00.027 --> 00:04:04.410 if we imagine the sort() method looping over the array. 69 00:04:04.410 --> 00:04:06.360 However, in order to understand 70 00:04:06.360 --> 00:04:08.760 how the compare function works, 71 00:04:08.760 --> 00:04:10.733 so how this callback function here works 72 00:04:10.733 --> 00:04:12.900 and how we have to write it, 73 00:04:12.900 --> 00:04:16.500 let's just think of a and b as simply being 74 00:04:16.500 --> 00:04:19.620 two consecutive numbers in the array. 75 00:04:19.620 --> 00:04:22.290 And it doesn't matter which ones. 76 00:04:22.290 --> 00:04:24.774 So, let's simply take these two. 77 00:04:24.774 --> 00:04:29.774 So 450 and 400, okay? 78 00:04:29.790 --> 00:04:32.190 So, let's just compare these two. 79 00:04:32.190 --> 00:04:34.200 Now, in our callback function here, 80 00:04:34.200 --> 00:04:37.110 if we return less than zero, 81 00:04:37.110 --> 00:04:41.340 then the value a will be sorted before value b. 82 00:04:41.340 --> 00:04:45.300 And the opposite, if we return a positive value, 83 00:04:45.300 --> 00:04:50.190 then b will be placed before a in the sorted output array. 84 00:04:50.190 --> 00:04:51.023 Okay? 85 00:04:51.023 --> 00:04:52.950 So let's use that in practice 86 00:04:52.950 --> 00:04:56.013 to sort the movements array in ascending order. 87 00:04:57.750 --> 00:05:00.885 And first, let me just write what I just did here. 88 00:05:00.885 --> 00:05:05.885 So, if we return something less than zero, 89 00:05:05.970 --> 00:05:09.120 then a will be before b. 90 00:05:09.120 --> 00:05:13.530 But on the other hand, if we return greater than zero, 91 00:05:13.530 --> 00:05:17.760 then b will be before a, okay? 92 00:05:17.760 --> 00:05:19.257 And so we can use this knowledge 93 00:05:19.257 --> 00:05:24.180 to sort our movements array now in an ascending order. 94 00:05:24.180 --> 00:05:26.970 So, ascending order means that we want to go 95 00:05:26.970 --> 00:05:30.570 from small to large numbers, right? 96 00:05:30.570 --> 00:05:32.880 And to make this easier to understand, 97 00:05:32.880 --> 00:05:36.120 let's analyze the two numbers that we have here. 98 00:05:36.120 --> 00:05:39.330 So we have 450 and minus 400. 99 00:05:39.330 --> 00:05:43.380 And so if we want to sort these two in an ascending order, 100 00:05:43.380 --> 00:05:45.450 then we need to switch them. 101 00:05:45.450 --> 00:05:48.870 So, this is a, and this is b, right? 102 00:05:48.870 --> 00:05:50.580 But now we want to switch them 103 00:05:50.580 --> 00:05:53.160 to make them in an ascending order. 104 00:05:53.160 --> 00:05:58.160 So what we want here is b and then a, so b, a, right? 105 00:05:59.070 --> 00:06:01.207 And so therefore we need to return something 106 00:06:01.207 --> 00:06:04.470 that is greater than zero, okay? 107 00:06:04.470 --> 00:06:05.786 Because that's the rule 108 00:06:05.786 --> 00:06:08.970 how the sort callback function works. 109 00:06:08.970 --> 00:06:13.784 So, again, in the case, basically, that a is greater than b, 110 00:06:13.784 --> 00:06:15.810 which is what we have here, 111 00:06:15.810 --> 00:06:19.293 then we want to return something that is greater than zero. 112 00:06:21.060 --> 00:06:23.070 So let's write that. 113 00:06:23.070 --> 00:06:27.460 So, if a is greater than b, return, 114 00:06:30.390 --> 00:06:31.800 and let's say one. 115 00:06:31.800 --> 00:06:33.750 And the number here doesn't really matter 116 00:06:33.750 --> 00:06:35.613 as long as it's greater than zero. 117 00:06:36.720 --> 00:06:40.503 And else, or actually let's write it like this. 118 00:06:41.790 --> 00:06:46.790 So, if b is greater than a, then return something negative. 119 00:06:49.062 --> 00:06:53.280 So just minus one. Okay? 120 00:06:53.280 --> 00:06:55.320 And that's actually it. 121 00:06:55.320 --> 00:06:58.443 So let's log then the movements again here to the console, 122 00:06:59.850 --> 00:07:03.060 because here we are mutating the array, 123 00:07:03.060 --> 00:07:06.483 and then at this point, it is already the mutated version. 124 00:07:07.560 --> 00:07:10.500 And now as we see here, 125 00:07:10.500 --> 00:07:14.673 the array is now indeed sorted in an ascending order. 126 00:07:15.600 --> 00:07:16.560 All right? 127 00:07:16.560 --> 00:07:18.747 And so that is because, basically, 128 00:07:18.747 --> 00:07:21.916 the sort() method keeps looping over the array 129 00:07:21.916 --> 00:07:24.668 and applying this callback function here 130 00:07:24.668 --> 00:07:28.320 until everything is in an ascending order according 131 00:07:28.320 --> 00:07:30.789 to the rules that we established here. 132 00:07:30.789 --> 00:07:31.622 Okay? 133 00:07:32.520 --> 00:07:34.920 So, returning one here basically means 134 00:07:34.920 --> 00:07:37.893 to switch the order, and let's write that here, 135 00:07:39.000 --> 00:07:44.000 switch order and keep order. 136 00:07:44.850 --> 00:07:48.660 So maybe that makes it also a bit easier to understand. 137 00:07:48.660 --> 00:07:51.623 So, if we come back to one of these examples here. 138 00:07:51.623 --> 00:07:56.623 So let's say we have a and b, 200 and 450. 139 00:07:57.930 --> 00:08:01.710 So, in this case, we want to keep the order, right? 140 00:08:01.710 --> 00:08:04.494 And so, therefore, that's the case in which we return 141 00:08:04.494 --> 00:08:06.960 something less than zero. 142 00:08:06.960 --> 00:08:08.820 So that's what we have here. 143 00:08:08.820 --> 00:08:12.360 And maybe it's easier to read like this. 144 00:08:12.360 --> 00:08:17.163 So a less than b, but of course, it's the exact same thing. 145 00:08:18.360 --> 00:08:21.846 And then here, again, with our original example, 146 00:08:21.846 --> 00:08:23.790 this first one is greater. 147 00:08:23.790 --> 00:08:26.130 So the order has to be switched. 148 00:08:26.130 --> 00:08:28.186 And so here we have that situation 149 00:08:28.186 --> 00:08:31.953 where a is greater than b. 150 00:08:33.090 --> 00:08:35.580 Now if we wanted to do it the opposite, 151 00:08:35.580 --> 00:08:37.556 so sorting in a descending order, 152 00:08:37.556 --> 00:08:41.603 we would simply do it exactly the other way around, so... 153 00:08:49.610 --> 00:08:52.500 So all we would do is to return minus one, 154 00:08:52.500 --> 00:08:56.550 in this case, and return one, in this case. 155 00:08:56.550 --> 00:09:00.243 And so now the array is nicely sorted the other way around. 156 00:09:02.580 --> 00:09:04.140 So let's write that here. 157 00:09:04.140 --> 00:09:08.210 So, ascending and descending. 158 00:09:12.900 --> 00:09:15.303 Let's also log the movements here. 159 00:09:17.100 --> 00:09:21.600 And great, so this works beautifully, 160 00:09:21.600 --> 00:09:24.360 and it's also gonna work for strings, 161 00:09:24.360 --> 00:09:27.720 and you can try that out yourself if you want. 162 00:09:27.720 --> 00:09:30.120 Now, if we are working with numbers, 163 00:09:30.120 --> 00:09:32.940 then we can actually simplify this a lot 164 00:09:32.940 --> 00:09:35.760 by simply using some simple math. 165 00:09:35.760 --> 00:09:39.330 So let's take a look again here at our condition. 166 00:09:39.330 --> 00:09:44.330 So, we already know that if a is greater than b, 167 00:09:44.520 --> 00:09:49.520 then a minus b would always be something positive, right? 168 00:09:49.680 --> 00:09:53.370 And the same here with a less than b. 169 00:09:53.370 --> 00:09:56.580 So if a is less than b, then we know 170 00:09:56.580 --> 00:10:00.060 that a minus b is always something negative, 171 00:10:00.060 --> 00:10:03.090 and something negative is exactly what we want 172 00:10:03.090 --> 00:10:05.313 to return here, isn't it? 173 00:10:06.180 --> 00:10:09.224 And so what we can do is take this 174 00:10:09.224 --> 00:10:11.590 and improve it dramatically 175 00:10:15.780 --> 00:10:18.870 because, in fact, we don't need any of this. 176 00:10:18.870 --> 00:10:23.870 All we need is to say a minus b, and that's it. 177 00:10:24.750 --> 00:10:28.803 Let's check the result, and it still works the same. 178 00:10:30.270 --> 00:10:32.790 So, let's recap what we did here. 179 00:10:32.790 --> 00:10:37.770 So, again, we already know that if a is greater than b, 180 00:10:37.770 --> 00:10:39.930 then this will be a positive number. 181 00:10:39.930 --> 00:10:42.870 And so here we then return that positive number. 182 00:10:42.870 --> 00:10:45.210 It doesn't have to be exactly one, 183 00:10:45.210 --> 00:10:47.730 just something greater than zero. 184 00:10:47.730 --> 00:10:52.337 Now if it's the other way around, if a is less than b, 185 00:10:52.337 --> 00:10:56.400 then this operation will always be a negative number. 186 00:10:56.400 --> 00:10:59.040 And so, therefore, then something negative 187 00:10:59.040 --> 00:11:01.710 is returned just as minus one. 188 00:11:01.710 --> 00:11:03.567 But again, it can be any number. 189 00:11:03.567 --> 00:11:07.440 And by the way, if we return zero here, 190 00:11:07.440 --> 00:11:10.020 so in case these two values are the same, 191 00:11:10.020 --> 00:11:13.260 then their position simply remains unchanged. 192 00:11:13.260 --> 00:11:14.093 All right? 193 00:11:16.290 --> 00:11:17.733 So let's do the same here. 194 00:11:21.610 --> 00:11:23.370 And so, here, it is the opposite. 195 00:11:23.370 --> 00:11:25.113 So b minus a. 196 00:11:26.700 --> 00:11:27.923 And as always, keep in mind 197 00:11:27.923 --> 00:11:31.560 that we are actually returning this value here, 198 00:11:31.560 --> 00:11:33.111 but we don't have to write the return 199 00:11:33.111 --> 00:11:35.433 because we're using an arrow function. 200 00:11:36.300 --> 00:11:39.003 So, you see it still works the same. 201 00:11:40.260 --> 00:11:41.340 All right? 202 00:11:41.340 --> 00:11:43.590 And this is basically most of what you need 203 00:11:43.590 --> 00:11:47.220 to know about sorting arrays with numbers. 204 00:11:47.220 --> 00:11:49.741 Now, if you have a mixed array like with strings 205 00:11:49.741 --> 00:11:53.212 and numbers together, then this is not gonna work, 206 00:11:53.212 --> 00:11:56.577 and I advise you to simply not use 207 00:11:56.577 --> 00:12:00.390 the sort() method in these cases anyway. 208 00:12:00.390 --> 00:12:04.890 And that's because there's not really a point in doing so. 209 00:12:04.890 --> 00:12:08.460 But anyway, now that you know how the sort() method works, 210 00:12:08.460 --> 00:12:12.300 let's go back to our application and implement it there. 211 00:12:12.300 --> 00:12:15.213 So let's first see in the demo version what I mean. 212 00:12:18.420 --> 00:12:21.330 So, down here, we have this sort button. 213 00:12:21.330 --> 00:12:25.770 And so this sort will basically sort these movements. 214 00:12:25.770 --> 00:12:26.888 So as we click the button, 215 00:12:26.888 --> 00:12:30.351 it will sort them in this descending order, 216 00:12:30.351 --> 00:12:33.935 which actually is an ascending order because, remember, 217 00:12:33.935 --> 00:12:35.551 we are starting to display 218 00:12:35.551 --> 00:12:40.551 these movements here from the bottom up, okay? 219 00:12:40.620 --> 00:12:43.920 Then as we click it again, it goes back to normal. 220 00:12:43.920 --> 00:12:48.423 So as we keep clicking, it orders and goes back to normal. 221 00:12:49.500 --> 00:12:51.753 And so let's implement that now. 222 00:12:53.970 --> 00:12:56.223 So, we can give us some more space here. 223 00:12:58.320 --> 00:13:01.741 And now we will actually implement the sorting functionality 224 00:13:01.741 --> 00:13:05.823 right in the function that displays the movements. 225 00:13:08.192 --> 00:13:09.540 Okay? 226 00:13:09.540 --> 00:13:12.480 So, let's first implement the sorting itself, 227 00:13:12.480 --> 00:13:13.590 and then after that, 228 00:13:13.590 --> 00:13:17.040 we will implement the clicking on the button. 229 00:13:17.040 --> 00:13:22.040 So that's right here. So displayMovements, all right? 230 00:13:22.320 --> 00:13:26.550 Now what we're gonna do here is to add a second parameter, 231 00:13:26.550 --> 00:13:28.410 which is the sort parameter. 232 00:13:28.410 --> 00:13:31.533 And by default, we will set it to false. 233 00:13:33.120 --> 00:13:35.896 And now depending on this parameter, 234 00:13:35.896 --> 00:13:38.130 whether it is true or false, 235 00:13:38.130 --> 00:13:41.370 we will then order our movements or not. 236 00:13:41.370 --> 00:13:43.980 So sort the movements or not. 237 00:13:43.980 --> 00:13:47.940 And of course, it is false by default 238 00:13:47.940 --> 00:13:49.950 because, well, by default, 239 00:13:49.950 --> 00:13:52.620 we do want to show the movements 240 00:13:52.620 --> 00:13:55.560 just in the order they appear in the array. 241 00:13:55.560 --> 00:13:57.930 But then as we click that sort button, 242 00:13:57.930 --> 00:14:00.353 we will then call this function, displayMovements, 243 00:14:00.353 --> 00:14:02.613 with sort set to true. 244 00:14:05.340 --> 00:14:09.813 So, let's now create a new variable called movements here. 245 00:14:11.550 --> 00:14:15.300 And this variable here, we will define it conditionally. 246 00:14:15.300 --> 00:14:17.790 And actually, we cannot call it movements 247 00:14:17.790 --> 00:14:19.335 because that's already the name 248 00:14:19.335 --> 00:14:23.490 here of the parameters, right? 249 00:14:23.490 --> 00:14:26.392 So let's just call it movs, all right? 250 00:14:26.392 --> 00:14:29.820 And again, we will define it conditionally. 251 00:14:29.820 --> 00:14:31.353 So, we say if sort. 252 00:14:32.220 --> 00:14:34.710 And so that's if sort is true, 253 00:14:34.710 --> 00:14:37.410 then we actually want to sort the movements. 254 00:14:37.410 --> 00:14:40.143 So the movements array that we get here as an input. 255 00:14:41.550 --> 00:14:46.550 So movements, but now we cannot do this. 256 00:14:47.160 --> 00:14:49.440 And that's because, keep in mind, 257 00:14:49.440 --> 00:14:50.820 that the sort() method 258 00:14:50.820 --> 00:14:54.240 will then order the actual underlying array. 259 00:14:54.240 --> 00:14:55.604 So the actual movements array 260 00:14:55.604 --> 00:14:58.680 as it is in the account object. 261 00:14:58.680 --> 00:15:01.170 But that's not what we want at all. 262 00:15:01.170 --> 00:15:04.830 All we want is to display a sorted movements array, 263 00:15:04.830 --> 00:15:09.300 but we do not want to sort the original underlying data. 264 00:15:09.300 --> 00:15:11.036 So what do we do here? 265 00:15:11.036 --> 00:15:13.691 Well, we simply take a copy 266 00:15:13.691 --> 00:15:16.980 of the movements array and sort that. 267 00:15:16.980 --> 00:15:20.370 And so that's what we use now slice for. 268 00:15:20.370 --> 00:15:22.110 And this is one of the situations 269 00:15:22.110 --> 00:15:24.541 that I was telling you about earlier where we need 270 00:15:24.541 --> 00:15:28.285 to actually create a copy using the slice() method 271 00:15:28.285 --> 00:15:30.630 and not the spread operator, 272 00:15:30.630 --> 00:15:33.300 because here we are in the middle of a chain, 273 00:15:33.300 --> 00:15:35.940 and so we want to keep going after this. 274 00:15:35.940 --> 00:15:38.877 And so it's a lot better to simply use the method here 275 00:15:38.877 --> 00:15:41.040 so that we can then simply chain 276 00:15:41.040 --> 00:15:43.860 the sort() method onto that. 277 00:15:43.860 --> 00:15:47.193 And now all we need here is our compare function. 278 00:15:51.210 --> 00:15:53.935 And now, remember how in the user interface, 279 00:15:53.935 --> 00:15:55.264 so in our application, 280 00:15:55.264 --> 00:15:59.760 how the movements appeared in a descending order. 281 00:15:59.760 --> 00:16:01.890 However, that is because we start 282 00:16:01.890 --> 00:16:04.980 to display the values from the bottom up. 283 00:16:04.980 --> 00:16:07.050 And so, actually, we want to now 284 00:16:07.050 --> 00:16:10.050 sort this array in an ascending order. 285 00:16:10.050 --> 00:16:14.433 And to do that, remember, we do a minus b. 286 00:16:15.330 --> 00:16:20.280 So, I explained before why it works this way, okay? 287 00:16:20.280 --> 00:16:24.093 But now, if sort is false, so that's the default value, 288 00:16:24.093 --> 00:16:28.457 then movs should simply become movements, right? 289 00:16:31.410 --> 00:16:33.160 Let's get rid of this comment here. 290 00:16:34.200 --> 00:16:35.370 Give it a save. 291 00:16:35.370 --> 00:16:39.150 And now here, of course, we then need to use that movs 292 00:16:39.150 --> 00:16:40.413 that we just created. 293 00:16:42.120 --> 00:16:44.676 And with this, we have essentially adapted 294 00:16:44.676 --> 00:16:49.676 our displayMovements function to support sorting. 295 00:16:49.770 --> 00:16:53.760 And again, we did that by allowing a second parameter, 296 00:16:53.760 --> 00:16:56.700 which is an optimal parameter called sort. 297 00:16:56.700 --> 00:16:59.430 And then, if sort is set to true, 298 00:16:59.430 --> 00:17:03.030 then the movements that we're going to use to display them 299 00:17:03.030 --> 00:17:05.940 will be sorted like this. 300 00:17:05.940 --> 00:17:09.990 And if it's set to false, then simply the regular movements 301 00:17:09.990 --> 00:17:13.110 as they are passed in will be displayed. 302 00:17:13.110 --> 00:17:15.804 And now, all we need to do is to call this function here 303 00:17:15.804 --> 00:17:18.690 with sort set to true 304 00:17:18.690 --> 00:17:21.273 whenever the user clicks that sort button. 305 00:17:22.920 --> 00:17:26.700 So that button is called btnSort. 306 00:17:26.700 --> 00:17:31.700 And so, let's now create or final event listener 307 00:17:32.066 --> 00:17:35.160 or event handler here. 308 00:17:35.160 --> 00:17:37.173 So btnSort.addEventListener. 309 00:17:44.694 --> 00:17:48.900 And as always, we start by preventing the default 310 00:17:48.900 --> 00:17:51.360 so you can get used to this. 311 00:17:51.360 --> 00:17:54.213 And then, here, we want to call print. 312 00:17:56.970 --> 00:18:00.130 And then, here, we want to call displayMovements. 313 00:18:03.180 --> 00:18:08.180 And of course, with currentAccount.movements as always. 314 00:18:08.520 --> 00:18:13.260 And then the second parameter, we will set to true. 315 00:18:13.260 --> 00:18:15.360 So that's the sort parameter. 316 00:18:15.360 --> 00:18:18.930 And if we ever are in doubt, again, in VS Code, 317 00:18:18.930 --> 00:18:22.890 it nicely shows us what we can pass into the function. 318 00:18:22.890 --> 00:18:25.143 So movements and sort. 319 00:18:26.640 --> 00:18:30.720 Now this is not yet the 100% working solution, 320 00:18:30.720 --> 00:18:31.923 and let me show you why. 321 00:18:32.880 --> 00:18:37.880 So, as I log in, let me almost remove this here. 322 00:18:43.140 --> 00:18:45.450 So let's click now the sort button. 323 00:18:45.450 --> 00:18:48.003 And beautiful, that worked. 324 00:18:49.200 --> 00:18:53.040 So the movements are now indeed sorted, 325 00:18:53.040 --> 00:18:54.900 but now if I click the button again, 326 00:18:54.900 --> 00:18:59.100 it will not go back to normal, right? 327 00:18:59.100 --> 00:19:00.690 And how could it? 328 00:19:00.690 --> 00:19:03.240 We never told it to do so. 329 00:19:03.240 --> 00:19:06.540 So let's find a way of solving this, 330 00:19:06.540 --> 00:19:07.597 and we will solve this 331 00:19:07.597 --> 00:19:10.988 by using a state variable which will monitor 332 00:19:10.988 --> 00:19:14.880 if we are currently sorting the array or not. 333 00:19:14.880 --> 00:19:16.260 Okay? 334 00:19:16.260 --> 00:19:19.530 So that variable needs to live outside 335 00:19:19.530 --> 00:19:22.961 of this callback function so that its value can be preserved 336 00:19:22.961 --> 00:19:27.030 after clicking this button here, right? 337 00:19:27.030 --> 00:19:28.800 Because, as you know, 338 00:19:28.800 --> 00:19:30.893 this function here is executed each time 339 00:19:30.893 --> 00:19:33.033 that we click the sort button. 340 00:19:34.410 --> 00:19:38.580 And so if we defined a variable here in this function, 341 00:19:38.580 --> 00:19:41.477 then it would be created newly each time 342 00:19:41.477 --> 00:19:43.770 that we click that button. 343 00:19:43.770 --> 00:19:47.010 And so we want to preserve that sorted state 344 00:19:48.900 --> 00:19:51.360 throughout all the clicks. 345 00:19:51.360 --> 00:19:56.251 So, we start with this state variable set to false. 346 00:19:56.251 --> 00:19:58.413 And so that's because, in the beginning, 347 00:19:58.413 --> 00:20:01.350 our array is not sorted. 348 00:20:01.350 --> 00:20:03.990 So sorted is false. 349 00:20:03.990 --> 00:20:08.340 And so if it is false, then, here, this should be true. 350 00:20:08.340 --> 00:20:11.310 So we then want to actually sort the array. 351 00:20:11.310 --> 00:20:16.079 So, basically, here, we want the opposite of sorted, right? 352 00:20:16.079 --> 00:20:20.673 And so that's where our not operator comes in handy. 353 00:20:22.650 --> 00:20:23.490 All right? 354 00:20:23.490 --> 00:20:25.890 So we're doing the opposite of sorted. 355 00:20:25.890 --> 00:20:30.030 When sorted is false, then we want to sort it. 356 00:20:30.030 --> 00:20:31.590 So we need true here. 357 00:20:31.590 --> 00:20:33.166 But if it is already sorted, 358 00:20:33.166 --> 00:20:35.280 then we, again, want the opposite. 359 00:20:35.280 --> 00:20:38.043 And so then sort should be back to false. 360 00:20:39.900 --> 00:20:41.370 Now the only thing that's missing 361 00:20:41.370 --> 00:20:44.727 is to actually flip this variable, okay? 362 00:20:44.727 --> 00:20:46.652 And so for that, we do sorted 363 00:20:46.652 --> 00:20:51.652 equal the opposite of sorted, once again. 364 00:20:51.846 --> 00:20:55.620 And so this is what then allows everything here to work. 365 00:20:55.620 --> 00:20:58.020 Otherwise, even as we would click, 366 00:20:58.020 --> 00:21:00.930 this sorted variable would then never change. 367 00:21:00.930 --> 00:21:03.600 And so, with this, each time that we click, 368 00:21:03.600 --> 00:21:05.700 we change sorted from true to false, 369 00:21:05.700 --> 00:21:08.613 then from false to true, and so on and so forth. 370 00:21:10.560 --> 00:21:12.273 So, let's try it now, finally. 371 00:21:18.090 --> 00:21:23.090 And yes, great, that works beautifully. 372 00:21:24.066 --> 00:21:28.080 And so our job here is done. 373 00:21:28.080 --> 00:21:31.350 And in fact, this application is now complete, 374 00:21:31.350 --> 00:21:33.630 at least for this section. 375 00:21:33.630 --> 00:21:34.830 So great job. 376 00:21:34.830 --> 00:21:38.160 Congratulations for reaching this point, 377 00:21:38.160 --> 00:21:39.988 for finishing this application. 378 00:21:39.988 --> 00:21:42.870 This is really an amazing achievement, 379 00:21:42.870 --> 00:21:47.280 and you can pat yourself on the back for making it this far. 380 00:21:47.280 --> 00:21:50.610 Now there is still one or two array methods to learn, 381 00:21:50.610 --> 00:21:53.283 and so let's do that in the next video.