1 00:00:01,140 --> 00:00:04,100 So we're almost finished with this section 2 00:00:04,100 --> 00:00:05,860 and with our application 3 00:00:05,860 --> 00:00:08,819 but one feature that is still missing in our application 4 00:00:08,819 --> 00:00:12,580 is the ability to sort our movements. 5 00:00:12,580 --> 00:00:16,423 And so in this lecture, let's talk about sorting arrays. 6 00:00:17,890 --> 00:00:22,730 Now, sorting is a much-discussed topic in computer science 7 00:00:22,730 --> 00:00:25,630 and there are countless algorithms and methods 8 00:00:25,630 --> 00:00:27,530 of sorting values 9 00:00:27,530 --> 00:00:30,220 and we might actually talk about this a little bit later 10 00:00:30,220 --> 00:00:31,430 in the course. 11 00:00:31,430 --> 00:00:32,510 For now though, 12 00:00:32,510 --> 00:00:36,223 we're simple gonna use JavaScript's built-in sort method. 13 00:00:37,060 --> 00:00:40,323 And let's start here with an array of strings. 14 00:00:41,890 --> 00:00:44,133 And let's call it owners. 15 00:00:48,000 --> 00:00:49,143 So Jonas, 16 00:00:52,230 --> 00:00:53,063 Zach, 17 00:00:54,250 --> 00:00:55,083 Adam, 18 00:00:57,300 --> 00:00:58,263 and Martha. 19 00:01:00,040 --> 00:01:01,160 Okay? 20 00:01:01,160 --> 00:01:05,630 And now all we need to do is owners.sort, okay? 21 00:01:09,780 --> 00:01:13,990 And so indeed, we now get our array here nicely sorted. 22 00:01:13,990 --> 00:01:17,083 So alphabetically from A to Z. 23 00:01:17,920 --> 00:01:22,290 So this works indeed just as expected, right? 24 00:01:22,290 --> 00:01:25,213 Now, this actually mutates the original array. 25 00:01:26,070 --> 00:01:28,760 So if we take a look at owners now, 26 00:01:28,760 --> 00:01:33,470 you will see that it also now is mutated, okay? 27 00:01:33,470 --> 00:01:37,120 And so we have to be very careful with this method. 28 00:01:37,120 --> 00:01:38,793 So this is with strings. 29 00:01:40,160 --> 00:01:43,083 Now let's try it with numbers as well. 30 00:01:45,050 --> 00:01:49,503 So let's use our movements array here one more time. 31 00:01:50,730 --> 00:01:52,820 So I'll start by logging it to the console 32 00:01:52,820 --> 00:01:53,933 so we can see it. 33 00:01:56,783 --> 00:01:59,133 And then let's also log movements.sort. 34 00:02:03,660 --> 00:02:05,503 So give it some more space here, 35 00:02:06,570 --> 00:02:09,230 and if we take a look at the result here, 36 00:02:09,230 --> 00:02:10,480 this time, the result 37 00:02:10,480 --> 00:02:14,250 is not really what we are expecting, right? 38 00:02:14,250 --> 00:02:19,250 These numbers are not at all ordered in any way, are they? 39 00:02:19,630 --> 00:02:21,120 And the reason for this 40 00:02:21,120 --> 00:02:22,860 is that the sort method 41 00:02:22,860 --> 00:02:26,830 does the sorting based on strings, all right? 42 00:02:26,830 --> 00:02:28,530 So that might sound weird 43 00:02:28,530 --> 00:02:31,730 but that is just how it works by default. 44 00:02:31,730 --> 00:02:33,670 So basically, what it does 45 00:02:33,670 --> 00:02:36,130 is to convert everything to strings 46 00:02:36,130 --> 00:02:38,640 and then it does the sorting itself. 47 00:02:38,640 --> 00:02:41,960 And if we look at the result as if they were strings, 48 00:02:41,960 --> 00:02:44,053 then the result actually makes sense. 49 00:02:45,200 --> 00:02:49,920 So the minus here you see always comes first, okay? 50 00:02:49,920 --> 00:02:52,820 So first, you have all the minuses here 51 00:02:52,820 --> 00:02:55,770 and so that's basically alphabetically 52 00:02:55,770 --> 00:02:58,070 the first string that occurs. 53 00:02:58,070 --> 00:03:00,080 And then afterwards, you have this one, 54 00:03:00,080 --> 00:03:03,080 which starts with one before this four 55 00:03:03,080 --> 00:03:05,180 and then before the six. 56 00:03:05,180 --> 00:03:07,750 So these three are alphabetically ordered 57 00:03:07,750 --> 00:03:09,410 if they were strings. 58 00:03:09,410 --> 00:03:10,800 And the same here. 59 00:03:10,800 --> 00:03:14,310 So you have one first, then two, then three, 60 00:03:14,310 --> 00:03:16,660 then four and then seven. 61 00:03:16,660 --> 00:03:19,130 So again, if they were strings, 62 00:03:19,130 --> 00:03:21,290 then this result would make sense. 63 00:03:21,290 --> 00:03:23,150 But they are not strings 64 00:03:23,150 --> 00:03:25,150 and so we have to fix this 65 00:03:25,150 --> 00:03:27,250 and in fact, we can fix this 66 00:03:27,250 --> 00:03:30,190 by passing in a compare callback function 67 00:03:30,190 --> 00:03:32,240 into the sort method. 68 00:03:32,240 --> 00:03:34,240 So this here does not work. 69 00:03:34,240 --> 00:03:36,250 Let's get rid of it 70 00:03:36,250 --> 00:03:40,137 and so let's write movements.sort 71 00:03:42,520 --> 00:03:45,020 and we need to give it a callback function, 72 00:03:45,020 --> 00:03:48,420 and this callback function is called with two arguments 73 00:03:49,730 --> 00:03:52,003 and let's simply call them a and b. 74 00:03:53,600 --> 00:03:54,730 Okay? 75 00:03:54,730 --> 00:03:56,520 And these two parameters here 76 00:03:56,520 --> 00:04:00,580 are essentially the current value and the next value 77 00:04:00,580 --> 00:04:04,420 if we imagine the sort method looping over the array. 78 00:04:04,420 --> 00:04:06,360 However, in order to understand 79 00:04:06,360 --> 00:04:08,740 how the compare function works, 80 00:04:08,740 --> 00:04:11,280 so how this callback function here works 81 00:04:11,280 --> 00:04:12,880 and how we have to write it, 82 00:04:12,880 --> 00:04:15,360 let's just think of a and b 83 00:04:15,360 --> 00:04:19,640 as simply being two consecutive numbers in the array. 84 00:04:19,640 --> 00:04:22,310 And it doesn't matter which ones. 85 00:04:22,310 --> 00:04:25,410 So let's simply take these two. 86 00:04:25,410 --> 00:04:27,363 So 450 and 400. 87 00:04:28,580 --> 00:04:29,810 Okay? 88 00:04:29,810 --> 00:04:32,170 So let's just compare these two. 89 00:04:32,170 --> 00:04:34,200 Now, in our callback function here, 90 00:04:34,200 --> 00:04:37,120 if we return less than zero, 91 00:04:37,120 --> 00:04:41,330 then the value a will be sorted before value b. 92 00:04:41,330 --> 00:04:44,960 And the opposite, if we return a positive value, 93 00:04:44,960 --> 00:04:47,780 then a will be put before b 94 00:04:47,780 --> 00:04:51,010 in the sorted output array, okay? 95 00:04:51,010 --> 00:04:52,940 So let's use that in practice 96 00:04:52,940 --> 00:04:56,003 to sort the movements array in ascending order. 97 00:04:57,030 --> 00:05:00,613 And first, let me just write what I did here. 98 00:05:01,480 --> 00:05:05,990 So if we return something less than zero, 99 00:05:05,990 --> 00:05:09,130 then A will be before B. 100 00:05:09,130 --> 00:05:13,560 But on the other hand, if we return greater than zero, 101 00:05:13,560 --> 00:05:17,760 then B will be before A, okay? 102 00:05:17,760 --> 00:05:19,890 And so we can use this knowledge 103 00:05:19,890 --> 00:05:24,497 to sort our movements array now in ascending order. 104 00:05:24,497 --> 00:05:27,251 So ascending order means that we want to go 105 00:05:27,251 --> 00:05:30,919 from small to large numbers, right? 106 00:05:30,919 --> 00:05:33,227 And to make this easier to understand, 107 00:05:33,227 --> 00:05:36,486 let's analyze the two numbers that we have here. 108 00:05:36,486 --> 00:05:38,403 So we have 450 and -400 109 00:05:39,614 --> 00:05:43,380 and so if we want to sort these two in an ascending order, 110 00:05:43,380 --> 00:05:45,450 then we need to switch them. 111 00:05:45,450 --> 00:05:48,870 So this is a and this is b, right? 112 00:05:48,870 --> 00:05:50,590 But now we want to switch them 113 00:05:50,590 --> 00:05:53,150 to make them in ascending order. 114 00:05:53,150 --> 00:05:56,600 So what we want here is B and then A. 115 00:05:56,600 --> 00:05:59,050 So B, A, right? 116 00:05:59,050 --> 00:06:01,580 And so therefore, we need to return something 117 00:06:01,580 --> 00:06:04,470 that is greater than zero, okay? 118 00:06:04,470 --> 00:06:06,140 Because that's the rule 119 00:06:06,140 --> 00:06:08,980 how the sort callback function works. 120 00:06:08,980 --> 00:06:13,980 So again, in the case basically that A is greater than B, 121 00:06:14,130 --> 00:06:15,830 which is what we have here, 122 00:06:15,830 --> 00:06:19,283 then we want to return something that is greater than zero. 123 00:06:21,050 --> 00:06:23,070 So let's write that. 124 00:06:23,070 --> 00:06:26,783 So if a is greater than b, 125 00:06:28,970 --> 00:06:31,790 return, and let's say one. 126 00:06:31,790 --> 00:06:33,740 And the number here doesn't really matter 127 00:06:33,740 --> 00:06:35,593 as long as it's greater than zero. 128 00:06:36,740 --> 00:06:40,483 And else, or actually let's write it like this, 129 00:06:41,780 --> 00:06:45,633 so if b is greater than a, 130 00:06:46,690 --> 00:06:49,790 then return something negative. 131 00:06:49,790 --> 00:06:53,280 So just -1, okay? 132 00:06:53,280 --> 00:06:55,320 And that's actually it. 133 00:06:55,320 --> 00:06:58,340 So let's log then the movements again here to the console 134 00:06:59,860 --> 00:07:03,070 because here we are mutating the array 135 00:07:03,070 --> 00:07:04,110 and then at this point, 136 00:07:04,110 --> 00:07:06,400 it is already the mutated version 137 00:07:07,550 --> 00:07:12,550 and now as we see here, the array is now indeed sorted 138 00:07:13,280 --> 00:07:14,653 in an ascending order. 139 00:07:15,720 --> 00:07:16,553 All right? 140 00:07:16,553 --> 00:07:20,110 And so that is because basically the sort method 141 00:07:20,110 --> 00:07:22,240 keeps looping over the array 142 00:07:22,240 --> 00:07:25,030 and applying this callback function here 143 00:07:25,030 --> 00:07:28,330 until everything is in an ascending order according 144 00:07:28,330 --> 00:07:30,860 to the rules that we established here. 145 00:07:30,860 --> 00:07:31,693 Okay? 146 00:07:32,530 --> 00:07:34,930 So returning one here basically means 147 00:07:34,930 --> 00:07:37,903 to switch the order and let's write that here. 148 00:07:38,990 --> 00:07:40,830 Switch order 149 00:07:43,470 --> 00:07:44,840 and keep order. 150 00:07:44,840 --> 00:07:48,670 So maybe that makes it also a bit easier to understand. 151 00:07:48,670 --> 00:07:51,353 So if we come back to one of these examples here, 152 00:07:52,660 --> 00:07:57,660 so let's say we have a and b, 200 and 450. 153 00:07:57,950 --> 00:08:01,730 So in this case, we want to keep the order, right? 154 00:08:01,730 --> 00:08:03,670 And so therefore, that's the case 155 00:08:03,670 --> 00:08:06,950 in which we return something less than zero. 156 00:08:06,950 --> 00:08:08,880 So that's what we have here. 157 00:08:08,880 --> 00:08:12,360 And maybe it's easier to read like this, 158 00:08:12,360 --> 00:08:15,220 so a less than b 159 00:08:15,220 --> 00:08:17,270 but of course, it's the exact same thing. 160 00:08:18,380 --> 00:08:22,240 And then here again with our original example, 161 00:08:22,240 --> 00:08:23,800 this first one is greater, 162 00:08:23,800 --> 00:08:26,140 so the order has to be switched 163 00:08:26,140 --> 00:08:28,900 and so here we have that situation 164 00:08:28,900 --> 00:08:31,953 where a is greater than b. 165 00:08:33,100 --> 00:08:35,580 Now, if we wanted to do it the opposite, 166 00:08:35,580 --> 00:08:37,910 so sorting in a descending order, 167 00:08:37,910 --> 00:08:41,103 we would simply do it exactly the other way around. 168 00:08:49,969 --> 00:08:54,238 So all we would do is to return -1 in this case 169 00:08:54,238 --> 00:08:56,387 and return one in this case. 170 00:08:56,387 --> 00:09:00,253 And so now the array is nicely sorted the other way round. 171 00:09:02,570 --> 00:09:04,430 So let's right that here. 172 00:09:04,430 --> 00:09:07,210 So ascending and 173 00:09:09,640 --> 00:09:10,533 descending. 174 00:09:12,910 --> 00:09:17,910 Let's also log the movements here and great. 175 00:09:19,130 --> 00:09:20,740 So this works beautifully 176 00:09:21,590 --> 00:09:24,360 and it's also gonna work for strings 177 00:09:24,360 --> 00:09:27,730 and you can try that out yourself if you want. 178 00:09:27,730 --> 00:09:30,110 Now, if we are working with numbers, 179 00:09:30,110 --> 00:09:32,940 then we can actually simplify this a lot 180 00:09:32,940 --> 00:09:35,760 by simply using some simple math. 181 00:09:35,760 --> 00:09:39,320 So let's take a look again here at our condition. 182 00:09:39,320 --> 00:09:44,320 So we already know that if a is greater than b, 183 00:09:44,530 --> 00:09:49,530 then a minus b would always be something positive, right? 184 00:09:49,690 --> 00:09:53,380 And the same here with a less than b. 185 00:09:53,380 --> 00:09:55,980 So if a is less than b, 186 00:09:55,980 --> 00:09:58,380 then we know that a minus b 187 00:09:58,380 --> 00:10:00,040 is always something negative 188 00:10:00,040 --> 00:10:03,090 and something negative is exactly what we want 189 00:10:03,090 --> 00:10:05,313 to return here, isn't it? 190 00:10:06,180 --> 00:10:09,540 And so what we can do is take this 191 00:10:09,540 --> 00:10:11,590 and improve it dramatically 192 00:10:15,770 --> 00:10:18,870 because in fact, we don't need any of this. 193 00:10:18,870 --> 00:10:23,290 All we need is to say a minus b. 194 00:10:23,290 --> 00:10:24,123 And that's it. 195 00:10:25,103 --> 00:10:28,793 And let's check the result and it still works the same. 196 00:10:30,290 --> 00:10:32,800 So let's recap what we did here. 197 00:10:32,800 --> 00:10:37,800 So again, we already know that if a is greater than b, 198 00:10:38,125 --> 00:10:39,920 then this will be a positive number 199 00:10:39,920 --> 00:10:42,880 and so here we then return that positive number. 200 00:10:42,880 --> 00:10:45,230 It doesn't have to be exactly one. 201 00:10:45,230 --> 00:10:47,720 Just something greater than zero. 202 00:10:47,720 --> 00:10:49,540 Now, if it's the other way around, 203 00:10:49,540 --> 00:10:53,574 if a is less than b, then this operation 204 00:10:53,574 --> 00:10:56,410 will always be a negative number. 205 00:10:56,410 --> 00:10:59,040 And so therefore, then something negative 206 00:10:59,040 --> 00:11:01,710 is returned just as -1. 207 00:11:01,710 --> 00:11:04,010 But again, it can be any number. 208 00:11:04,010 --> 00:11:07,440 And by the way, if we return zero here, 209 00:11:07,440 --> 00:11:10,020 so in case these two values are the same, 210 00:11:10,020 --> 00:11:13,260 then their position simply remains unchanged. 211 00:11:13,260 --> 00:11:14,093 All right? 212 00:11:16,300 --> 00:11:17,743 So let's do the same here. 213 00:11:21,540 --> 00:11:25,123 And so here it is the opposite, so b minus a. 214 00:11:26,710 --> 00:11:28,370 And as always, keep in mind 215 00:11:28,370 --> 00:11:31,570 that we are actually returning this value here. 216 00:11:31,570 --> 00:11:33,580 But we don't have to write the return 217 00:11:33,580 --> 00:11:36,290 because we're using an arrow function. 218 00:11:36,290 --> 00:11:38,983 So you see, it still works the same. 219 00:11:40,330 --> 00:11:42,880 All right, and this is basically most 220 00:11:42,880 --> 00:11:47,210 of what you need to know about sorting arrays with numbers. 221 00:11:47,210 --> 00:11:49,080 Now, if you have a mixed array, 222 00:11:49,080 --> 00:11:51,860 like with strings and numbers together, 223 00:11:51,860 --> 00:11:55,250 then this is not gonna work and I advise you 224 00:11:55,250 --> 00:11:57,950 to simply not to use the sort method 225 00:11:57,950 --> 00:12:00,400 in these cases anyway. 226 00:12:00,400 --> 00:12:03,260 And that's because there's not really a point 227 00:12:03,260 --> 00:12:04,890 in doing so. 228 00:12:04,890 --> 00:12:08,470 But anyway, now that you know how the sort method works, 229 00:12:08,470 --> 00:12:10,450 let's go back to our application 230 00:12:10,450 --> 00:12:12,300 and implement it there. 231 00:12:12,300 --> 00:12:15,223 So let's first see in the demo version what I mean. 232 00:12:18,410 --> 00:12:21,340 So down here we have this Sort button. 233 00:12:21,340 --> 00:12:25,780 And so this sort will basically sort these movements. 234 00:12:25,780 --> 00:12:27,230 So as we click the button, 235 00:12:27,230 --> 00:12:30,690 it will sort them in this descending order, 236 00:12:30,690 --> 00:12:33,200 which actually is an ascending order 237 00:12:33,200 --> 00:12:35,080 because remember, we are starting 238 00:12:35,080 --> 00:12:39,560 to display these movements here from the bottom up. 239 00:12:39,560 --> 00:12:40,640 Okay? 240 00:12:40,640 --> 00:12:43,930 Then as we click it again, it goes back to normal. 241 00:12:43,930 --> 00:12:45,253 So as we keep clicking, 242 00:12:46,090 --> 00:12:48,423 it orders and goes back to normal. 243 00:12:49,500 --> 00:12:51,743 And so let's implement that now. 244 00:12:53,980 --> 00:12:56,203 So we can give us some more space here. 245 00:12:58,310 --> 00:13:02,180 And now we will actually implement the sorting functionality 246 00:13:02,180 --> 00:13:05,823 right in the function that displays the movements. 247 00:13:08,620 --> 00:13:09,530 Okay? 248 00:13:09,530 --> 00:13:12,490 So let's first implement the sorting itself 249 00:13:12,490 --> 00:13:15,630 and then after that, we will implement the clicking 250 00:13:15,630 --> 00:13:17,060 on the button. 251 00:13:17,060 --> 00:13:19,140 So that's right here. 252 00:13:19,140 --> 00:13:20,930 So displayMovements. 253 00:13:20,930 --> 00:13:22,310 All right? 254 00:13:22,310 --> 00:13:23,860 Now, what we're gonna do here 255 00:13:23,860 --> 00:13:26,530 is to add a second parameter, 256 00:13:26,530 --> 00:13:29,500 which is the sort parameter and by default, 257 00:13:29,500 --> 00:13:31,533 we will set it to false. 258 00:13:33,120 --> 00:13:36,270 And now depending on this parameter, 259 00:13:36,270 --> 00:13:38,130 whether it is true or false, 260 00:13:38,130 --> 00:13:41,370 we will then order our movements or not. 261 00:13:41,370 --> 00:13:43,970 So sort the movements or not. 262 00:13:43,970 --> 00:13:47,930 And of course, it is false by default 263 00:13:47,930 --> 00:13:49,960 because well, by default, 264 00:13:49,960 --> 00:13:52,630 we do want to show the movements 265 00:13:52,630 --> 00:13:55,580 just in the order they appear in the array 266 00:13:55,580 --> 00:13:57,930 but then as we click that Sort button, 267 00:13:57,930 --> 00:14:00,650 we will then call this function displayMovements 268 00:14:00,650 --> 00:14:02,593 with sort set to true. 269 00:14:05,360 --> 00:14:09,823 So let's now create a new variable called movements here. 270 00:14:11,570 --> 00:14:15,300 And this variable here, we will define it conditionally. 271 00:14:15,300 --> 00:14:17,800 And actually, we cannot call it movements 272 00:14:17,800 --> 00:14:19,767 because that's already the name here 273 00:14:19,767 --> 00:14:23,490 of the parameters, right? 274 00:14:23,490 --> 00:14:26,810 So let's just call it movs, all right? 275 00:14:26,810 --> 00:14:29,820 And again, we will define it conditionally. 276 00:14:29,820 --> 00:14:31,363 So we say if sort, 277 00:14:32,210 --> 00:14:34,690 and so that's if sort is true, 278 00:14:34,690 --> 00:14:37,420 then we actually want to sort the movements. 279 00:14:37,420 --> 00:14:40,143 So the movements array that we get here as an input. 280 00:14:41,530 --> 00:14:42,530 So movements 281 00:14:44,410 --> 00:14:47,160 but now we cannot do this. 282 00:14:47,160 --> 00:14:50,830 And that's because, keep in mind that the sort method 283 00:14:50,830 --> 00:14:54,240 will then order the actual underlying array. 284 00:14:54,240 --> 00:14:56,630 So the actual movements array as it is 285 00:14:56,630 --> 00:14:58,670 in the account object. 286 00:14:58,670 --> 00:15:01,160 But that's not what we want at all. 287 00:15:01,160 --> 00:15:04,850 All we want is to display a sorted movements array 288 00:15:04,850 --> 00:15:09,310 but we do not want to sort the original underlying data. 289 00:15:09,310 --> 00:15:11,590 So what do we do here? 290 00:15:11,590 --> 00:15:15,400 Well, we simply take a copy of the movements array 291 00:15:15,400 --> 00:15:16,980 and sort that. 292 00:15:16,980 --> 00:15:19,540 And so that's what we use now slice for 293 00:15:20,380 --> 00:15:22,120 and this is one of these situations 294 00:15:22,120 --> 00:15:24,180 that I was telling you about earlier 295 00:15:24,180 --> 00:15:26,840 where we need to actually create a copy, 296 00:15:26,840 --> 00:15:28,590 using the slice method 297 00:15:28,590 --> 00:15:30,640 and not the spread operator 298 00:15:30,640 --> 00:15:33,300 because here we are in the middle of a chain. 299 00:15:33,300 --> 00:15:35,950 And so we want to keep going after this 300 00:15:35,950 --> 00:15:37,430 and so it's a lot better 301 00:15:37,430 --> 00:15:39,270 to simply use the method here 302 00:15:39,270 --> 00:15:43,880 so that we can then simply chain the sort method onto that. 303 00:15:43,880 --> 00:15:47,183 And now all we need here is our compare function. 304 00:15:51,190 --> 00:15:54,260 And now remember how in the user interface, 305 00:15:54,260 --> 00:15:55,601 so in our application, 306 00:15:55,601 --> 00:15:59,760 how the movements appeared in a descending order. 307 00:15:59,760 --> 00:16:03,340 However, that is because we start to display the values 308 00:16:03,340 --> 00:16:05,000 from the bottom up 309 00:16:05,000 --> 00:16:08,210 and so actually, we want to now sort this array 310 00:16:08,210 --> 00:16:10,040 in an ascending order. 311 00:16:10,040 --> 00:16:14,433 And to do that, remember, we do a minus b. 312 00:16:15,330 --> 00:16:18,463 So I explained before why it works this way. 313 00:16:19,400 --> 00:16:22,560 Okay, but now if sort is false, 314 00:16:22,560 --> 00:16:24,113 so that's the default value, 315 00:16:24,113 --> 00:16:27,863 then movs should simply become movements. 316 00:16:30,200 --> 00:16:31,410 Right? 317 00:16:31,410 --> 00:16:33,160 Let's get rid of this comment here. 318 00:16:34,220 --> 00:16:35,380 Give it a save 319 00:16:35,380 --> 00:16:39,023 and now here, of course, we then need to use that movs 320 00:16:39,023 --> 00:16:40,393 that we just created. 321 00:16:42,130 --> 00:16:44,890 And with this, we have essentially adapted 322 00:16:44,890 --> 00:16:49,780 our displayMovements function to support sorting. 323 00:16:49,780 --> 00:16:53,770 And again, we did that by allowing a second parameter, 324 00:16:53,770 --> 00:16:56,710 which is an optional parameter called sort 325 00:16:56,710 --> 00:16:59,430 and then if sort is set to true, 326 00:16:59,430 --> 00:17:01,760 then the movements that we're gonna use 327 00:17:01,760 --> 00:17:05,950 to display them will be sorted like this 328 00:17:05,950 --> 00:17:07,509 and if it's set to false, 329 00:17:07,509 --> 00:17:11,520 then simply the regular movements as they are passed in 330 00:17:11,520 --> 00:17:13,100 will be displayed. 331 00:17:13,100 --> 00:17:14,410 And now all we need to do 332 00:17:14,410 --> 00:17:16,260 is to call this function here 333 00:17:16,260 --> 00:17:18,680 with sort set to true 334 00:17:18,680 --> 00:17:21,263 whenever the user clicks that sort button. 335 00:17:22,910 --> 00:17:25,377 So that button is called btnSort 336 00:17:26,700 --> 00:17:31,700 and so let's now create our final event listener 337 00:17:33,030 --> 00:17:35,150 or event handler here. 338 00:17:35,150 --> 00:17:37,070 So btnSort.addEventListener 339 00:17:44,720 --> 00:17:47,853 and as always, we start by preventing the default. 340 00:17:48,900 --> 00:17:51,410 So you can get used to this. 341 00:17:51,410 --> 00:17:54,130 And then here, we want to call print 342 00:17:56,960 --> 00:18:00,017 and then here we want to call displayMovements 343 00:18:03,190 --> 00:18:08,190 and of course, with currentAccount.movements as always 344 00:18:08,540 --> 00:18:13,240 and then the second parameter we will set to true. 345 00:18:13,240 --> 00:18:15,350 So that's the sort parameter. 346 00:18:15,350 --> 00:18:17,160 And if we ever are in doubt, 347 00:18:17,160 --> 00:18:20,810 then again in VS Code, it nicely shows us 348 00:18:20,810 --> 00:18:22,890 what we can pass in to the function. 349 00:18:22,890 --> 00:18:25,133 So movements and sort. 350 00:18:26,650 --> 00:18:30,720 Now, this is not yet the 100% working solution 351 00:18:30,720 --> 00:18:31,920 and let me show you why. 352 00:18:32,880 --> 00:18:35,653 So as I log in, 353 00:18:38,280 --> 00:18:41,083 let me almost remove this here, 354 00:18:43,150 --> 00:18:47,050 so let's click now the Sort button and beautiful. 355 00:18:47,050 --> 00:18:47,993 That worked. 356 00:18:49,190 --> 00:18:53,040 So the movements are now indeed sorted 357 00:18:53,040 --> 00:18:54,900 but now, if I click the button again, 358 00:18:54,900 --> 00:18:57,003 it will not go back to normal. 359 00:18:58,220 --> 00:18:59,100 Right? 360 00:18:59,100 --> 00:19:00,680 And how could it? 361 00:19:00,680 --> 00:19:03,230 We never told it to do so. 362 00:19:03,230 --> 00:19:06,540 So let's find a way of solving this. 363 00:19:06,540 --> 00:19:09,920 And we will solve this by using a state variable, 364 00:19:09,920 --> 00:19:12,750 which will monitor if we are currently sorting 365 00:19:12,750 --> 00:19:14,870 the array or not. 366 00:19:14,870 --> 00:19:16,280 Okay? 367 00:19:16,280 --> 00:19:19,550 So that variable needs to live outside 368 00:19:19,550 --> 00:19:21,090 of this callback function 369 00:19:21,090 --> 00:19:23,274 so that its value can be preserved 370 00:19:23,274 --> 00:19:27,030 after clicking this button here, right? 371 00:19:27,030 --> 00:19:29,610 Because as you know, this function here 372 00:19:29,610 --> 00:19:33,023 is executed each time that we click the Sort button. 373 00:19:34,400 --> 00:19:38,580 And so if we defined a variable here in this function, 374 00:19:38,580 --> 00:19:42,090 then it would be created newly each time 375 00:19:42,090 --> 00:19:43,770 that we click that button. 376 00:19:43,770 --> 00:19:47,010 And so we want to preserve that sorted state 377 00:19:48,920 --> 00:19:51,370 throughout all the clicks. 378 00:19:51,370 --> 00:19:55,763 So we start with this state variable set to false. 379 00:19:56,810 --> 00:19:58,560 And so that's because in the beginning, 380 00:19:58,560 --> 00:20:01,350 our array is not sorted. 381 00:20:01,350 --> 00:20:04,000 So sorted is false. 382 00:20:04,000 --> 00:20:05,750 And so if it is false, 383 00:20:05,750 --> 00:20:08,350 then here this should be true. 384 00:20:08,350 --> 00:20:11,320 So we then want to actually sort the array. 385 00:20:11,320 --> 00:20:16,320 So basically, here we want the opposite of sorted, right? 386 00:20:16,500 --> 00:20:20,060 And so that's where our not operator comes 387 00:20:20,060 --> 00:20:23,490 in handy, all right? 388 00:20:23,490 --> 00:20:25,880 So we're doing the opposite of sorted. 389 00:20:25,880 --> 00:20:27,800 When sorted is false, 390 00:20:27,800 --> 00:20:30,040 then we want to sort it. 391 00:20:30,040 --> 00:20:31,600 So we need true here. 392 00:20:31,600 --> 00:20:33,480 But if it is already sorted, 393 00:20:33,480 --> 00:20:35,290 then we again want the opposite 394 00:20:35,290 --> 00:20:38,053 and so then sort should be back to false. 395 00:20:39,920 --> 00:20:41,370 Now, the only thing that's missing 396 00:20:41,370 --> 00:20:44,950 is to actually flip this variable, okay? 397 00:20:44,950 --> 00:20:45,783 And so for that, 398 00:20:45,783 --> 00:20:50,730 we do sorted equal the opposite of sorted once again. 399 00:20:52,370 --> 00:20:55,610 And so this is what then allows everything here to work. 400 00:20:55,610 --> 00:20:58,030 Otherwise even as we would click, 401 00:20:58,030 --> 00:21:00,930 this sorted variable would then never change. 402 00:21:00,930 --> 00:21:03,610 And so with this, each time that we click, 403 00:21:03,610 --> 00:21:05,700 we change sorted from true to false, 404 00:21:05,700 --> 00:21:08,623 then from false to true and so on and so forth. 405 00:21:10,570 --> 00:21:12,263 So let's try it now finally. 406 00:21:18,380 --> 00:21:19,213 And 407 00:21:20,380 --> 00:21:21,950 yes, 408 00:21:21,950 --> 00:21:24,524 great, that works beautifully 409 00:21:24,524 --> 00:21:28,080 and so our job here is done. 410 00:21:28,080 --> 00:21:29,780 And in fact, this application 411 00:21:29,780 --> 00:21:33,640 is now complete, at least for this section. 412 00:21:33,640 --> 00:21:38,150 So great job, congratulations for reaching this point, 413 00:21:38,150 --> 00:21:40,410 for finishing this application. 414 00:21:40,410 --> 00:21:42,860 This is really an amazing achievement 415 00:21:42,860 --> 00:21:47,280 and you can pat yourself on the back for making it this far. 416 00:21:47,280 --> 00:21:50,584 Now, there's still one or two array methods to learn 417 00:21:50,584 --> 00:21:53,283 and so let's do that in the next video.