WEBVTT 1 00:00:01.290 --> 00:00:02.123 All right. 2 00:00:02.123 --> 00:00:05.260 So let's now take a look at some bad code 3 00:00:05.260 --> 00:00:09.270 that doesn't follow any of the principles or guidelines 4 00:00:09.270 --> 00:00:11.520 that I showed you in the previous lecture, 5 00:00:11.520 --> 00:00:14.683 and actually start fixing it in this video. 6 00:00:16.330 --> 00:00:18.290 And the code that we're gonna fix 7 00:00:18.290 --> 00:00:21.110 is also here in your starter files 8 00:00:21.110 --> 00:00:24.390 and it is called clean.js. 9 00:00:24.390 --> 00:00:25.223 All right. 10 00:00:26.100 --> 00:00:29.330 Now let's open up our console back here 11 00:00:29.330 --> 00:00:32.893 because it is still running Parcel from before. 12 00:00:32.893 --> 00:00:35.870 And so, let's stop that now. 13 00:00:35.870 --> 00:00:38.550 So with Control + C. 14 00:00:38.550 --> 00:00:43.550 And then let's also come to our index.html file. 15 00:00:44.080 --> 00:00:46.450 And then here let's copy this 16 00:00:46.450 --> 00:00:51.253 because now we no longer want to include script.js. 17 00:00:52.250 --> 00:00:53.850 So I will comment it out, 18 00:00:53.850 --> 00:00:58.850 but instead we want clean.js that we will work on now. 19 00:01:00.060 --> 00:01:01.910 So give it a save. 20 00:01:01.910 --> 00:01:04.810 And now we will also run this code 21 00:01:04.810 --> 00:01:08.300 again with live server and no longer with Parcel 22 00:01:08.300 --> 00:01:10.470 because now there is nothing to bundle, 23 00:01:10.470 --> 00:01:13.750 all we want to do is to take a look at our code 24 00:01:13.750 --> 00:01:14.883 in a very simple way. 25 00:01:15.910 --> 00:01:17.163 So live server. 26 00:01:18.030 --> 00:01:20.290 And let me grab that tab 27 00:01:20.290 --> 00:01:23.550 from another browser that I have opened, 28 00:01:23.550 --> 00:01:24.623 and here we go. 29 00:01:26.310 --> 00:01:30.100 So, you see indeed that the URL is different here 30 00:01:30.100 --> 00:01:34.270 because the default URL of live server is 8080. 31 00:01:34.270 --> 00:01:36.000 So as you see here, 32 00:01:36.000 --> 00:01:40.120 and of Parcel it is on port 1234. 33 00:01:40.120 --> 00:01:41.113 So it's different. 34 00:01:41.990 --> 00:01:44.520 So we are not interested in this one anymore 35 00:01:44.520 --> 00:01:46.593 but instead in 8080. 36 00:01:47.720 --> 00:01:52.720 So we can close this, this one as well, and all sidebar too. 37 00:01:53.720 --> 00:01:57.180 So let's reload this here so we can see our results. 38 00:01:57.180 --> 00:01:59.723 Make it a bit bigger as well. 39 00:02:01.440 --> 00:02:02.800 And, okay. 40 00:02:02.800 --> 00:02:06.760 Let's start by analyzing here or clean code, 41 00:02:06.760 --> 00:02:09.000 or actually the not so clean code 42 00:02:09.000 --> 00:02:13.000 that we wanted to start fixing in this lecture. 43 00:02:13.000 --> 00:02:15.220 So this code is basically 44 00:02:15.220 --> 00:02:19.920 about a very, very simple budget application, let's say. 45 00:02:19.920 --> 00:02:23.430 And so here we have an object which is called budget 46 00:02:23.430 --> 00:02:25.940 which contains a couple of object. 47 00:02:25.940 --> 00:02:29.690 So each of them is basically an entry in the budget. 48 00:02:29.690 --> 00:02:32.180 So each one has a value, a description, 49 00:02:32.180 --> 00:02:36.453 and a user of the person who created the entry. 50 00:02:37.370 --> 00:02:39.600 So this one is jonas, this one as well. 51 00:02:39.600 --> 00:02:42.120 And you see that here we have a negative value 52 00:02:42.120 --> 00:02:44.130 which is basically an expense. 53 00:02:44.130 --> 00:02:46.100 So for groceries, for example, 54 00:02:46.100 --> 00:02:48.910 and here the positive one is for income 55 00:02:48.910 --> 00:02:53.910 like selling an old TV or monthly salary or freelancing. 56 00:02:55.020 --> 00:02:58.420 So we have jonas and the other user that we have here 57 00:02:58.420 --> 00:03:00.270 is matilda. 58 00:03:00.270 --> 00:03:03.450 Then down here we have a very simple object 59 00:03:03.450 --> 00:03:05.810 which is basically spending limits. 60 00:03:05.810 --> 00:03:10.350 So jonas can only spend 1500 euros, or dollars, 61 00:03:10.350 --> 00:03:11.860 or whatever it is. 62 00:03:11.860 --> 00:03:14.800 And matilda can only spend 100. 63 00:03:14.800 --> 00:03:19.750 Then we have a function to add a new entry to the budget, 64 00:03:19.750 --> 00:03:23.080 or actually this one is only for expenses. 65 00:03:23.080 --> 00:03:27.160 And so, here we start seeing one of the bad practices 66 00:03:27.160 --> 00:03:30.880 which is that this function name is not good at all. 67 00:03:30.880 --> 00:03:34.950 So it's not really descriptive of what's happening here. 68 00:03:34.950 --> 00:03:39.000 And so, let's actually start by fixing that right away. 69 00:03:39.000 --> 00:03:41.333 So this one should be called, addExpense. 70 00:03:43.569 --> 00:03:46.540 So you see I'm changing it here and here. 71 00:03:46.540 --> 00:03:50.313 And I selected all of them by hitting Command + D. 72 00:03:51.480 --> 00:03:54.323 So add next occurrence. 73 00:03:56.950 --> 00:03:58.510 So that's the first fix, 74 00:03:58.510 --> 00:04:01.610 but of course there are gonna be some more, 75 00:04:01.610 --> 00:04:05.640 but let's keep going through our code here very quickly. 76 00:04:05.640 --> 00:04:08.490 And so, next up we have a check function 77 00:04:08.490 --> 00:04:10.870 which will basically check the budget 78 00:04:10.870 --> 00:04:15.870 and see if any of the expenses are actually above the limit 79 00:04:16.490 --> 00:04:18.320 that we defined here. 80 00:04:18.320 --> 00:04:20.730 And if a certain expense is, 81 00:04:20.730 --> 00:04:24.840 then it will flag that by adding a limit string 82 00:04:24.840 --> 00:04:29.163 to a new flag property on the budget entry. 83 00:04:31.730 --> 00:04:35.210 So this addExpense here actually checks 84 00:04:35.210 --> 00:04:38.550 if the new expense is below the limit, 85 00:04:38.550 --> 00:04:40.890 so that happens right here. 86 00:04:40.890 --> 00:04:43.200 But there might already be an expense 87 00:04:44.840 --> 00:04:47.410 that is below the limit, 88 00:04:47.410 --> 00:04:51.200 or actually over the limit which is like this one here. 89 00:04:51.200 --> 00:04:55.520 So 1800, if we don't consider the minors. 90 00:04:55.520 --> 00:05:00.520 So I spent 1800 here and that of course is more than 1500. 91 00:05:00.700 --> 00:05:03.853 And so, this one would be marked as a limit. 92 00:05:06.050 --> 00:05:10.490 But again, we will see this in detail once we fixed the code 93 00:05:10.490 --> 00:05:11.860 in each of them. 94 00:05:11.860 --> 00:05:15.200 Then finally, we also have one function 95 00:05:15.200 --> 00:05:18.650 which will log all the big expenses. 96 00:05:18.650 --> 00:05:20.420 So we can pass in the limit 97 00:05:20.420 --> 00:05:23.230 and then it will go through all the expenses 98 00:05:23.230 --> 00:05:27.270 and to log the big ones in a certain way. 99 00:05:27.270 --> 00:05:29.553 And let's actually call that function here. 100 00:05:33.088 --> 00:05:35.610 And let's say a thousand. 101 00:05:35.610 --> 00:05:40.070 And so, it then prints only the emoji of all the expense 102 00:05:41.020 --> 00:05:44.113 that were more expensive than 1000. 103 00:05:45.950 --> 00:05:46.910 All right. 104 00:05:46.910 --> 00:05:50.310 And so, let's now fix all of this 105 00:05:50.310 --> 00:05:53.840 and starting with the var keyword here. 106 00:05:53.840 --> 00:05:55.730 So as we learned in the last lecture 107 00:05:55.730 --> 00:06:00.520 we should always use const or let instead of var. 108 00:06:00.520 --> 00:06:02.040 So I will select all of them 109 00:06:02.040 --> 00:06:04.623 by clicking or hitting Command + D, 110 00:06:07.660 --> 00:06:09.920 and change them to const 111 00:06:09.920 --> 00:06:12.810 even though there is one that should not be a const 112 00:06:12.810 --> 00:06:13.983 which is this one here. 113 00:06:14.960 --> 00:06:19.300 So when we don't need a const then we should use let. 114 00:06:19.300 --> 00:06:22.623 And we will see why that is here in a minute. 115 00:06:24.480 --> 00:06:25.313 All right. 116 00:06:25.313 --> 00:06:26.990 So that was the first fix. 117 00:06:26.990 --> 00:06:28.230 Then this one here, 118 00:06:28.230 --> 00:06:31.450 the name limits isn't the really meaningful, 119 00:06:31.450 --> 00:06:33.673 so let's call it spendingLimits. 120 00:06:35.250 --> 00:06:39.613 So again, selecting it everywhere and then spendingLimits. 121 00:06:41.810 --> 00:06:44.080 And so this makes the code more readable 122 00:06:44.080 --> 00:06:45.760 and more understandable, 123 00:06:45.760 --> 00:06:48.203 especially if we look at it in the future. 124 00:06:50.610 --> 00:06:53.073 Now we have some problem in line 39. 125 00:06:55.300 --> 00:06:58.700 So it's the same problem as before. 126 00:06:58.700 --> 00:07:00.383 It should also be a let. 127 00:07:01.310 --> 00:07:03.083 And then line 59. 128 00:07:06.220 --> 00:07:07.743 Here it should also be a let. 129 00:07:09.859 --> 00:07:11.853 Now everything works as before. 130 00:07:13.040 --> 00:07:15.500 Here we already changed the function name 131 00:07:15.500 --> 00:07:18.263 to add expense as a before, 132 00:07:19.300 --> 00:07:20.900 then here we have this parameter names 133 00:07:20.900 --> 00:07:23.470 which actually makes sense. 134 00:07:23.470 --> 00:07:24.770 So these are fine. 135 00:07:24.770 --> 00:07:27.233 No need to change anything here. 136 00:07:28.250 --> 00:07:31.360 Then next up we have this check. 137 00:07:31.360 --> 00:07:33.300 So what happens here? 138 00:07:33.300 --> 00:07:37.240 So if there is no user then set the user to jonas. 139 00:07:37.240 --> 00:07:39.633 Now what does this actually mean? 140 00:07:40.540 --> 00:07:44.883 Well, essentially this is like setting a default parameter. 141 00:07:46.240 --> 00:07:50.850 So again, if the user is not set, as we're checking here, 142 00:07:50.850 --> 00:07:53.410 then it should be set to jonas. 143 00:07:53.410 --> 00:07:57.283 And let's confirm that that actually happens here. 144 00:07:58.560 --> 00:08:01.410 And so indeed here when pizza is added 145 00:08:01.410 --> 00:08:05.180 without the third argument which is user, 146 00:08:05.180 --> 00:08:08.540 then it is automatically set to jonas. 147 00:08:08.540 --> 00:08:11.190 But, again as we learned in the last lecture, 148 00:08:11.190 --> 00:08:12.190 whenever possible 149 00:08:12.190 --> 00:08:15.170 we should use the native language features. 150 00:08:15.170 --> 00:08:18.293 So in this case, the default parameters. 151 00:08:21.860 --> 00:08:23.733 So that's as simple as this. 152 00:08:24.610 --> 00:08:29.610 And if we now check it again, then yeah, it is still jonas. 153 00:08:30.010 --> 00:08:31.270 Nice. 154 00:08:31.270 --> 00:08:32.490 Okay. 155 00:08:32.490 --> 00:08:37.490 Next up, let's fix this ugly nested code here. 156 00:08:37.660 --> 00:08:39.900 So this code looks like it was written 157 00:08:39.900 --> 00:08:41.540 by a complete beginner, 158 00:08:41.540 --> 00:08:44.073 and (chuckles) so we want to avoid that. 159 00:08:45.480 --> 00:08:47.430 So instead of using this nested code 160 00:08:47.430 --> 00:08:50.200 and this huge if else statement 161 00:08:50.200 --> 00:08:52.110 with all of these blocks here, 162 00:08:52.110 --> 00:08:57.083 let's instead use a nice and declarative turnery operator. 163 00:08:58.490 --> 00:09:01.270 So let's actually call it limit 164 00:09:01.270 --> 00:09:05.340 because lim again is not really a nice variable name. 165 00:09:05.340 --> 00:09:06.793 It's not really descriptive. 166 00:09:08.740 --> 00:09:09.680 So, to do this, 167 00:09:09.680 --> 00:09:12.693 let's first analyze what actually happens here. 168 00:09:13.720 --> 00:09:16.820 So the function of course receives a user, 169 00:09:16.820 --> 00:09:20.010 and then here we check if there is actually a property 170 00:09:20.010 --> 00:09:23.320 with the name of user in spendingLimits. 171 00:09:23.320 --> 00:09:27.740 So for example, what the default argument here jonas, 172 00:09:27.740 --> 00:09:32.340 then, of course, there is spendingLimits.jonas. 173 00:09:32.340 --> 00:09:33.860 And so, then in this case 174 00:09:33.860 --> 00:09:36.650 the limit will be set to that value. 175 00:09:36.650 --> 00:09:39.600 So 1500. 176 00:09:39.600 --> 00:09:42.530 And otherwise, if that name does not exist 177 00:09:42.530 --> 00:09:44.290 then the limit will be zero. 178 00:09:44.290 --> 00:09:47.870 And so therefore then here in this check 179 00:09:47.870 --> 00:09:49.633 the expense will not be added. 180 00:09:50.890 --> 00:09:54.730 So if the value is less than the limit 181 00:09:54.730 --> 00:09:56.660 then the expense will not be added. 182 00:09:56.660 --> 00:09:59.890 And so therefore we are setting the limit to zero. 183 00:09:59.890 --> 00:10:02.700 If the name does not exist. 184 00:10:02.700 --> 00:10:05.360 So, if someone else like Jay here 185 00:10:05.360 --> 00:10:07.720 is trying to add a new expense 186 00:10:07.720 --> 00:10:10.630 then the limit of Jay will be zero. 187 00:10:10.630 --> 00:10:14.623 And so therefore he will not be able to add any expense. 188 00:10:17.460 --> 00:10:20.773 So, basically here we can do just what we do here. 189 00:10:25.020 --> 00:10:27.970 So we can basically just do what we do here. 190 00:10:27.970 --> 00:10:29.916 So check if this exists, 191 00:10:29.916 --> 00:10:32.980 and if it does then we return it, 192 00:10:32.980 --> 00:10:35.933 and otherwise, we just return zero. 193 00:10:36.900 --> 00:10:38.523 So we can not delete this. 194 00:10:40.780 --> 00:10:45.780 And of course, you finally, we can change it to a limit. 195 00:10:47.260 --> 00:10:49.500 And yeah. 196 00:10:49.500 --> 00:10:51.300 So our code here still works the same. 197 00:10:51.300 --> 00:10:56.300 We still get pizza added and going to movies for matilda 198 00:10:56.330 --> 00:10:58.900 which has a value of -100, 199 00:10:58.900 --> 00:11:01.173 and a bit more about that in a second. 200 00:11:02.090 --> 00:11:05.750 Now, if we try to add value for matilda 201 00:11:05.750 --> 00:11:10.093 which is greater than 100, let's say 110, 202 00:11:11.100 --> 00:11:14.760 then you immediately see that it was not added. 203 00:11:14.760 --> 00:11:17.643 So now with the last one that we have here is pizza. 204 00:11:20.660 --> 00:11:22.560 And the same here for Jay. 205 00:11:22.560 --> 00:11:25.130 So again, Jay is not in the spendingLimits, 206 00:11:25.130 --> 00:11:28.110 therefore, his limit is zero. 207 00:11:28.110 --> 00:11:32.093 And then, it means that his expense it's not gonna be added. 208 00:11:35.950 --> 00:11:38.350 Now this one here works just fine 209 00:11:38.350 --> 00:11:42.150 but we could make it even more clever if we want it. 210 00:11:42.150 --> 00:11:45.740 So let me show you another way of doing the same thing. 211 00:11:45.740 --> 00:11:47.370 And I said in the last lecture 212 00:11:47.370 --> 00:11:50.440 that we shouldn't write too clever code 213 00:11:50.440 --> 00:11:52.913 at least if we then cannot understand it. 214 00:11:53.840 --> 00:11:57.900 But the one I'm gonna show you here is actually not too bad. 215 00:11:57.900 --> 00:12:01.590 So, what we're gonna do here is to use optional chaining. 216 00:12:01.590 --> 00:12:05.830 So optional chaining remember works like this 217 00:12:05.830 --> 00:12:09.120 but we can even use it with record notations. 218 00:12:09.120 --> 00:12:13.730 So here we can then ask for the user property again. 219 00:12:13.730 --> 00:12:15.900 And so, as we learned before, 220 00:12:15.900 --> 00:12:19.410 if there is a property with this name, 221 00:12:19.410 --> 00:12:21.070 for example jonas here, 222 00:12:21.070 --> 00:12:24.870 then all of this here will be that value, 223 00:12:24.870 --> 00:12:27.400 but if not, then it will be undefined. 224 00:12:27.400 --> 00:12:30.960 And so in that case, we then want to set it to zero. 225 00:12:30.960 --> 00:12:34.670 And for that, we can use the knowledge coalescing operator 226 00:12:34.670 --> 00:12:37.470 which was introduced in ES2020 227 00:12:37.470 --> 00:12:40.350 as the same time as this one here. 228 00:12:40.350 --> 00:12:42.110 So S optional chaining. 229 00:12:42.110 --> 00:12:45.570 And these are actually huge additions to the language. 230 00:12:45.570 --> 00:12:47.120 They're used all the time, 231 00:12:47.120 --> 00:12:49.460 and so it's a good idea that you get used 232 00:12:49.460 --> 00:12:51.093 to writing code like this. 233 00:12:54.050 --> 00:12:55.130 So let's see. 234 00:12:55.130 --> 00:12:59.010 And or result should be exactly the same, 235 00:12:59.010 --> 00:13:00.513 and indeed it is. 236 00:13:01.940 --> 00:13:02.773 Great. 237 00:13:02.773 --> 00:13:05.153 So I think that this one year is even better. 238 00:13:07.060 --> 00:13:12.060 So, in case that the value is indeed below the limit 239 00:13:12.080 --> 00:13:15.710 then a new object is created like this, 240 00:13:15.710 --> 00:13:19.060 and will then be pushed to this budget array. 241 00:13:19.060 --> 00:13:19.973 That makes sense. 242 00:13:21.710 --> 00:13:26.450 Now the value here will then be the value but negative. 243 00:13:26.450 --> 00:13:30.170 So you see here that all our expenses are negative values 244 00:13:30.170 --> 00:13:34.110 and the incomes are positive. 245 00:13:34.110 --> 00:13:35.890 And since we're adding an expense 246 00:13:35.890 --> 00:13:37.573 it should indeed be negative. 247 00:13:38.730 --> 00:13:41.900 Now here we can actually improve our code a little bit 248 00:13:41.900 --> 00:13:44.570 because we have description equal description, 249 00:13:44.570 --> 00:13:48.003 and user equal user, but that's not necessary. 250 00:13:49.130 --> 00:13:52.950 Because with the enhanced object literal syntax 251 00:13:52.950 --> 00:13:54.853 we don't need to repeat that. 252 00:13:56.040 --> 00:14:00.170 So if the property name is the same as the variable name, 253 00:14:00.170 --> 00:14:01.850 we can simply do this, 254 00:14:01.850 --> 00:14:05.750 and our result will still be the same. 255 00:14:05.750 --> 00:14:07.110 Great. 256 00:14:07.110 --> 00:14:11.390 So with this all code already looks a lot more professional 257 00:14:11.390 --> 00:14:12.840 than it did in the beginning. 258 00:14:15.830 --> 00:14:18.430 But anyway, let's move on here to the next one. 259 00:14:18.430 --> 00:14:22.330 And so, as I said in the beginning, 260 00:14:22.330 --> 00:14:25.730 what this function here does is to check all of the expenses 261 00:14:25.730 --> 00:14:30.030 and see if none of them exceeds the spending limit. 262 00:14:30.030 --> 00:14:33.330 So, the name here is, again, not ideal, 263 00:14:33.330 --> 00:14:35.790 so let's actually call it checkExpenses. 264 00:14:38.150 --> 00:14:40.980 And so, what this function does 265 00:14:40.980 --> 00:14:45.980 is it loops over all of the entries of the budget like this, 266 00:14:46.010 --> 00:14:49.520 and here it's simply called like el for element. 267 00:14:49.520 --> 00:14:52.223 So let's change that to entry. 268 00:14:54.314 --> 00:14:56.220 Entry. 269 00:14:56.220 --> 00:14:57.830 So a budget entry. 270 00:14:57.830 --> 00:14:59.900 That makes a bit more sense. 271 00:14:59.900 --> 00:15:03.660 And then here, again, we get that spending limit 272 00:15:04.510 --> 00:15:07.710 from the spendingLimits object. 273 00:15:07.710 --> 00:15:11.310 Now here, of course, we don't have any user passed in 274 00:15:11.310 --> 00:15:13.210 but the username is simply gotten 275 00:15:13.210 --> 00:15:16.123 from each of the current budget entries. 276 00:15:17.770 --> 00:15:21.000 And if any of this is a bit confusing to you 277 00:15:21.000 --> 00:15:22.810 then please just pause the video 278 00:15:22.810 --> 00:15:25.890 and analyze the code a bit better for yourself. 279 00:15:25.890 --> 00:15:28.230 So that's not really the point of this video. 280 00:15:28.230 --> 00:15:31.700 The point of this one is more to fix the code. 281 00:15:31.700 --> 00:15:35.543 So to make it more clean and especially more modern. 282 00:15:36.920 --> 00:15:41.010 So, you see that this code that we have here is very similar 283 00:15:41.010 --> 00:15:42.533 to the one that we had before. 284 00:15:43.510 --> 00:15:45.030 So here in this function. 285 00:15:45.030 --> 00:15:49.833 So let's just copied this and put that here. 286 00:15:50.970 --> 00:15:55.453 And then, here it is, entry.user. 287 00:15:57.670 --> 00:15:59.030 And yeah. 288 00:15:59.030 --> 00:16:01.593 Then we can get rid of all of this. 289 00:16:03.530 --> 00:16:07.223 And here we need to go back to calling it to limit, 290 00:16:08.510 --> 00:16:10.173 and let's see what happens then. 291 00:16:11.760 --> 00:16:14.510 So here we have this bigger expense. 292 00:16:14.510 --> 00:16:16.683 So it's over the 1500 limit. 293 00:16:18.650 --> 00:16:22.690 And so, indeed, now we get a new property here, 294 00:16:22.690 --> 00:16:26.720 flag set to limit just as we have it here. 295 00:16:26.720 --> 00:16:28.623 There should be another one somewhere. 296 00:16:31.570 --> 00:16:33.570 Yeah, I think for, yeah, for matilda, 297 00:16:33.570 --> 00:16:35.470 because she has the limit of 100 298 00:16:35.470 --> 00:16:38.750 but these toys were 125. 299 00:16:38.750 --> 00:16:42.710 And so, this one also has the limit flag. 300 00:16:42.710 --> 00:16:45.700 So flag set to the string of limit. 301 00:16:45.700 --> 00:16:48.720 So that still works nice. 302 00:16:48.720 --> 00:16:51.040 We can just improve this a little bit more 303 00:16:51.040 --> 00:16:55.340 because this code is now essentially the same as this one. 304 00:16:55.340 --> 00:16:58.080 So remember the dry principle. 305 00:16:58.080 --> 00:17:00.340 So we should not repeat ourselves. 306 00:17:00.340 --> 00:17:03.210 And so, what I'm gonna do is to refactor this code 307 00:17:03.210 --> 00:17:05.253 into its own function, 308 00:17:06.150 --> 00:17:10.170 which I'm gonna call, get limit, 309 00:17:10.170 --> 00:17:11.800 And for these simple functions 310 00:17:11.800 --> 00:17:15.690 I like to use a simple arrow function. 311 00:17:15.690 --> 00:17:17.510 So it's gonna take a user, 312 00:17:17.510 --> 00:17:20.133 and here of course it's not the arrow yet. 313 00:17:21.410 --> 00:17:23.270 So it takes a user, 314 00:17:23.270 --> 00:17:26.383 and then it basically just returns this. 315 00:17:30.790 --> 00:17:32.810 And so here the limit is going to be 316 00:17:34.210 --> 00:17:37.343 get limit for the user. 317 00:17:39.370 --> 00:17:41.570 And then down here the same. 318 00:17:41.570 --> 00:17:43.520 And let's actually put that right here. 319 00:17:45.010 --> 00:17:46.083 So getLimit. 320 00:17:47.000 --> 00:17:50.713 And remember it here it is entry.user. 321 00:17:51.880 --> 00:17:54.020 Then we can get rid of this. 322 00:17:54.020 --> 00:17:55.320 And because now we can actually 323 00:17:55.320 --> 00:17:57.920 get rid of the block entirely 324 00:17:57.920 --> 00:18:00.480 because now the only thing that we have in the loop 325 00:18:00.480 --> 00:18:02.700 is just this one declaration. 326 00:18:02.700 --> 00:18:06.180 So we don't need these ugly braces anymore 327 00:18:06.180 --> 00:18:07.513 at the same actually here. 328 00:18:11.930 --> 00:18:13.050 All right. 329 00:18:13.050 --> 00:18:14.800 So that's a bit better. 330 00:18:14.800 --> 00:18:18.460 And in fact, we will keep improving this 331 00:18:18.460 --> 00:18:20.350 after the next lecture, 332 00:18:20.350 --> 00:18:23.150 when we will basically make this whole code here 333 00:18:23.150 --> 00:18:26.450 a little bit more functional and more declarative. 334 00:18:26.450 --> 00:18:27.283 But for now, 335 00:18:27.283 --> 00:18:30.993 this is already a lot better than what we had initially. 336 00:18:32.440 --> 00:18:35.070 And here actually we can do the same, 337 00:18:35.070 --> 00:18:37.203 take that put it here. 338 00:18:39.020 --> 00:18:42.500 And then, just like this. 339 00:18:42.500 --> 00:18:46.350 Let's just check again if everything is correct. 340 00:18:46.350 --> 00:18:50.053 And indeed it is still flagged with the limit. 341 00:18:52.210 --> 00:18:53.403 Okay, nice. 342 00:18:54.900 --> 00:18:57.403 We can get rid of this one here. 343 00:18:59.010 --> 00:19:02.003 Let's actually put all of the logs at the end. 344 00:19:04.380 --> 00:19:09.090 And now finally we have the bigExpenses function 345 00:19:09.090 --> 00:19:12.750 which will basically simply lock to the console 346 00:19:12.750 --> 00:19:14.133 this string here. 347 00:19:15.630 --> 00:19:19.290 And so, let's improve the name here a little bit 348 00:19:19.290 --> 00:19:21.593 and set it to logBigExpenses. 349 00:19:24.570 --> 00:19:26.810 So that's a little bit better. 350 00:19:26.810 --> 00:19:29.810 And here this limit now seems a little bit 351 00:19:29.810 --> 00:19:33.020 as if it is just spending limit of before, 352 00:19:33.020 --> 00:19:33.960 but it's really not. 353 00:19:33.960 --> 00:19:37.410 It's just like an arbitrary limit that we pass in 354 00:19:37.410 --> 00:19:40.993 just to see expenses that are bigger than this value. 355 00:19:41.840 --> 00:19:45.300 So let's just call this one here the bigLimit. 356 00:19:45.300 --> 00:19:47.800 And again, because it's a different kind of limit. 357 00:19:49.300 --> 00:19:52.200 So if I changed it here like to 100, 358 00:19:52.200 --> 00:19:54.630 then this should here change the output. 359 00:19:54.630 --> 00:19:56.480 So now these are all the expenses 360 00:19:56.480 --> 00:19:58.833 that are bigger than 100. 361 00:20:00.048 --> 00:20:01.990 If I put bigger than just one, 362 00:20:01.990 --> 00:20:04.173 then probably all of them will appear here. 363 00:20:06.580 --> 00:20:08.700 Let's put it to 500 maybe. 364 00:20:08.700 --> 00:20:10.243 Then we have only these two. 365 00:20:11.822 --> 00:20:14.090 So what can we improve here? 366 00:20:14.090 --> 00:20:16.040 Well, first let's again, 367 00:20:16.040 --> 00:20:18.900 let's change the name here to entry. 368 00:20:18.900 --> 00:20:21.750 Then here we can transform this string here 369 00:20:21.750 --> 00:20:26.020 which has this plus into a template literal 370 00:20:26.020 --> 00:20:27.693 which is a lot more modern. 371 00:20:29.360 --> 00:20:32.943 So here we want then this part, 372 00:20:34.530 --> 00:20:36.083 and then simply this string. 373 00:20:37.120 --> 00:20:41.660 So none of this, and just like this. 374 00:20:41.660 --> 00:20:43.683 Now, just a small observation. 375 00:20:44.700 --> 00:20:47.520 We are taking the emoji out here of the string 376 00:20:47.520 --> 00:20:50.060 which is just entry.description 377 00:20:50.060 --> 00:20:52.633 by getting the last two characters. 378 00:20:54.098 --> 00:20:58.290 Now that's because emojis basically count as two characters. 379 00:20:58.290 --> 00:21:01.350 If I had only one like this 380 00:21:01.350 --> 00:21:03.303 then we would get this weird sign here. 381 00:21:04.770 --> 00:21:08.573 So it counts as two characters only then it works. 382 00:21:09.460 --> 00:21:12.710 Then we also have this small heck here which is necessary 383 00:21:12.710 --> 00:21:15.450 because otherwise in the end we will have 384 00:21:15.450 --> 00:21:18.500 this separator here, 385 00:21:18.500 --> 00:21:20.230 but we will keep that here for now 386 00:21:20.230 --> 00:21:23.743 and fix it in the lecture after the next one. 387 00:21:26.160 --> 00:21:30.150 Then all we can fix here is to get rid of this ugly if, 388 00:21:30.150 --> 00:21:34.700 and transform it once again into the turnery operator. 389 00:21:34.700 --> 00:21:36.183 So, how can we do that? 390 00:21:37.890 --> 00:21:39.620 So we want to add something 391 00:21:39.620 --> 00:21:42.533 to the output conditionally, basically. 392 00:21:45.350 --> 00:21:50.350 So in case the entry value is less than the limit, 393 00:21:53.250 --> 00:21:55.423 then we want to add this. 394 00:21:57.720 --> 00:22:00.803 And otherwise, we don't want to add anything. 395 00:22:02.020 --> 00:22:04.720 And so, that is just the empty string. 396 00:22:04.720 --> 00:22:06.580 Now we can get rid of this, 397 00:22:06.580 --> 00:22:10.063 and once again get rid of these curly braces. 398 00:22:11.640 --> 00:22:12.630 Give it a save. 399 00:22:12.630 --> 00:22:14.390 And here we are back. 400 00:22:14.390 --> 00:22:16.670 And now this looks a little bit better. 401 00:22:16.670 --> 00:22:18.590 So we say it's more declarative. 402 00:22:18.590 --> 00:22:21.400 So it's more readable, 403 00:22:21.400 --> 00:22:24.780 and you will learn actually what declarative really means 404 00:22:24.780 --> 00:22:26.093 in the next lecture. 405 00:22:27.750 --> 00:22:31.990 And I think that is actually it for this lecture. 406 00:22:31.990 --> 00:22:36.440 So we followed many of the guidelines of the last lecture. 407 00:22:36.440 --> 00:22:37.840 Now of course not all of them 408 00:22:37.840 --> 00:22:40.330 because it's quite difficult to create an example 409 00:22:40.330 --> 00:22:42.430 which violates all of them. 410 00:22:42.430 --> 00:22:44.810 That would have to be a huge example 411 00:22:44.810 --> 00:22:47.930 but I think this example is nice enough 412 00:22:47.930 --> 00:22:51.900 and we will again improve it in the next lecture, 413 00:22:51.900 --> 00:22:54.720 or actually the one after the next lecture. 414 00:22:54.720 --> 00:22:58.050 So take some time and review what we did here. 415 00:22:58.050 --> 00:23:01.600 And again, if something is not 100% clear, 416 00:23:01.600 --> 00:23:03.480 why it works the way it does, 417 00:23:03.480 --> 00:23:06.230 then just take a minute and review this code. 418 00:23:06.230 --> 00:23:08.820 And of course, take a minute to take another look 419 00:23:08.820 --> 00:23:12.150 at all the guidelines for clean and modern code 420 00:23:12.150 --> 00:23:14.540 that I showed you in the last lecture. 421 00:23:14.540 --> 00:23:18.063 And then after that, let's move together to the next one.