1 00:00:01,300 --> 00:00:05,400 Welcome back to continuing to fix the code 2 00:00:05,400 --> 00:00:08,650 that we started to work on a bit earlier. 3 00:00:08,650 --> 00:00:12,980 And so in this lecture, we're gonna focus on some of the, 4 00:00:12,980 --> 00:00:15,470 functional and declarative principles 5 00:00:15,470 --> 00:00:18,193 that we learned about in the last video. 6 00:00:19,920 --> 00:00:22,960 And we're gonna focus on three big areas 7 00:00:22,960 --> 00:00:26,340 of functional JavaScript just as we talked about 8 00:00:26,340 --> 00:00:27,760 in the last lecture. 9 00:00:27,760 --> 00:00:30,260 So that's first immutability, 10 00:00:30,260 --> 00:00:33,570 second, side effects and pure functions, 11 00:00:33,570 --> 00:00:36,480 and third making data transformations 12 00:00:36,480 --> 00:00:41,480 using pure functions, such as map filter and reduce. 13 00:00:42,070 --> 00:00:45,340 And let's actually start with immutability 14 00:00:45,340 --> 00:00:48,100 because in JavaScript, there's actually a way 15 00:00:48,100 --> 00:00:51,810 to make a data structure or in other words, 16 00:00:51,810 --> 00:00:55,710 to make an array or an object immutable. 17 00:00:55,710 --> 00:00:58,140 So let's take a look at that. 18 00:00:58,140 --> 00:01:00,480 So let's go back here. 19 00:01:00,480 --> 00:01:05,290 And so what we can do is to call the function, 20 00:01:05,290 --> 00:01:09,080 object dot freeze. 21 00:01:09,080 --> 00:01:12,550 Then in that function, we pass in the object 22 00:01:12,550 --> 00:01:15,053 that we want to make immutable basically. 23 00:01:16,870 --> 00:01:20,980 So by doing this spending limits is now immutable, 24 00:01:20,980 --> 00:01:24,680 which means that we can no longer put any new properties 25 00:01:24,680 --> 00:01:26,120 into it. 26 00:01:26,120 --> 00:01:28,950 So let me show that to you, 27 00:01:28,950 --> 00:01:31,610 but actually this works best in strict mode, 28 00:01:31,610 --> 00:01:35,260 which I'm noticing here is actually not activated 29 00:01:35,260 --> 00:01:36,453 in this script. 30 00:01:39,140 --> 00:01:42,900 But we already know how to do that, right? 31 00:01:42,900 --> 00:01:44,240 And so let's see what happens 32 00:01:44,240 --> 00:01:49,240 if we try to add a new property to spending limits. 33 00:01:49,750 --> 00:01:53,042 Let's say we want to add Jay actually, 34 00:01:53,042 --> 00:01:54,700 'cause we have him down here. 35 00:01:54,700 --> 00:01:58,280 And so let's say we want to actually allow him now, 36 00:01:58,280 --> 00:01:59,980 to spend something as well. 37 00:01:59,980 --> 00:02:01,463 So let's say 200. 38 00:02:02,570 --> 00:02:03,820 And let's give it a safe. 39 00:02:04,950 --> 00:02:09,650 And if we now check out this object, 40 00:02:09,650 --> 00:02:12,223 then you see that it didn't change. 41 00:02:13,244 --> 00:02:14,077 All right. 42 00:02:14,077 --> 00:02:17,860 And so that is object dot freeze for you. 43 00:02:17,860 --> 00:02:21,030 So whatever we try to add now to this object, 44 00:02:21,030 --> 00:02:24,283 it's not going to work because it has been freezed. 45 00:02:25,960 --> 00:02:29,680 So let's do the same with this one here, 46 00:02:29,680 --> 00:02:33,770 because in the end, an array is also just an object, right? 47 00:02:33,770 --> 00:02:38,053 And so we can also do object dot freeze on arrays. 48 00:02:40,240 --> 00:02:42,340 Just like this. 49 00:02:42,340 --> 00:02:46,290 And now we actually already start running into trouble 50 00:02:46,290 --> 00:02:50,210 because down here we are trying to push something 51 00:02:50,210 --> 00:02:53,910 into this array, which is now no longer possible, 52 00:02:53,910 --> 00:02:56,450 because again, we made it immutable 53 00:02:56,450 --> 00:02:58,930 by using object dot freeze. 54 00:02:58,930 --> 00:03:00,130 So right out of the gate, 55 00:03:00,130 --> 00:03:03,380 this code here is now no longer working. 56 00:03:03,380 --> 00:03:06,423 Now, I actually wanted to show something to you. 57 00:03:07,350 --> 00:03:09,740 So let me remove that. 58 00:03:09,740 --> 00:03:14,623 But there's probably still gonna be an error down here. 59 00:03:16,030 --> 00:03:17,130 Well, actually not. 60 00:03:17,130 --> 00:03:19,350 And yeah, there's a reason for that, 61 00:03:19,350 --> 00:03:22,460 which I'm gonna describe now. 62 00:03:22,460 --> 00:03:25,910 So you saw that we can not add new elements 63 00:03:25,910 --> 00:03:27,930 to this object now, right? 64 00:03:27,930 --> 00:03:31,480 So that was the reason for the error that we just saw here. 65 00:03:31,480 --> 00:03:34,210 However, object dot freeze here 66 00:03:34,210 --> 00:03:38,230 basically only freezes the first level of the object. 67 00:03:38,230 --> 00:03:41,420 So it's not a so-called deep freeze 68 00:03:41,420 --> 00:03:46,330 because we can still change objects inside of the object. 69 00:03:46,330 --> 00:03:49,013 So for example, I can do budget 70 00:03:52,820 --> 00:03:57,340 and then the first element and then dot value. 71 00:03:57,340 --> 00:04:00,840 I can set it to whatever I want. 72 00:04:00,840 --> 00:04:03,600 And so if we see now the results here, 73 00:04:03,600 --> 00:04:07,380 you see it that the value did indeed change, all right? 74 00:04:07,380 --> 00:04:12,380 What I cannot do is to edit completely a new element. 75 00:04:13,800 --> 00:04:18,323 So I cannot say, let's say object nine should be Jonas. 76 00:04:20,210 --> 00:04:22,030 So that is not going to work. 77 00:04:22,030 --> 00:04:24,717 So you see nothing was added here now. 78 00:04:27,480 --> 00:04:28,313 All right? 79 00:04:28,313 --> 00:04:30,110 So that's just something to keep in mind 80 00:04:30,110 --> 00:04:32,910 when you use object dot freeze. 81 00:04:32,910 --> 00:04:36,150 Now there are again, third-party libraries 82 00:04:36,150 --> 00:04:38,460 which implement a deep freeze, 83 00:04:38,460 --> 00:04:40,960 but I'm not gonna go that way here 84 00:04:40,960 --> 00:04:44,040 in this small and simple example. 85 00:04:44,040 --> 00:04:48,113 Let's just take out this one here and then let's keep going. 86 00:04:49,300 --> 00:04:50,133 All right. 87 00:04:51,270 --> 00:04:52,740 So let's put these back 88 00:04:52,740 --> 00:04:55,340 and that will then bring back more error. 89 00:04:55,340 --> 00:04:58,900 And so now we will need to fix this function. 90 00:04:58,900 --> 00:05:00,970 So how do we fix this function 91 00:05:00,970 --> 00:05:05,130 and why does it create the error in the first place? 92 00:05:05,130 --> 00:05:09,370 So the problem is that right now, this function at expense 93 00:05:09,370 --> 00:05:13,620 is trying to mutate this outside object. 94 00:05:13,620 --> 00:05:14,960 So in other words, 95 00:05:14,960 --> 00:05:17,620 according to what we learned in the last lecture 96 00:05:17,620 --> 00:05:22,620 is that this function right now has a side effect, right? 97 00:05:23,010 --> 00:05:26,060 So remember that a side effect basically means 98 00:05:26,060 --> 00:05:29,950 that something outside of a function is manipulated 99 00:05:29,950 --> 00:05:33,990 or that the function does something other than 100 00:05:33,990 --> 00:05:37,020 simply returning a value, right? 101 00:05:37,020 --> 00:05:41,350 And so a function that has, or that produces side effects 102 00:05:41,350 --> 00:05:43,970 is called an impure function. 103 00:05:43,970 --> 00:05:47,730 So this function at expense right now is an impure function 104 00:05:47,730 --> 00:05:51,940 because it does attempt to manipulate 105 00:05:51,940 --> 00:05:56,880 and to mutate this object that is located outside of it. 106 00:05:56,880 --> 00:05:59,530 So how do we fix that? 107 00:05:59,530 --> 00:06:02,890 Well, first of all, we should always pass all the data 108 00:06:02,890 --> 00:06:05,990 that the function depends on into the function, 109 00:06:05,990 --> 00:06:10,290 so that it doesn't have to reach into the outer scope. 110 00:06:10,290 --> 00:06:12,500 So that's a first good practice. 111 00:06:12,500 --> 00:06:13,810 And then of course 112 00:06:13,810 --> 00:06:17,420 the function should not change any of these values. 113 00:06:17,420 --> 00:06:20,420 So in other words, it should not mutate them. 114 00:06:20,420 --> 00:06:21,650 And that's the whole reason 115 00:06:21,650 --> 00:06:24,560 why we made this object here immutable, 116 00:06:24,560 --> 00:06:27,983 just so we can not by accident, mutate this object. 117 00:06:28,820 --> 00:06:29,680 Right? 118 00:06:29,680 --> 00:06:33,760 So remember that the solution to that is to create a copy 119 00:06:33,760 --> 00:06:37,230 and then return that copy of the state. 120 00:06:37,230 --> 00:06:39,253 So of the data, right? 121 00:06:40,090 --> 00:06:42,360 So I just said a lot of stuff. 122 00:06:42,360 --> 00:06:46,710 So let's put all of that into practice here right now. 123 00:06:46,710 --> 00:06:48,590 So the first thing that I'm gonna do 124 00:06:48,590 --> 00:06:51,830 is to pass in a variable called state 125 00:06:52,830 --> 00:06:57,200 and then also the limits here, okay? 126 00:06:57,200 --> 00:07:01,020 So this state here will be the budget object 127 00:07:01,020 --> 00:07:02,660 and then here the limits 128 00:07:02,660 --> 00:07:06,290 is of course going to be the spending limits. 129 00:07:06,290 --> 00:07:08,970 And so I will pass in all of that here 130 00:07:08,970 --> 00:07:10,763 in all of the three function calls. 131 00:07:13,880 --> 00:07:18,233 So budget and spending limits. 132 00:07:19,750 --> 00:07:22,430 So that of course alone does not fix the error, 133 00:07:22,430 --> 00:07:24,563 but we are working in the right direction. 134 00:07:26,010 --> 00:07:27,040 Okay? 135 00:07:27,040 --> 00:07:30,040 Now, I said in the last lecture 136 00:07:30,040 --> 00:07:32,500 or in one of the previous ones 137 00:07:32,500 --> 00:07:35,890 that we should not pass more than three arguments 138 00:07:35,890 --> 00:07:37,510 into a function. 139 00:07:37,510 --> 00:07:40,670 Now, in this case here, we actually have five parameters, 140 00:07:40,670 --> 00:07:41,940 but well, 141 00:07:41,940 --> 00:07:45,900 sometimes it's not a big deal to break those rules. 142 00:07:45,900 --> 00:07:49,720 We could also pass in simply one object 143 00:07:49,720 --> 00:07:53,810 of options basically, but let's keep it simple here. 144 00:07:53,810 --> 00:07:57,803 I'm not into the mood of changing all of these inputs here. 145 00:07:58,870 --> 00:07:59,703 All right? 146 00:07:59,703 --> 00:08:01,423 So this is just fine here. 147 00:08:02,350 --> 00:08:05,330 Then next up here we are 148 00:08:05,330 --> 00:08:08,880 clearly manipulating the user variable. 149 00:08:08,880 --> 00:08:10,833 So the user argument in this case. 150 00:08:11,890 --> 00:08:14,780 And so as we learned in the last video, 151 00:08:14,780 --> 00:08:18,300 we should avoid these data mutations whenever possible. 152 00:08:18,300 --> 00:08:19,610 And so let's instead, 153 00:08:19,610 --> 00:08:22,943 simply create a new variable right here. 154 00:08:25,320 --> 00:08:28,783 So let's call this one here clean user, 155 00:08:30,310 --> 00:08:33,350 because we are basically cleaning it. 156 00:08:33,350 --> 00:08:36,490 This is a common terminology that we use. 157 00:08:36,490 --> 00:08:40,250 So this is the whole reason why this Matilda here, 158 00:08:40,250 --> 00:08:44,330 even with the capital M still works, okay? 159 00:08:44,330 --> 00:08:46,340 So I didn't mention that in the previous lecture 160 00:08:46,340 --> 00:08:50,200 where we worked about this, but without this piece of code, 161 00:08:50,200 --> 00:08:53,530 it wouldn't work because Matilda here is uppercase, 162 00:08:53,530 --> 00:08:56,770 but here in the object it is lowercase. 163 00:08:56,770 --> 00:08:58,270 And so with the uppercase, 164 00:08:58,270 --> 00:09:00,500 it will not be found here in the object 165 00:09:00,500 --> 00:09:02,640 because this here is lowercase. 166 00:09:02,640 --> 00:09:04,490 And so that's of course different. 167 00:09:04,490 --> 00:09:08,470 And so here, we will always convert everything to lowercase 168 00:09:08,470 --> 00:09:11,510 so that it then corresponds to the object keys 169 00:09:11,510 --> 00:09:12,423 that we have here. 170 00:09:14,420 --> 00:09:17,513 So this one here is from before. 171 00:09:18,590 --> 00:09:21,520 Let's actually put it here where it belongs to. 172 00:09:21,520 --> 00:09:25,493 So that was the alternative way of getting the limit. 173 00:09:28,410 --> 00:09:33,410 Then here, we need to use that clean user and the same here. 174 00:09:34,620 --> 00:09:36,490 So we still want this to be called user. 175 00:09:36,490 --> 00:09:38,690 So here we need to go back to saying 176 00:09:38,690 --> 00:09:42,623 user should be equal to the clean user. 177 00:09:43,480 --> 00:09:44,313 Okay. 178 00:09:44,313 --> 00:09:47,480 So we did most of the work here, 179 00:09:47,480 --> 00:09:50,150 but now actually comes the main part. 180 00:09:50,150 --> 00:09:52,870 And again, that is that we want to replace 181 00:09:52,870 --> 00:09:57,870 this manipulating of the object by creating a new object 182 00:09:58,010 --> 00:10:00,543 based on the state that we receive. 183 00:10:02,030 --> 00:10:03,250 All right. 184 00:10:03,250 --> 00:10:06,150 So let's get rid of this code here. 185 00:10:06,150 --> 00:10:08,103 And instead, what do we want to do? 186 00:10:08,940 --> 00:10:13,940 Well, we basically want to return an array like this here, 187 00:10:14,140 --> 00:10:17,450 but simply with one more object. 188 00:10:17,450 --> 00:10:21,400 So we learned already how to do that actually, previously. 189 00:10:21,400 --> 00:10:23,123 And it's not very difficult. 190 00:10:24,030 --> 00:10:27,830 So let's just say we want to return then an empty array. 191 00:10:27,830 --> 00:10:29,680 And then we use the spread operator 192 00:10:29,680 --> 00:10:33,850 to put all the elements of the state in there. 193 00:10:33,850 --> 00:10:38,570 And so this effectively creates a copy of this state array. 194 00:10:38,570 --> 00:10:40,710 Remember how we did that earlier? 195 00:10:40,710 --> 00:10:44,210 And so this is exactly the same technique right here. 196 00:10:44,210 --> 00:10:45,550 And now all we need to do 197 00:10:45,550 --> 00:10:48,993 is to then add a new element right after this one. 198 00:10:50,230 --> 00:10:52,750 And that element is gonna be just object, 199 00:10:52,750 --> 00:10:55,853 which looks exactly like what we had before. 200 00:10:57,750 --> 00:10:59,340 All right. 201 00:10:59,340 --> 00:11:02,120 And so now we can get rid of this 202 00:11:06,520 --> 00:11:07,490 All right. 203 00:11:07,490 --> 00:11:11,150 So right now, calling the add expense function 204 00:11:11,150 --> 00:11:16,150 will actually no longer mutate the budget object, right? 205 00:11:17,040 --> 00:11:18,030 And so therefore, 206 00:11:18,030 --> 00:11:21,500 if we want to then do something with the new budget, 207 00:11:21,500 --> 00:11:24,103 we actually need to store that somewhere. 208 00:11:25,170 --> 00:11:30,170 So let's say new budget one is equal to this. 209 00:11:32,340 --> 00:11:35,213 Then let's quickly log it to the console as well. 210 00:11:38,010 --> 00:11:42,890 And so let's see, and here we are. 211 00:11:42,890 --> 00:11:44,550 So here is pizza. 212 00:11:44,550 --> 00:11:48,720 So that's just the expense that we added here previously. 213 00:11:48,720 --> 00:11:49,750 Great. 214 00:11:49,750 --> 00:11:54,750 But now what happens if this here turns out to be false? 215 00:11:55,710 --> 00:11:58,950 So basically if this code here does not run. 216 00:11:58,950 --> 00:12:01,660 Well, let's try that by making this pizza here 217 00:12:01,660 --> 00:12:03,763 ridiculously expensive. 218 00:12:04,840 --> 00:12:08,820 And so you see that now we actually get undefined. 219 00:12:08,820 --> 00:12:11,520 So that's not good, right? 220 00:12:11,520 --> 00:12:14,583 And so what do you think we should return in this case? 221 00:12:15,570 --> 00:12:19,720 Well, what we have to do is to return the original state. 222 00:12:19,720 --> 00:12:23,500 So the original budget that we got in, right? 223 00:12:23,500 --> 00:12:24,970 And so in that case, 224 00:12:24,970 --> 00:12:28,990 the add expense function will always return something. 225 00:12:28,990 --> 00:12:31,650 So it either returns the original budget, 226 00:12:31,650 --> 00:12:36,350 or it returns the one with the new expense added to it. 227 00:12:36,350 --> 00:12:37,510 All right? 228 00:12:37,510 --> 00:12:39,680 So let's clean this up here a little bit 229 00:12:39,680 --> 00:12:43,280 and simply use the ternary operator here, 230 00:12:43,280 --> 00:12:47,160 because remember debt is a lot more declarative 231 00:12:47,160 --> 00:12:50,393 than the more old school if else statement. 232 00:12:51,550 --> 00:12:53,610 So here let's take away the return 233 00:12:53,610 --> 00:12:56,830 and actually put it here in front. 234 00:12:56,830 --> 00:13:00,290 So here we will now decide what is gonna be returned. 235 00:13:00,290 --> 00:13:02,860 So in this case, what we will return, 236 00:13:02,860 --> 00:13:05,950 is this new state. 237 00:13:05,950 --> 00:13:07,640 So this new budget 238 00:13:07,640 --> 00:13:11,643 or otherwise we will just return the original one. 239 00:13:12,990 --> 00:13:15,253 Now we got some error somewhere. 240 00:13:16,280 --> 00:13:17,113 It's this one. 241 00:13:18,033 --> 00:13:19,560 And here we go. 242 00:13:19,560 --> 00:13:21,760 So now we no longer got our error 243 00:13:21,760 --> 00:13:26,000 and we are returning the original budget here. 244 00:13:26,000 --> 00:13:31,000 And if we put it back to a normal price, then, here we go. 245 00:13:33,120 --> 00:13:37,350 So here is our object or updated expense. 246 00:13:37,350 --> 00:13:41,440 So our updated budget, but in a functional way. 247 00:13:41,440 --> 00:13:42,970 So right now this function here, 248 00:13:42,970 --> 00:13:45,520 it does no longer produce side effects. 249 00:13:45,520 --> 00:13:49,200 It is now officially a pure function. 250 00:13:49,200 --> 00:13:50,750 Let's actually write that here. 251 00:13:54,760 --> 00:13:56,860 Because we're really happy about this now. 252 00:14:00,668 --> 00:14:01,501 All right. 253 00:14:01,501 --> 00:14:04,010 Now what about this one here? 254 00:14:04,010 --> 00:14:06,163 So the next add expense call. 255 00:14:07,070 --> 00:14:10,250 So do you think we still should pass 256 00:14:10,250 --> 00:14:12,670 budget into this one here? 257 00:14:12,670 --> 00:14:15,380 Well, not really, right? 258 00:14:15,380 --> 00:14:19,830 Because this one will then again, act on the original budget 259 00:14:19,830 --> 00:14:23,050 and that doesn't really make a lot of sense, right? 260 00:14:23,050 --> 00:14:25,890 Because this previous expense that we just added 261 00:14:25,890 --> 00:14:28,800 is not gonna be in there, is it? 262 00:14:28,800 --> 00:14:30,600 So let me show that to you actually. 263 00:14:32,650 --> 00:14:34,463 Put that down here, 264 00:14:38,160 --> 00:14:39,723 and create a new one. 265 00:14:44,870 --> 00:14:46,103 So let's see. 266 00:14:47,190 --> 00:14:50,440 And so here now we have, going to the movies, 267 00:14:50,440 --> 00:14:55,110 but indeed we don't have, the pizza here before. 268 00:14:55,110 --> 00:14:57,120 And that makes sense, right? 269 00:14:57,120 --> 00:15:00,200 Because we are again using the original budget, 270 00:15:00,200 --> 00:15:05,200 which was never mutated by the previous add expense call. 271 00:15:05,290 --> 00:15:06,270 Right? 272 00:15:06,270 --> 00:15:08,350 And so what we have to do instead 273 00:15:08,350 --> 00:15:12,540 is to here past in the results of the previous operation. 274 00:15:12,540 --> 00:15:15,363 So that's new budget one. 275 00:15:16,500 --> 00:15:18,780 So if we see now, 276 00:15:18,780 --> 00:15:23,780 now it will have indeed pizza and going to movies. 277 00:15:23,780 --> 00:15:27,080 And then of course the same thing here for the final 278 00:15:28,330 --> 00:15:30,350 part of the puzzle. 279 00:15:30,350 --> 00:15:33,800 So the final expense, the third one. 280 00:15:33,800 --> 00:15:36,530 And here then we again use the previous one. 281 00:15:36,530 --> 00:15:38,023 So that's new budget two. 282 00:15:44,110 --> 00:15:46,580 But now this one here should be the same as before, 283 00:15:46,580 --> 00:15:50,283 because of course Jay is not allowed to add anything. 284 00:15:52,070 --> 00:15:53,610 All right. 285 00:15:53,610 --> 00:15:57,363 So only pizza and going to movies has been added there. 286 00:15:58,870 --> 00:16:00,420 Let's make this one here a bit smaller 287 00:16:00,420 --> 00:16:02,883 so that it fits in one line. 288 00:16:03,850 --> 00:16:04,763 Well, it didn't. 289 00:16:05,770 --> 00:16:06,603 All right. 290 00:16:06,603 --> 00:16:08,003 So let's just leave it like that. 291 00:16:09,470 --> 00:16:14,370 And yeah, so that first part here is now fixed. 292 00:16:14,370 --> 00:16:16,330 Now in the real world, 293 00:16:16,330 --> 00:16:19,300 we would use something called composing 294 00:16:19,300 --> 00:16:21,410 and the technique called currying 295 00:16:21,410 --> 00:16:26,410 to basically create this chain of operations here. 296 00:16:26,860 --> 00:16:30,030 So here we need all of these intermediate variables 297 00:16:30,030 --> 00:16:32,480 to create a new budget, right? 298 00:16:32,480 --> 00:16:36,000 So we call this once store the result in a new variable, 299 00:16:36,000 --> 00:16:38,990 then the next call we use that previous variable, 300 00:16:38,990 --> 00:16:40,710 and then again, in the next call, 301 00:16:40,710 --> 00:16:43,410 we use that previous variable again. 302 00:16:43,410 --> 00:16:46,730 So this is kind of a chain of add expenses, 303 00:16:46,730 --> 00:16:49,140 and it would be nice to always automatically 304 00:16:49,140 --> 00:16:52,810 use the previous result for the next operation. 305 00:16:52,810 --> 00:16:57,050 And so again, in a real world, big functional application, 306 00:16:57,050 --> 00:17:00,500 we would use composing to create one function, 307 00:17:00,500 --> 00:17:04,030 which will then perform all of these operations at once. 308 00:17:04,030 --> 00:17:07,420 But that would really be outside the scope of this course, 309 00:17:07,420 --> 00:17:11,530 because that is a whole big world on itself. 310 00:17:11,530 --> 00:17:14,330 So here we are just trying to implement 311 00:17:14,330 --> 00:17:17,720 some of these techniques and some of these concepts, 312 00:17:17,720 --> 00:17:20,840 just so you see how they work and that they exist 313 00:17:20,840 --> 00:17:22,630 and that they are important. 314 00:17:22,630 --> 00:17:24,990 And again, this becomes especially important 315 00:17:24,990 --> 00:17:27,840 once you start using one of the frameworks out there 316 00:17:27,840 --> 00:17:32,720 just like react or Redux, which rely heavily on concepts, 317 00:17:32,720 --> 00:17:36,620 such as immutability and pure functions. 318 00:17:36,620 --> 00:17:40,070 But anyway, let's now move on here in our code. 319 00:17:40,070 --> 00:17:43,660 And now that we already talked so much about side effects 320 00:17:43,660 --> 00:17:46,380 and immutability and pure functions, 321 00:17:46,380 --> 00:17:49,790 let's turn our attention to data transformations 322 00:17:49,790 --> 00:17:51,230 here in this case. 323 00:17:51,230 --> 00:17:56,230 Because as you see here we have this for off loop, 324 00:17:56,400 --> 00:17:57,890 which we can easily transform 325 00:17:57,890 --> 00:18:01,940 into a functional function basically. 326 00:18:01,940 --> 00:18:03,960 So we have this loop here, 327 00:18:03,960 --> 00:18:08,960 which loops over all the entries in the budget, right? 328 00:18:09,000 --> 00:18:11,270 So basically which loops over this array 329 00:18:11,270 --> 00:18:12,710 and in each iteration, 330 00:18:12,710 --> 00:18:17,070 the current one is one of these entry objects. 331 00:18:17,070 --> 00:18:21,093 And then in this loop, it will update each of the object, 332 00:18:21,970 --> 00:18:25,920 to contain the flag attribute basically 333 00:18:25,920 --> 00:18:29,020 whenever the value is over the limit. 334 00:18:29,020 --> 00:18:31,730 So that happened for example, here. 335 00:18:31,730 --> 00:18:34,740 And so we got flag set to limit. 336 00:18:34,740 --> 00:18:37,390 Remember that from the previous lecture. 337 00:18:37,390 --> 00:18:41,160 But of course this function is again, an impure function 338 00:18:41,160 --> 00:18:45,993 because it does manipulate the object itself, right? 339 00:18:46,970 --> 00:18:50,250 So in this case, it works with a budget, 340 00:18:50,250 --> 00:18:54,990 but the same would be true if we wrote new budget 341 00:18:54,990 --> 00:18:59,390 three here, which was our latest and updated budget. 342 00:18:59,390 --> 00:19:01,950 So this one yhere actually come from line 65. 343 00:19:01,950 --> 00:19:03,630 So it's this one. 344 00:19:03,630 --> 00:19:07,020 So what I would be interested here is this. 345 00:19:07,020 --> 00:19:08,723 So let's move that down here. 346 00:19:09,940 --> 00:19:12,100 And so here indeed, we will now see... 347 00:19:15,520 --> 00:19:17,950 Yeah, so here is flag set to limit. 348 00:19:17,950 --> 00:19:22,680 And so we violated the principle of immutability here, 349 00:19:22,680 --> 00:19:23,880 right? 350 00:19:23,880 --> 00:19:26,580 And therefore let's transform this function here 351 00:19:26,580 --> 00:19:28,743 into a pure function as well. 352 00:19:29,720 --> 00:19:33,090 So again, we will want to pass in all the data 353 00:19:33,090 --> 00:19:35,030 that the function depends on. 354 00:19:35,030 --> 00:19:37,440 And so that's, again, well in this case, 355 00:19:37,440 --> 00:19:39,333 it is budgets three. 356 00:19:40,690 --> 00:19:43,240 So new budget three, 357 00:19:43,240 --> 00:19:48,240 and also we actually need the limit from the outside. 358 00:19:49,100 --> 00:19:53,360 And actually we skipped this function here, 359 00:19:53,360 --> 00:19:55,853 but let me come back to that in a minute. 360 00:19:56,690 --> 00:20:00,053 So let's just pass in the spending limits here as well. 361 00:20:01,110 --> 00:20:03,683 So let's go back up here. 362 00:20:04,560 --> 00:20:06,820 So we passed in the spending limits here 363 00:20:06,820 --> 00:20:10,430 into the add expense function, 364 00:20:10,430 --> 00:20:12,203 but we actually never used it. 365 00:20:13,040 --> 00:20:16,290 And so the reason for that is that get limit here, 366 00:20:16,290 --> 00:20:20,460 actually, uses the spending limits from the outer scope. 367 00:20:20,460 --> 00:20:24,100 And that's something that we do not want, right? 368 00:20:24,100 --> 00:20:27,740 And therefore let's add the limits here, 369 00:20:27,740 --> 00:20:29,123 as another parameter. 370 00:20:30,690 --> 00:20:31,710 Limits and user. 371 00:20:31,710 --> 00:20:36,710 And then here, I can just call it, limits like this, 372 00:20:36,860 --> 00:20:41,103 and then here I pass the limits in. 373 00:20:42,060 --> 00:20:42,893 All right. 374 00:20:44,020 --> 00:20:46,860 So it works just like before, but now this function here, 375 00:20:46,860 --> 00:20:50,370 no longer depends on any external variable. 376 00:20:50,370 --> 00:20:53,730 It can do all its work without having to look up 377 00:20:53,730 --> 00:20:54,763 in the scope chain. 378 00:20:57,202 --> 00:20:58,410 Okay. 379 00:20:58,410 --> 00:21:01,823 So let's do the same here as well. 380 00:21:03,970 --> 00:21:07,480 So here we want to then receive a state. 381 00:21:07,480 --> 00:21:11,117 I'm gonna call it state to keep it neutral, just like before 382 00:21:11,117 --> 00:21:14,700 but then calling it limits once again. 383 00:21:14,700 --> 00:21:18,520 So here again, we want to pass in limits 384 00:21:18,520 --> 00:21:20,333 and then the user itself. 385 00:21:21,590 --> 00:21:26,590 But now let's then finally actually replace this entire loop 386 00:21:26,860 --> 00:21:29,830 and instead loop over the state, 387 00:21:29,830 --> 00:21:33,200 using one of our data transformation functions. 388 00:21:33,200 --> 00:21:35,810 So what do we want to do here? 389 00:21:35,810 --> 00:21:39,200 Well, we want to basically keep an array 390 00:21:39,200 --> 00:21:42,680 of the same size here in the end, right? 391 00:21:42,680 --> 00:21:44,970 So, in each of these objects, 392 00:21:44,970 --> 00:21:47,210 we basically just want to add a property, 393 00:21:47,210 --> 00:21:49,220 but that's all we want to do. 394 00:21:49,220 --> 00:21:51,420 We don't want to filter anything 395 00:21:51,420 --> 00:21:55,790 or we don't want to use reduce either, right? 396 00:21:55,790 --> 00:21:59,350 So it makes sense to use the map method here. 397 00:21:59,350 --> 00:22:03,160 And map, remember, will create a brand new object. 398 00:22:03,160 --> 00:22:04,720 So brand new array. 399 00:22:04,720 --> 00:22:07,650 And so that's exactly what we want, right? 400 00:22:07,650 --> 00:22:11,160 So that's in the spirit of functional code 401 00:22:11,160 --> 00:22:13,020 and of immutability. 402 00:22:13,020 --> 00:22:15,040 So not mutating the state, 403 00:22:15,040 --> 00:22:19,033 but instead creating a new state based on the original one. 404 00:22:20,110 --> 00:22:23,083 And so, in fact, this is then the state 405 00:22:23,083 --> 00:22:26,400 that we are going to return from this function. 406 00:22:26,400 --> 00:22:28,930 But let's not get ahead of ourselves 407 00:22:28,930 --> 00:22:32,853 and instead work here on this. 408 00:22:35,350 --> 00:22:37,590 So let's create a function block here 409 00:22:37,590 --> 00:22:40,460 and think about what we want to do here. 410 00:22:40,460 --> 00:22:43,070 So right now here inside of this callback, 411 00:22:43,070 --> 00:22:48,070 each entry is one of these objects, just like this, right. 412 00:22:48,830 --> 00:22:51,820 But of course we still do not want to mutate 413 00:22:51,820 --> 00:22:55,140 any of these objects, right. 414 00:22:55,140 --> 00:22:58,684 Instead when this condition here is true, 415 00:22:58,684 --> 00:23:03,670 so when the value is less than the limit, 416 00:23:03,670 --> 00:23:06,380 then essentially we want to copy the object 417 00:23:06,380 --> 00:23:09,823 and add the new property onto that copy. 418 00:23:10,838 --> 00:23:11,671 All right. 419 00:23:11,671 --> 00:23:14,740 So basically just like we did here. 420 00:23:14,740 --> 00:23:17,110 So the idea is the same. 421 00:23:17,110 --> 00:23:20,670 So here we copied the entire array 422 00:23:20,670 --> 00:23:22,720 and then added a new object. 423 00:23:22,720 --> 00:23:25,520 But here, what we will do is to basically copy 424 00:23:25,520 --> 00:23:28,010 the entire entry object 425 00:23:28,010 --> 00:23:30,973 and then add the flag property to that. 426 00:23:32,150 --> 00:23:34,260 So that sounds a bit complicated, 427 00:23:34,260 --> 00:23:37,480 but trust me, it will all make sense. 428 00:23:37,480 --> 00:23:40,597 So let's copy this condition here, just like this. 429 00:23:44,060 --> 00:23:47,450 And then again, making the code nicely declarative 430 00:23:47,450 --> 00:23:49,443 by using the turnery operator. 431 00:23:51,250 --> 00:23:53,830 So if this condition is true. 432 00:23:53,830 --> 00:23:56,990 So if the value is above the limit 433 00:23:56,990 --> 00:24:01,237 then, here we want to return the original object copied. 434 00:24:03,560 --> 00:24:08,100 So remember that this creates a copy and add a new property. 435 00:24:08,100 --> 00:24:12,823 And so that's flag set to limit. 436 00:24:13,980 --> 00:24:17,660 And otherwise what we will want to do is simply return 437 00:24:17,660 --> 00:24:19,453 the original entry. 438 00:24:20,400 --> 00:24:22,400 And that's actually it. 439 00:24:22,400 --> 00:24:24,500 So let's just check out the result 440 00:24:24,500 --> 00:24:27,120 and then, I will show it to you again. 441 00:24:27,120 --> 00:24:28,750 All right. 442 00:24:28,750 --> 00:24:31,900 So here now, of course, we need to again, 443 00:24:31,900 --> 00:24:34,373 store the results into a variable. 444 00:24:35,400 --> 00:24:37,680 Let's call this one final budget 445 00:24:37,680 --> 00:24:40,553 because we will not create any new budgets. 446 00:24:41,980 --> 00:24:44,163 And I'm then gonna log that here. 447 00:24:47,140 --> 00:24:50,923 And so let's see if we got the flag here. 448 00:24:52,210 --> 00:24:55,143 And indeed flag is set to limit. 449 00:24:56,020 --> 00:24:59,200 So that worked and you see that we did not 450 00:24:59,200 --> 00:25:01,660 actually manipulate any object. 451 00:25:01,660 --> 00:25:04,590 All we did here was to create a copy 452 00:25:04,590 --> 00:25:08,573 and then add the property onto that copy, right? 453 00:25:10,840 --> 00:25:14,040 Now here, you might not be used anymore 454 00:25:14,040 --> 00:25:16,700 to actually see the return here 455 00:25:16,700 --> 00:25:18,750 in the map callback function, 456 00:25:18,750 --> 00:25:22,323 but that's just because we have this function block here, 457 00:25:23,180 --> 00:25:24,013 right? 458 00:25:24,013 --> 00:25:26,210 And so remember that in the map function, 459 00:25:26,210 --> 00:25:28,700 whatever is returned from the callback 460 00:25:28,700 --> 00:25:33,560 will be the element in the same position of the new array, 461 00:25:33,560 --> 00:25:34,393 right? 462 00:25:34,393 --> 00:25:37,230 So that's why we need the return here. 463 00:25:37,230 --> 00:25:39,340 But of course we could also 464 00:25:39,340 --> 00:25:41,540 completely simplify all of this here 465 00:25:41,540 --> 00:25:44,370 if we wanted to make it simpler. 466 00:25:44,370 --> 00:25:47,250 So let's take this and actually transform it 467 00:25:47,250 --> 00:25:50,980 into an arrow function if you prefer that. 468 00:25:50,980 --> 00:25:53,540 I will then leave these two here. 469 00:25:53,540 --> 00:25:57,760 So function and state, then let's say, just like this, 470 00:25:57,760 --> 00:25:59,423 then we don't need the return. 471 00:26:01,081 --> 00:26:02,990 And here we can get rid of the braces as well 472 00:26:02,990 --> 00:26:04,173 and of the return. 473 00:26:08,860 --> 00:26:11,183 Let's call this one here two. 474 00:26:13,380 --> 00:26:16,743 And here we don't need that semi-colon I guess. 475 00:26:17,820 --> 00:26:19,050 Now that's it. 476 00:26:19,050 --> 00:26:20,700 Now we're ready to go. 477 00:26:20,700 --> 00:26:23,260 And this is basically the same function. 478 00:26:23,260 --> 00:26:27,060 Just copy it, or actually commented out. 479 00:26:27,060 --> 00:26:30,890 So just in case you prefer this arrow function. 480 00:26:30,890 --> 00:26:33,670 So I hope that this made sense. 481 00:26:33,670 --> 00:26:37,270 What's really important to note here once more 482 00:26:37,270 --> 00:26:40,370 is that we transformed this function here 483 00:26:40,370 --> 00:26:44,260 into a pure function, which does not mutate anything 484 00:26:44,260 --> 00:26:48,760 because the map method here returns a brand new array. 485 00:26:48,760 --> 00:26:51,240 So we give this function an array 486 00:26:51,240 --> 00:26:53,400 and it will then create a new one 487 00:26:53,400 --> 00:26:56,730 simply by mapping over the original one, 488 00:26:56,730 --> 00:26:59,930 which again, creates then a brand new one. 489 00:26:59,930 --> 00:27:01,980 And in each position of the array, 490 00:27:01,980 --> 00:27:06,660 we then either return a copy of the original entry 491 00:27:06,660 --> 00:27:08,870 plus the flag property, 492 00:27:08,870 --> 00:27:13,430 or simply we return the original entry as it was. 493 00:27:13,430 --> 00:27:18,280 And so with this, again, our function is nice and pure 494 00:27:18,280 --> 00:27:20,560 and does not create any side effect 495 00:27:20,560 --> 00:27:23,660 and does not manipulate anything. 496 00:27:23,660 --> 00:27:24,830 Nice. 497 00:27:24,830 --> 00:27:28,760 And maybe you're actually noticing that throughout, 498 00:27:28,760 --> 00:27:30,060 most of the course, 499 00:27:30,060 --> 00:27:33,370 we actually kind of followed these principles already, 500 00:27:33,370 --> 00:27:35,570 but without calling it functional. 501 00:27:35,570 --> 00:27:39,570 And I remember, especially the bankers project. 502 00:27:39,570 --> 00:27:42,800 So in a section about arrays. 503 00:27:42,800 --> 00:27:45,170 So in there, I told you a lot of times 504 00:27:45,170 --> 00:27:47,790 that we should always pass all the data that we need 505 00:27:47,790 --> 00:27:51,650 for a certain function to work right into that function. 506 00:27:51,650 --> 00:27:55,830 So that, again, it does not depend on any outside data 507 00:27:55,830 --> 00:27:58,380 because really you will see in practice 508 00:27:58,380 --> 00:27:59,970 that this makes it a lot easier 509 00:27:59,970 --> 00:28:02,950 to reason about the function itself. 510 00:28:02,950 --> 00:28:05,600 And so if you do that for all of your functions, 511 00:28:05,600 --> 00:28:07,880 then in the end that will make your code 512 00:28:07,880 --> 00:28:11,533 a lot easier to understand and a lot more readable. 513 00:28:12,430 --> 00:28:13,263 Okay. 514 00:28:13,263 --> 00:28:14,730 But with that being said, 515 00:28:14,730 --> 00:28:18,430 let's now move on here to our final function. 516 00:28:18,430 --> 00:28:21,550 And here again, we have this for loop 517 00:28:21,550 --> 00:28:23,280 and inside of that loop, 518 00:28:23,280 --> 00:28:26,370 we are actually constantly manipulating 519 00:28:26,370 --> 00:28:29,690 or mutating this output variable here. 520 00:28:29,690 --> 00:28:34,630 And that of course, goes against the spirit of immutability. 521 00:28:34,630 --> 00:28:35,490 Right. 522 00:28:35,490 --> 00:28:37,130 So immutability is of course 523 00:28:37,130 --> 00:28:39,600 not just for objects and arrays. 524 00:28:39,600 --> 00:28:42,750 This also goes for more regular variables. 525 00:28:42,750 --> 00:28:44,750 And so in functional code, 526 00:28:44,750 --> 00:28:48,400 you will probably never see the let variable. 527 00:28:48,400 --> 00:28:51,643 So we're always trying to compute a variable, 528 00:28:52,670 --> 00:28:56,843 for example, based on methods like this one here. 529 00:28:58,417 --> 00:28:59,250 All right. 530 00:28:59,250 --> 00:29:01,750 And so here we will actually be able to achieve 531 00:29:01,750 --> 00:29:03,220 something similar. 532 00:29:03,220 --> 00:29:06,530 So let's think together how we could 533 00:29:06,530 --> 00:29:08,990 create a string like this here 534 00:29:08,990 --> 00:29:13,340 simply based on pure and functional functions. 535 00:29:13,340 --> 00:29:17,250 So, data transformation functions for arrays, 536 00:29:17,250 --> 00:29:19,363 and also for strings actually. 537 00:29:20,570 --> 00:29:22,190 Let's comment all of this out 538 00:29:22,190 --> 00:29:25,280 because of course there is gonna be a better, 539 00:29:25,280 --> 00:29:27,920 more declarative and functional way. 540 00:29:27,920 --> 00:29:30,670 So in the code that we had here before, 541 00:29:30,670 --> 00:29:32,700 of course it was very imperative. 542 00:29:32,700 --> 00:29:35,780 We said, create an empty variable. 543 00:29:35,780 --> 00:29:39,160 Then we manually said that it should loop over 544 00:29:40,240 --> 00:29:42,950 all of the entries in the budget array. 545 00:29:42,950 --> 00:29:46,140 And then whenever we had a big expense, 546 00:29:46,140 --> 00:29:47,990 which is basically this one here, 547 00:29:47,990 --> 00:29:52,380 it should then add the emoji to the output variable here. 548 00:29:52,380 --> 00:29:53,533 So to this string. 549 00:29:54,446 --> 00:29:55,620 All right. 550 00:29:55,620 --> 00:29:57,590 But if we really think about this, 551 00:29:57,590 --> 00:30:00,123 there is a better way to doing this. 552 00:30:02,970 --> 00:30:05,240 So this one here is called output, 553 00:30:05,240 --> 00:30:09,850 and I guess we should just actually call it big expenses. 554 00:30:09,850 --> 00:30:12,530 So we could have done that before. 555 00:30:12,530 --> 00:30:13,973 So giving it a better name. 556 00:30:15,540 --> 00:30:18,130 So what we really want to do, 557 00:30:18,130 --> 00:30:21,210 and this now I think requires a little bit more thinking 558 00:30:21,210 --> 00:30:25,550 on our part, but believe me is gonna be worth it. 559 00:30:25,550 --> 00:30:27,550 So what we really want to do here 560 00:30:27,550 --> 00:30:30,660 is not all of this imperative stuff. 561 00:30:30,660 --> 00:30:34,740 So what we want to do is actually just filter our array 562 00:30:34,740 --> 00:30:36,840 for these big expenses. 563 00:30:36,840 --> 00:30:39,350 And then basically for each of the results, 564 00:30:39,350 --> 00:30:41,940 all we want to do is to create a nice string 565 00:30:41,940 --> 00:30:43,663 containing only the emoji. 566 00:30:46,280 --> 00:30:48,510 So let's translate what we just said 567 00:30:48,510 --> 00:30:50,053 and starting with the filter. 568 00:30:52,100 --> 00:30:53,183 So entry, 569 00:30:54,520 --> 00:30:58,340 and then here, the condition is of course gonna be the same. 570 00:30:58,340 --> 00:31:03,340 So basically, an expensive or a big expense. 571 00:31:05,490 --> 00:31:10,063 So, let's start by, logging this here 572 00:31:11,560 --> 00:31:13,503 just so we can see what we're doing. 573 00:31:14,410 --> 00:31:16,060 Big expenses. 574 00:31:16,060 --> 00:31:18,750 And here we say that the state is not defined 575 00:31:18,750 --> 00:31:23,070 and that's simply because I didn't pass it in yet. 576 00:31:23,070 --> 00:31:24,230 So just like before, 577 00:31:24,230 --> 00:31:26,790 of course we want to make this function 578 00:31:26,790 --> 00:31:30,550 not to depend on any variable from the outside. 579 00:31:30,550 --> 00:31:35,550 That's how we pass it in here as final budget. 580 00:31:38,140 --> 00:31:39,913 So let's see what we have here. 581 00:31:40,920 --> 00:31:45,000 And indeed that is the new iPhone and laptop, 582 00:31:45,000 --> 00:31:48,690 which are exactly or big expenses. 583 00:31:48,690 --> 00:31:53,380 And so now all we need to do is to get these emojis here out 584 00:31:53,380 --> 00:31:57,323 and then create a nice string based on the result. 585 00:31:59,093 --> 00:31:59,926 All right. 586 00:31:59,926 --> 00:32:01,430 So we have now this array of two. 587 00:32:01,430 --> 00:32:06,200 And so we want to, again, create an array of two, 588 00:32:06,200 --> 00:32:07,743 but only with these emojis. 589 00:32:08,580 --> 00:32:10,983 So let's use a map for that. 590 00:32:13,940 --> 00:32:15,993 So again, there's an entry. 591 00:32:17,680 --> 00:32:20,810 And here we want the entry dot description 592 00:32:21,920 --> 00:32:24,270 and then just take the last two characters. 593 00:32:24,270 --> 00:32:27,433 So just like we did here before, 594 00:32:30,910 --> 00:32:31,743 All right. 595 00:32:31,743 --> 00:32:34,480 And now we can just join that 596 00:32:38,950 --> 00:32:42,800 like this as we had before, and there we go. 597 00:32:42,800 --> 00:32:46,240 So this here is essentially the functional version 598 00:32:46,240 --> 00:32:48,393 of just doing this here. 599 00:32:49,620 --> 00:32:53,500 So, after this video, you can maybe take a better look 600 00:32:53,500 --> 00:32:57,630 and really compare these two things that we did here. 601 00:32:57,630 --> 00:33:00,870 Let me just show you that we could also have done it, 602 00:33:00,870 --> 00:33:01,910 in another way. 603 00:33:01,910 --> 00:33:04,260 So instead of map and join, 604 00:33:04,260 --> 00:33:07,533 we could have done it all in one go using reduce. 605 00:33:08,998 --> 00:33:11,460 And so once again, this is a nice use case 606 00:33:11,460 --> 00:33:15,690 of showing you a more advanced way of using reduce. 607 00:33:15,690 --> 00:33:18,460 So again, the use case of reduce 608 00:33:18,460 --> 00:33:21,900 is to basically take all the values in one array 609 00:33:21,900 --> 00:33:24,300 and create one value out of them. 610 00:33:24,300 --> 00:33:27,250 So reduce them all into just one. 611 00:33:27,250 --> 00:33:29,747 And in this case, what we want is our string. 612 00:33:29,747 --> 00:33:32,043 And so that's gonna be the accumulator. 613 00:33:33,450 --> 00:33:36,810 And then as always, we have the current value, 614 00:33:36,810 --> 00:33:39,680 then here a callback, and then the initial value, 615 00:33:39,680 --> 00:33:41,673 which is just gonna be an empty string. 616 00:33:42,830 --> 00:33:47,560 So what we want to do here is to basically always return 617 00:33:47,560 --> 00:33:50,343 the previous string plus the current string. 618 00:33:52,360 --> 00:33:56,877 So that's the previous string and then the current string, 619 00:33:58,960 --> 00:33:59,793 like this. 620 00:33:59,793 --> 00:34:03,490 And of course, we still need to say 621 00:34:03,490 --> 00:34:06,193 dot description dot slice, like this. 622 00:34:10,620 --> 00:34:15,620 So we're almost there already, just missing this separator. 623 00:34:16,490 --> 00:34:18,180 And there we go. 624 00:34:18,180 --> 00:34:21,470 Now we just have this ugly thing here. 625 00:34:21,470 --> 00:34:24,573 Let's see what happens if we remove this here altogether. 626 00:34:25,590 --> 00:34:28,240 And yeah, of course that cannot work. 627 00:34:28,240 --> 00:34:30,430 We always need an initial value. 628 00:34:30,430 --> 00:34:34,400 And so now we could go ahead and only start reading here, 629 00:34:34,400 --> 00:34:36,203 but that's not really necessary. 630 00:34:37,120 --> 00:34:39,530 So we can of course go back to using just this code, 631 00:34:39,530 --> 00:34:41,610 but that's not gonna be necessary. 632 00:34:41,610 --> 00:34:45,840 Of course, we can just go back and use this code right here 633 00:34:47,850 --> 00:34:49,390 and take out this one. 634 00:34:49,390 --> 00:34:54,340 So this was just, yet another use case of the reduced method 635 00:34:54,340 --> 00:34:56,490 that I wanted to show you here. 636 00:34:56,490 --> 00:35:00,920 So that we can create even the strings using reduce. 637 00:35:00,920 --> 00:35:01,753 All right. 638 00:35:01,753 --> 00:35:05,030 So I'm leaving this here again for you to compare, 639 00:35:05,030 --> 00:35:09,960 give it a save and I think that with this, we are done. 640 00:35:09,960 --> 00:35:14,590 So we transformed our initial code, which looked pretty bad 641 00:35:14,590 --> 00:35:17,160 first by applying some general guidelines 642 00:35:17,160 --> 00:35:20,410 for a modern and clean code. 643 00:35:20,410 --> 00:35:24,430 And then now in this video, we made our code functional 644 00:35:24,430 --> 00:35:27,530 and took out all of the impure functions 645 00:35:27,530 --> 00:35:30,930 and side effects and data mutations. 646 00:35:30,930 --> 00:35:33,640 So a lot cleaner, a lot nicer. 647 00:35:33,640 --> 00:35:38,173 And also if you ask me a lot more professional looking code. 648 00:35:39,010 --> 00:35:42,410 Now, actually this function here is not pure. 649 00:35:42,410 --> 00:35:44,210 Let me just write that here. 650 00:35:44,210 --> 00:35:48,820 So it's an impure function because it creates a side effect 651 00:35:48,820 --> 00:35:51,910 by doing this console dot log here. 652 00:35:51,910 --> 00:35:53,240 Okay? 653 00:35:53,240 --> 00:35:56,370 So in fact, all console dot logs here, 654 00:35:56,370 --> 00:35:59,760 are of course impure because they do something. 655 00:35:59,760 --> 00:36:03,140 So they create something here in the console in this case. 656 00:36:03,140 --> 00:36:05,810 So they create input output. 657 00:36:05,810 --> 00:36:09,960 But of course, any program needs to have some side-effects 658 00:36:09,960 --> 00:36:11,040 because otherwise, 659 00:36:11,040 --> 00:36:13,970 what is the point of the program in the first place? 660 00:36:13,970 --> 00:36:16,990 If we didn't have all of these console dot logs, 661 00:36:16,990 --> 00:36:18,950 how would we even know that the program 662 00:36:18,950 --> 00:36:21,120 is running in the first place? 663 00:36:21,120 --> 00:36:21,953 All right? 664 00:36:21,953 --> 00:36:23,960 It would not be useful at all. 665 00:36:23,960 --> 00:36:27,770 And so, as I said, we always need some side effects, 666 00:36:27,770 --> 00:36:29,470 but in functional programming, 667 00:36:29,470 --> 00:36:33,490 we try to push these side effects as far to the edge. 668 00:36:33,490 --> 00:36:37,040 So as far to the end of our program as possible. 669 00:36:37,040 --> 00:36:39,890 So without having them all over the place, 670 00:36:39,890 --> 00:36:41,960 polluting our application. 671 00:36:41,960 --> 00:36:45,960 Now this, kind of mini project here is of course, 672 00:36:45,960 --> 00:36:48,410 very far from being complete. 673 00:36:48,410 --> 00:36:49,490 And if you wish 674 00:36:49,490 --> 00:36:52,480 you can of course develop this a lot further. 675 00:36:52,480 --> 00:36:56,160 For example, you can add a function for adding the income, 676 00:36:56,160 --> 00:36:58,080 or you can also create functions 677 00:36:58,080 --> 00:37:02,110 for calculating the total expenses and incomes, 678 00:37:02,110 --> 00:37:03,510 the overall budget, 679 00:37:03,510 --> 00:37:07,260 how much the expenses are in percentage of the income 680 00:37:07,260 --> 00:37:09,130 and so on and so forth. 681 00:37:09,130 --> 00:37:11,810 But I will leave it like this here, 682 00:37:11,810 --> 00:37:14,380 because again, this is enough for us now. 683 00:37:14,380 --> 00:37:17,710 And our code looks pretty professional as it is. 684 00:37:17,710 --> 00:37:21,860 Just keep in mind again, that these are more like guidelines 685 00:37:21,860 --> 00:37:24,320 and not really hard rules. 686 00:37:24,320 --> 00:37:26,570 So large applications, 687 00:37:26,570 --> 00:37:30,240 they are very hard to make 100% functional. 688 00:37:30,240 --> 00:37:32,590 And that's absolutely okay. 689 00:37:32,590 --> 00:37:35,360 So actually right in the next project, 690 00:37:35,360 --> 00:37:38,350 we will already break many of these rules. 691 00:37:38,350 --> 00:37:40,080 And again, that's okay. 692 00:37:40,080 --> 00:37:42,060 It's not a big problem. 693 00:37:42,060 --> 00:37:46,380 As long as we try to still keep some of these principles 694 00:37:46,380 --> 00:37:49,830 in some of the places we're already making our code 695 00:37:49,830 --> 00:37:52,323 a lot better and a lot more professional. 696 00:37:53,703 --> 00:37:54,536 Okay. 697 00:37:54,536 --> 00:37:57,990 And with that being said, you're now ready to go build 698 00:37:57,990 --> 00:38:02,520 the biggest and kind of the final project of this course 699 00:38:02,520 --> 00:38:03,970 in the next section. 700 00:38:03,970 --> 00:38:06,773 And so I really hope to see you there soon.