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.