WEBVTT 1 00:00:01.290 --> 00:00:05.100 Welcome back to continuing to fix the code 2 00:00:05.100 --> 00:00:08.640 that we started to work on a bit earlier. 3 00:00:08.640 --> 00:00:11.400 And so in this lecture, we're gonna focus on 4 00:00:11.400 --> 00:00:15.480 some of the functional and declarative principles 5 00:00:15.480 --> 00:00:18.183 that we learned about in the last video. 6 00:00:19.920 --> 00:00:22.950 And we're gonna focus on three big areas 7 00:00:22.950 --> 00:00:26.340 of functional JavaScript, just as we talked about 8 00:00:26.340 --> 00:00:27.750 in the last lecture. 9 00:00:27.750 --> 00:00:30.240 So that's first immutability, 10 00:00:30.240 --> 00:00:33.570 second, side effects and pure functions, 11 00:00:33.570 --> 00:00:38.340 and third, making data transformations using pure functions 12 00:00:38.340 --> 00:00:42.060 such as map, filter, and reduce. 13 00:00:42.060 --> 00:00:45.330 And let's actually start with immutability 14 00:00:45.330 --> 00:00:48.120 because in JavaScript there's actually a way 15 00:00:48.120 --> 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.480 And so what we can do is to call the function Object.freeze. 20 00:01:09.090 --> 00:01:12.540 Then in that function we pass in the object 21 00:01:12.540 --> 00:01:15.063 that we want to make immutable, basically. 22 00:01:16.860 --> 00:01:20.970 So by doing this, spending limits is now immutable, 23 00:01:20.970 --> 00:01:23.220 which means that we can no longer 24 00:01:23.220 --> 00:01:26.100 put any new properties into it. 25 00:01:26.100 --> 00:01:28.950 So let me show that to you. 26 00:01:28.950 --> 00:01:31.620 But actually, this works best in strict mode, 27 00:01:31.620 --> 00:01:35.250 which I'm noticing here is actually not activated 28 00:01:35.250 --> 00:01:36.453 in this script. 29 00:01:39.120 --> 00:01:42.273 But we already know how to do that, right? 30 00:01:43.205 --> 00:01:44.250 And so let's see what happens 31 00:01:44.250 --> 00:01:49.250 if we try to add a new property to spending limits. 32 00:01:49.740 --> 00:01:52.293 Let's say we want to add Jay actually, 33 00:01:53.148 --> 00:01:54.690 'cause we have him down here. 34 00:01:54.690 --> 00:01:58.290 And so let's say we want to actually allow him now 35 00:01:58.290 --> 00:01:59.960 to spend something as well. 36 00:01:59.960 --> 00:02:03.783 So let's say 200, let's give it a save. 37 00:02:04.950 --> 00:02:09.630 And if we now check out this object, 38 00:02:09.630 --> 00:02:13.980 then you see that it didn't change, right? 39 00:02:13.980 --> 00:02:17.850 And so that is Object.freeze for you. 40 00:02:17.850 --> 00:02:20.870 So whatever we try to add now to this object 41 00:02:20.870 --> 00:02:24.303 is not going to work because it has been freezed. 42 00:02:25.950 --> 00:02:29.670 So let's do the same with this one here, 43 00:02:29.670 --> 00:02:33.780 because in the end, an array is also just an object, right? 44 00:02:33.780 --> 00:02:38.073 And so we can also do Object.freeze on arrays. 45 00:02:40.260 --> 00:02:41.523 Just like this. 46 00:02:42.360 --> 00:02:46.290 And now, we actually already start running into trouble 47 00:02:46.290 --> 00:02:50.220 because down here we are trying to push something 48 00:02:50.220 --> 00:02:53.910 into this array, which is now no longer possible 49 00:02:53.910 --> 00:02:58.910 because again we made it immutable by using Object.freeze. 50 00:02:58.920 --> 00:03:00.180 So right out of the gate, 51 00:03:00.180 --> 00:03:03.390 this code here is now no longer working. 52 00:03:03.390 --> 00:03:06.423 Now, I actually wanted to show something to you, 53 00:03:07.350 --> 00:03:09.720 so let me remove that, 54 00:03:09.720 --> 00:03:14.643 but there's probably still gonna be an error down here. 55 00:03:16.020 --> 00:03:17.280 Well, actually not. 56 00:03:17.280 --> 00:03:19.350 And yeah, there's a reason for that 57 00:03:19.350 --> 00:03:22.440 which I'm gonna describe now. 58 00:03:22.440 --> 00:03:25.890 So you saw that we can not add new elements 59 00:03:25.890 --> 00:03:27.930 to this object now, right? 60 00:03:27.930 --> 00:03:31.500 So that was the reason for the error that we just saw here. 61 00:03:31.500 --> 00:03:35.640 However, Object.freeze here basically only freezes 62 00:03:35.640 --> 00:03:38.220 the first level of the object. 63 00:03:38.220 --> 00:03:41.400 So it's not a so-called deep freeze 64 00:03:41.400 --> 00:03:46.320 because we can still change objects inside of the object. 65 00:03:46.320 --> 00:03:49.847 So for example, I can do budget[0].value, 66 00:03:57.360 --> 00:04:00.840 I can set it to whatever I want. 67 00:04:00.840 --> 00:04:03.570 And so if we see now the result here, 68 00:04:03.570 --> 00:04:07.380 you see that the value did indeed change, alright? 69 00:04:07.380 --> 00:04:11.953 What I cannot do is to add a completely new element. 70 00:04:13.800 --> 00:04:18.077 So I cannot say, let's say [9] = 'jonas'. 71 00:04:20.190 --> 00:04:22.050 So that is not going to work. 72 00:04:22.050 --> 00:04:24.663 So you see nothing was added here now. 73 00:04:27.390 --> 00:04:28.223 Alright? 74 00:04:28.223 --> 00:04:30.090 So that's just something to keep in mind 75 00:04:30.090 --> 00:04:32.910 when you use Object.freeze. 76 00:04:32.910 --> 00:04:36.150 Now, there are again third-party libraries 77 00:04:36.150 --> 00:04:38.430 which implement a deep freeze, 78 00:04:38.430 --> 00:04:40.980 but I'm not gonna go that way here 79 00:04:40.980 --> 00:04:44.040 in this small and simple example. 80 00:04:44.040 --> 00:04:48.123 Let's just take out this one here and then let's keep going. 81 00:04:49.140 --> 00:04:50.073 All right. 82 00:04:51.270 --> 00:04:52.740 So let's put this back 83 00:04:52.740 --> 00:04:55.350 and that will then bring back or error. 84 00:04:55.350 --> 00:04:58.890 And so now we will need to fix this function. 85 00:04:58.890 --> 00:05:00.960 So how do we fix this function 86 00:05:00.960 --> 00:05:05.130 and why does it create the error in the first place? 87 00:05:05.130 --> 00:05:09.360 So the problem is that right now, this function addExpense 88 00:05:09.360 --> 00:05:13.620 is trying to mutate this outside object. 89 00:05:13.620 --> 00:05:16.230 So in other words, according to what we learned 90 00:05:16.230 --> 00:05:20.040 in the last lecture is that this function right now 91 00:05:20.040 --> 00:05:23.010 has a side effect, right? 92 00:05:23.010 --> 00:05:26.040 So remember that a side effect basically means 93 00:05:26.040 --> 00:05:29.940 that something outside of a function is manipulated 94 00:05:29.940 --> 00:05:32.520 or that the function does something 95 00:05:32.520 --> 00:05:37.020 other than simply returning a value, right? 96 00:05:37.020 --> 00:05:41.340 And so a function that has or that produces side effects 97 00:05:41.340 --> 00:05:43.980 is called an impure function. 98 00:05:43.980 --> 00:05:47.730 So this function addExpense right now is an impure function 99 00:05:47.730 --> 00:05:52.730 because it does attempt to manipulate and to mutate 100 00:05:53.160 --> 00:05:56.880 this object that is located outside of it. 101 00:05:56.880 --> 00:05:59.520 So how do we fix that? 102 00:05:59.520 --> 00:06:02.880 Well, first of all, we should always pass all the data 103 00:06:02.880 --> 00:06:06.000 that the function depends on into the function 104 00:06:06.000 --> 00:06:10.290 so that it doesn't have to reach into the outer scope. 105 00:06:10.290 --> 00:06:12.480 So that's the first good practice. 106 00:06:12.480 --> 00:06:15.660 And then, of course, the function should not change 107 00:06:15.660 --> 00:06:17.430 any of these values. 108 00:06:17.430 --> 00:06:20.400 So in other words, it should not mutate them. 109 00:06:20.400 --> 00:06:21.660 And that's the whole reason 110 00:06:21.660 --> 00:06:24.540 why we made this object here immutable, 111 00:06:24.540 --> 00:06:29.540 just so we cannot by accident mutate this object, right? 112 00:06:29.670 --> 00:06:33.750 So remember that the solution to that is to create a copy 113 00:06:33.750 --> 00:06:37.230 and then return that copy of the state. 114 00:06:37.230 --> 00:06:39.243 So of the data, right? 115 00:06:40.080 --> 00:06:42.360 So I just said a lot of stuff. 116 00:06:42.360 --> 00:06:46.710 So let's put all of that into practice here right now. 117 00:06:46.710 --> 00:06:48.600 So the first thing that I'm gonna do 118 00:06:48.600 --> 00:06:51.820 is to pass in a variable called state 119 00:06:53.131 --> 00:06:57.210 and then also the limits here, okay? 120 00:06:57.210 --> 00:07:01.050 So this state here will be the budget object, 121 00:07:01.050 --> 00:07:02.670 and then here the limits 122 00:07:02.670 --> 00:07:06.300 is, of course, going to be the spending limits. 123 00:07:06.300 --> 00:07:08.970 And so I will pass in all of that here 124 00:07:08.970 --> 00:07:11.013 in all of the three function calls. 125 00:07:13.890 --> 00:07:18.243 So budget and spending limits. 126 00:07:19.740 --> 00:07:22.440 So that, of course, alone does not fix the error, 127 00:07:22.440 --> 00:07:24.573 but we are working in the right direction. 128 00:07:26.010 --> 00:07:27.030 Okay? 129 00:07:27.030 --> 00:07:30.030 Now, I said in the last lecture 130 00:07:30.030 --> 00:07:32.640 or in one of the previous ones 131 00:07:32.640 --> 00:07:35.880 that we should not pass more than three arguments 132 00:07:35.880 --> 00:07:37.500 into a function. 133 00:07:37.500 --> 00:07:40.680 Now, in this case, here we actually have five parameters, 134 00:07:40.680 --> 00:07:43.800 but, well, sometimes it's not a big deal 135 00:07:43.800 --> 00:07:45.900 to break those rules. 136 00:07:45.900 --> 00:07:48.420 We could also pass in simply 137 00:07:48.420 --> 00:07:52.050 one object of options, basically, 138 00:07:52.050 --> 00:07:53.820 but let's keep it simple here. 139 00:07:53.820 --> 00:07:57.783 I'm not into the mood of changing all of these inputs here. 140 00:07:58.740 --> 00:07:59.573 All right? 141 00:07:59.573 --> 00:08:01.413 So this is just fine here. 142 00:08:02.340 --> 00:08:07.170 Then, next up, here we are clearly manipulating 143 00:08:07.170 --> 00:08:08.880 the user variable. 144 00:08:08.880 --> 00:08:10.833 So the user argument in this case. 145 00:08:11.910 --> 00:08:14.790 And so as we learned in the last video, 146 00:08:14.790 --> 00:08:18.300 we should avoid these data mutations whenever possible. 147 00:08:18.300 --> 00:08:20.460 And so let's instead simply create 148 00:08:20.460 --> 00:08:22.953 a new variable right here. 149 00:08:25.320 --> 00:08:27.940 So let's call this one here cleanUser 150 00:08:30.330 --> 00:08:33.330 because we are basically cleaning it. 151 00:08:33.330 --> 00:08:36.480 This is a common terminology that we use. 152 00:08:36.480 --> 00:08:40.260 So this is the whole reason why this Matilda here, 153 00:08:40.260 --> 00:08:43.590 even with the capital M still works. 154 00:08:43.590 --> 00:08:44.423 Okay? 155 00:08:44.423 --> 00:08:46.350 So I did mention that in the previous lecture 156 00:08:46.350 --> 00:08:48.060 where we worked about this, 157 00:08:48.060 --> 00:08:51.330 but without this piece of code, it wouldn't work 158 00:08:51.330 --> 00:08:53.520 because Matilda here is uppercase, 159 00:08:53.520 --> 00:08:56.760 but here in the object it is lowercase. 160 00:08:56.760 --> 00:08:58.260 And so with the uppercase, 161 00:08:58.260 --> 00:09:00.510 it would not be found here in the object 162 00:09:00.510 --> 00:09:02.640 because this here is lowercase. 163 00:09:02.640 --> 00:09:04.500 And so that's, of course, different. 164 00:09:04.500 --> 00:09:08.460 And so here we will always convert everything to lowercase 165 00:09:08.460 --> 00:09:11.490 so that it then corresponds to the object keys 166 00:09:11.490 --> 00:09:12.423 that we have here. 167 00:09:14.400 --> 00:09:17.523 So this one here is from before, 168 00:09:18.570 --> 00:09:21.510 let's actually put it here where it belongs to. 169 00:09:21.510 --> 00:09:25.503 So that was the alternative way of getting the limit. 170 00:09:28.410 --> 00:09:33.410 Then here we need to use that cleanUser at the same here. 171 00:09:34.620 --> 00:09:36.480 So we still want this to be called user. 172 00:09:36.480 --> 00:09:39.450 So here we need to go back to saying user 173 00:09:39.450 --> 00:09:42.633 should be equal to the cleanUser. 174 00:09:43.470 --> 00:09:44.303 Okay? 175 00:09:44.303 --> 00:09:47.490 So we did most of the work here, 176 00:09:47.490 --> 00:09:50.160 but now, actually, comes the main part. 177 00:09:50.160 --> 00:09:52.860 And again, that is that we want to replace 178 00:09:52.860 --> 00:09:57.860 this manipulating of the object by creating a new object 179 00:09:58.020 --> 00:10:00.543 based on the state that we receive. 180 00:10:02.100 --> 00:10:03.240 All right? 181 00:10:03.240 --> 00:10:06.150 So let's get rid of this code here. 182 00:10:06.150 --> 00:10:08.910 And instead, what do we want to do? 183 00:10:08.910 --> 00:10:13.910 Well, we basically want to return an array like this here, 184 00:10:14.130 --> 00:10:17.460 but simply with one more object. 185 00:10:17.460 --> 00:10:21.420 So we learned already how to do that actually previously, 186 00:10:21.420 --> 00:10:23.133 and it's not very difficult. 187 00:10:24.030 --> 00:10:27.840 So let's just say we want to return then an empty array, 188 00:10:27.840 --> 00:10:31.410 and then we use the spread operator to put all the elements 189 00:10:31.410 --> 00:10:33.840 of the state in there. 190 00:10:33.840 --> 00:10:38.580 And so this effectively creates a copy of this state array. 191 00:10:38.580 --> 00:10:40.710 Remember how we did that earlier? 192 00:10:40.710 --> 00:10:44.190 And so this is exactly the same technique right here. 193 00:10:44.190 --> 00:10:46.620 And now, all we need to do is to then add 194 00:10:46.620 --> 00:10:48.993 a new element right after this one. 195 00:10:50.220 --> 00:10:52.740 And that element is gonna be this object 196 00:10:52.740 --> 00:10:55.863 which looks exactly like what we had before. 197 00:10:57.750 --> 00:10:58.583 Alright? 198 00:10:59.644 --> 00:11:02.193 And so, now, we can get rid of this. 199 00:11:06.420 --> 00:11:07.500 Alright. 200 00:11:07.500 --> 00:11:11.160 So right now, calling the addExpense function 201 00:11:11.160 --> 00:11:16.160 will actually no longer mutate the budget object, right? 202 00:11:17.040 --> 00:11:20.010 And so, therefore, if you want to then do something 203 00:11:20.010 --> 00:11:21.510 with the new budget, 204 00:11:21.510 --> 00:11:24.123 we actually need to store that somewhere. 205 00:11:25.170 --> 00:11:28.467 So let's say newBudget1 is equal to this, 206 00:11:32.340 --> 00:11:35.193 then let's quickly log it to the console as well. 207 00:11:38.010 --> 00:11:42.870 And so let's see, and here we are. 208 00:11:42.870 --> 00:11:44.550 So here is pizza. 209 00:11:44.550 --> 00:11:48.720 So that's just the expense that we added here previously. 210 00:11:48.720 --> 00:11:49.740 Great. 211 00:11:49.740 --> 00:11:54.740 But now, what happens if this here turns out to be false? 212 00:11:55.710 --> 00:11:58.950 So basically if this code here does not run. 213 00:11:58.950 --> 00:11:59.880 Well, let's try that 214 00:11:59.880 --> 00:12:03.753 by making this pizza here ridiculously expensive. 215 00:12:04.860 --> 00:12:08.820 And so you see that now we actually get undefined, 216 00:12:08.820 --> 00:12:11.520 so that's not good, right? 217 00:12:11.520 --> 00:12:14.583 And so what do you think we should return in this case? 218 00:12:15.570 --> 00:12:19.710 Well, what we have to do is to return the original state, 219 00:12:19.710 --> 00:12:23.520 so the original budget that we got in, right? 220 00:12:23.520 --> 00:12:26.310 And so in that case, the addExpense function 221 00:12:26.310 --> 00:12:28.980 will always return something. 222 00:12:28.980 --> 00:12:31.650 So it either returns the original budget 223 00:12:31.650 --> 00:12:36.390 or it returns the one with the new expense added to it. 224 00:12:36.390 --> 00:12:37.500 Right? 225 00:12:37.500 --> 00:12:39.660 So let's clean this up here a little bit 226 00:12:39.660 --> 00:12:43.260 and simply use the ternary operator here 227 00:12:43.260 --> 00:12:47.130 because remember that is a lot more declarative 228 00:12:47.130 --> 00:12:50.403 dandy more old school if-else statement. 229 00:12:51.540 --> 00:12:53.610 So here, let's take away the return 230 00:12:53.610 --> 00:12:56.820 and actually put it here in front. 231 00:12:56.820 --> 00:13:00.270 So here we will now decide what is gonna be returned. 232 00:13:00.270 --> 00:13:05.270 So in this case, what we will return is this new state, 233 00:13:05.940 --> 00:13:07.650 so this new budget, 234 00:13:07.650 --> 00:13:11.643 or otherwise we will just return the original one. 235 00:13:12.990 --> 00:13:15.360 Now, we got some error somewhere. 236 00:13:15.360 --> 00:13:17.730 Ah, it's this one. 237 00:13:17.730 --> 00:13:19.560 And here we go. 238 00:13:19.560 --> 00:13:21.750 So now, we no longer got our error 239 00:13:21.750 --> 00:13:26.010 and we are returning the original budget here. 240 00:13:26.010 --> 00:13:29.553 And if we put it back to a normal price, 241 00:13:30.960 --> 00:13:33.120 then here we go. 242 00:13:33.120 --> 00:13:37.350 So here is our object, our updated expense. 243 00:13:37.350 --> 00:13:41.460 So our updated budget, but in a functional way. 244 00:13:41.460 --> 00:13:43.050 So right now, this function here 245 00:13:43.050 --> 00:13:45.510 does no longer produce side effects. 246 00:13:45.510 --> 00:13:49.170 It is now officially a pure function. 247 00:13:49.170 --> 00:13:50.670 Let's actually write that here 248 00:13:54.840 --> 00:13:56.940 because we're really happy about this now. 249 00:14:00.510 --> 00:14:04.020 Alright, now, what about this one here? 250 00:14:04.020 --> 00:14:06.153 So the next addExpense call. 251 00:14:07.050 --> 00:14:10.740 So do you think we still should pass budget 252 00:14:10.740 --> 00:14:12.660 into this one here? 253 00:14:12.660 --> 00:14:15.360 Well, not really, right? 254 00:14:15.360 --> 00:14:19.830 Because this one will then again act on the original budget. 255 00:14:19.830 --> 00:14:23.040 And that doesn't really make a lot of sense, right? 256 00:14:23.040 --> 00:14:25.890 Because this previous expense that we just added 257 00:14:25.890 --> 00:14:28.800 is not gonna be in there, is it? 258 00:14:28.800 --> 00:14:30.650 So let me show that to you, actually. 259 00:14:32.640 --> 00:14:36.223 Put that down here and create a new one. 260 00:14:44.850 --> 00:14:46.113 So let's see. 261 00:14:47.190 --> 00:14:50.460 And so here now we have going to the movies, 262 00:14:50.460 --> 00:14:55.110 but indeed, we don't have the pizza here before. 263 00:14:55.110 --> 00:14:57.150 And that makes sense, right? 264 00:14:57.150 --> 00:15:00.330 Because we are again using the original budget, 265 00:15:00.330 --> 00:15:05.280 which was never mutated by the previous addExpense call. 266 00:15:05.280 --> 00:15:06.270 Right? 267 00:15:06.270 --> 00:15:08.340 And so what we have to do instead 268 00:15:08.340 --> 00:15:12.540 is to hear pass in the result of the previous operation. 269 00:15:12.540 --> 00:15:14.180 So that's newBudget1. 270 00:15:16.500 --> 00:15:18.780 So if we see now, 271 00:15:18.780 --> 00:15:23.780 now it will have indeed pizza and going to movies. 272 00:15:23.820 --> 00:15:25.920 And then, of course, the same thing here 273 00:15:25.920 --> 00:15:30.360 for the final part of the puzzle. 274 00:15:30.360 --> 00:15:33.810 So the final expense, the third one. 275 00:15:33.810 --> 00:15:36.540 And here then we again use the previous one. 276 00:15:36.540 --> 00:15:37.653 So that's newBudget2. 277 00:15:44.100 --> 00:15:46.560 But now, this one here should be the same as before 278 00:15:46.560 --> 00:15:50.283 because, of course, Jay is not allowed to add anything. 279 00:15:52.080 --> 00:15:53.610 Right? 280 00:15:53.610 --> 00:15:57.363 So only pizza and going to movies has been added there. 281 00:15:58.860 --> 00:16:00.420 Let's make this one here a bit smaller 282 00:16:00.420 --> 00:16:02.883 so that it fits in one line. 283 00:16:03.870 --> 00:16:04.743 Well, it didn't. 284 00:16:05.790 --> 00:16:08.013 All right, so let's just leave it like that. 285 00:16:09.450 --> 00:16:14.370 And yeah, so that first part here is now fixed. 286 00:16:14.370 --> 00:16:16.320 Now, in the real-world 287 00:16:16.320 --> 00:16:19.290 we would use something called composing 288 00:16:19.290 --> 00:16:21.390 and a technique called currying 289 00:16:21.390 --> 00:16:26.390 to basically create this chain of operations here. 290 00:16:26.850 --> 00:16:30.060 So here we need all of these intermediate variables 291 00:16:30.060 --> 00:16:32.460 to create a new budget, right? 292 00:16:32.460 --> 00:16:36.000 So we call this once store the result in a new variable. 293 00:16:36.000 --> 00:16:39.000 Then the next call we use that previous variable. 294 00:16:39.000 --> 00:16:40.710 And then, again, in the next call 295 00:16:40.710 --> 00:16:43.410 we use that previous variable again. 296 00:16:43.410 --> 00:16:46.740 So this is kind of a chain of addExpenses 297 00:16:46.740 --> 00:16:49.170 and it would be nice to always automatically 298 00:16:49.170 --> 00:16:52.800 use the previous result for the next operation. 299 00:16:52.800 --> 00:16:57.030 And so again, in a real-world, big functional application, 300 00:16:57.030 --> 00:17:00.510 we would use composing to create one function 301 00:17:00.510 --> 00:17:04.020 which will then perform all of these operations at once. 302 00:17:04.020 --> 00:17:07.410 But that would really be outside the scope of this course 303 00:17:07.410 --> 00:17:11.520 because that is a whole big world on itself. 304 00:17:11.520 --> 00:17:14.340 So here we are just trying to implement 305 00:17:14.340 --> 00:17:17.700 some of these techniques and some of these concepts 306 00:17:17.700 --> 00:17:20.850 just so you see how they work, and that they exist, 307 00:17:20.850 --> 00:17:22.650 and that they are important. 308 00:17:22.650 --> 00:17:25.050 And again, this becomes especially important 309 00:17:25.050 --> 00:17:27.840 once you start using one of the frameworks out there, 310 00:17:27.840 --> 00:17:30.390 just like react or redux, 311 00:17:30.390 --> 00:17:34.740 which rely heavily on concepts such as immutability 312 00:17:34.740 --> 00:17:36.630 and pure functions. 313 00:17:36.630 --> 00:17:40.080 But anyway, let's now move on here in our code. 314 00:17:40.080 --> 00:17:43.650 And now that we already talked so much about side effects, 315 00:17:43.650 --> 00:17:46.380 and immutability, and pure functions, 316 00:17:46.380 --> 00:17:49.800 let's turn our attention to data transformations 317 00:17:49.800 --> 00:17:51.210 here in this case 318 00:17:51.210 --> 00:17:56.210 because as you see here we have this for-of loop 319 00:17:56.400 --> 00:17:57.900 which we can easily transform 320 00:17:57.900 --> 00:18:01.920 into a functional function basically. 321 00:18:01.920 --> 00:18:06.900 So we have this loop here which loops over all the entries 322 00:18:06.900 --> 00:18:09.000 in the budget, right? 323 00:18:09.000 --> 00:18:11.280 So basically, which loops over this array, 324 00:18:11.280 --> 00:18:14.400 and in each iteration the current one 325 00:18:14.400 --> 00:18:17.070 is one of these entry objects. 326 00:18:17.070 --> 00:18:21.010 And then, in this loop, it will update each of the objects 327 00:18:21.960 --> 00:18:25.920 to contain the flag attribute, basically, 328 00:18:25.920 --> 00:18:29.010 whenever the value is over the limit. 329 00:18:29.010 --> 00:18:31.740 So that happened for example here. 330 00:18:31.740 --> 00:18:34.740 And so we got flag set to limit, 331 00:18:34.740 --> 00:18:37.380 remember that from the previous lecture. 332 00:18:37.380 --> 00:18:41.160 But, of course, this function is again an impure function 333 00:18:41.160 --> 00:18:45.993 because it does manipulate the object itself, right? 334 00:18:46.980 --> 00:18:50.250 So in this case, it works with a budget 335 00:18:50.250 --> 00:18:53.820 but the same would be true if we wrote newBudget3 here, 336 00:18:55.860 --> 00:18:59.400 which was our latest and updated budget. 337 00:18:59.400 --> 00:19:01.950 So this one here actually comes from line 65, 338 00:19:01.950 --> 00:19:03.630 so it's this one. 339 00:19:03.630 --> 00:19:07.020 So what I would be interested here is this. 340 00:19:07.020 --> 00:19:08.733 So let's move that down here. 341 00:19:09.930 --> 00:19:11.973 And so here indeed we will now see, 342 00:19:15.510 --> 00:19:17.970 yeah, so here is flag set to limit. 343 00:19:17.970 --> 00:19:22.650 And so we violated the principle of immutability here. 344 00:19:22.650 --> 00:19:23.880 Right? 345 00:19:23.880 --> 00:19:26.580 And therefore, let's transform this function here 346 00:19:26.580 --> 00:19:28.743 into a pure function as well. 347 00:19:29.700 --> 00:19:33.090 So again, we will want to pass in all the data 348 00:19:33.090 --> 00:19:35.010 that the function depends on. 349 00:19:35.010 --> 00:19:37.440 And so that's, again, well, in this case, 350 00:19:37.440 --> 00:19:38.613 it is Budget3. 351 00:19:41.002 --> 00:19:42.169 So newBudget3. 352 00:19:43.230 --> 00:19:48.230 And also, we actually need the limit from the outside. 353 00:19:49.110 --> 00:19:53.340 And actually, we skipped this function here, 354 00:19:53.340 --> 00:19:56.670 but let me come back to that in a minute. 355 00:19:56.670 --> 00:20:00.063 So let's just pass in the spending limits here as well. 356 00:20:01.110 --> 00:20:03.693 So let's go back up here. 357 00:20:04.560 --> 00:20:06.840 So we passed in the spending limits here 358 00:20:06.840 --> 00:20:11.840 into the addExpense function, but we actually never used it. 359 00:20:13.443 --> 00:20:14.820 And so the reason for that is, 360 00:20:14.820 --> 00:20:18.870 is that getLimit here actually uses the spending limits 361 00:20:18.870 --> 00:20:20.460 from the outer scope. 362 00:20:20.460 --> 00:20:24.090 And that's something that we do not want, right? 363 00:20:24.090 --> 00:20:27.720 And therefore, let's add the limits here 364 00:20:27.720 --> 00:20:31.710 as another parameter, limits and user. 365 00:20:31.710 --> 00:20:36.710 And then here I can just call it limits like this. 366 00:20:36.870 --> 00:20:41.853 And then here I pass the limits in, alright? 367 00:20:44.010 --> 00:20:45.450 So it works just like before, 368 00:20:45.450 --> 00:20:47.940 but now, this function here no longer depends 369 00:20:47.940 --> 00:20:50.370 on any external variable. 370 00:20:50.370 --> 00:20:53.730 It can do all its work without having to look up 371 00:20:53.730 --> 00:20:54.783 in the scope chain. 372 00:20:56.910 --> 00:21:01.803 Now, okay, so let's do the same here as well. 373 00:21:03.960 --> 00:21:07.470 So here, we want to then receive a state, 374 00:21:07.470 --> 00:21:09.840 I'm gonna call it state to keep it neutral, 375 00:21:09.840 --> 00:21:11.340 just like before. 376 00:21:11.340 --> 00:21:14.700 And then calling it limits once again. 377 00:21:14.700 --> 00:21:18.480 So here again, we want to pass in limits 378 00:21:18.480 --> 00:21:20.343 and then the user itself. 379 00:21:21.600 --> 00:21:25.170 But now, let's then finally actually replace 380 00:21:25.170 --> 00:21:29.820 this entire loop and instead loop over the state 381 00:21:29.820 --> 00:21:33.180 using one of our data transformation functions. 382 00:21:33.180 --> 00:21:35.820 So what do we want to do here? 383 00:21:35.820 --> 00:21:39.180 Well, we want to basically keep an array 384 00:21:39.180 --> 00:21:42.690 of the same size here in the end, right? 385 00:21:42.690 --> 00:21:44.970 So in each of these objects, 386 00:21:44.970 --> 00:21:47.220 we basically just want to add a property, 387 00:21:47.220 --> 00:21:49.200 but that's all we want to do. 388 00:21:49.200 --> 00:21:51.420 We don't want to filter anything 389 00:21:51.420 --> 00:21:55.800 or we don't want to use reduce either, right? 390 00:21:55.800 --> 00:21:59.370 So it makes sense to use the map method here 391 00:21:59.370 --> 00:22:03.150 and map, remember, will create a brand new object. 392 00:22:03.150 --> 00:22:04.710 So brand new array. 393 00:22:04.710 --> 00:22:07.650 And so that's exactly what we want, right? 394 00:22:07.650 --> 00:22:11.160 So that's in the spirit of functional code 395 00:22:11.160 --> 00:22:13.020 and of immutability. 396 00:22:13.020 --> 00:22:17.310 So not mutating the state, but instead creating a new state 397 00:22:17.310 --> 00:22:19.053 based on the original one. 398 00:22:20.100 --> 00:22:23.370 And so in fact, this is then the state 399 00:22:23.370 --> 00:22:26.400 that we are going to return from this function, 400 00:22:26.400 --> 00:22:28.920 but let's not get ahead of ourselves 401 00:22:28.920 --> 00:22:32.853 and instead work here on this. 402 00:22:35.340 --> 00:22:37.590 So let's create a function block here 403 00:22:37.590 --> 00:22:40.470 and think about what we want to do here. 404 00:22:40.470 --> 00:22:43.080 So right now here inside of this callback, 405 00:22:43.080 --> 00:22:48.080 each entry is one of these objects, just like this, right? 406 00:22:48.840 --> 00:22:51.840 But of course, we still do not want to mutate 407 00:22:51.840 --> 00:22:55.140 any of these objects, right? 408 00:22:55.140 --> 00:22:58.590 Instead when this condition here is true, 409 00:22:58.590 --> 00:23:03.590 so when the value is less than the limit, 410 00:23:03.690 --> 00:23:06.390 then essentially we want to copy the object 411 00:23:06.390 --> 00:23:11.280 and add the new property onto that copy, right? 412 00:23:11.280 --> 00:23:14.730 So basically just like we did here, 413 00:23:14.730 --> 00:23:17.100 so the idea is the same. 414 00:23:17.100 --> 00:23:20.670 So here we copied the entire array 415 00:23:20.670 --> 00:23:22.710 and then added a new object. 416 00:23:22.710 --> 00:23:24.240 But here what we will do 417 00:23:24.240 --> 00:23:28.020 is to basically copy the entire entry object 418 00:23:28.020 --> 00:23:30.963 and then add the flag property to that. 419 00:23:32.130 --> 00:23:35.310 So that sounds a bit complicated, but trust me, 420 00:23:35.310 --> 00:23:37.470 it will all make sense. 421 00:23:37.470 --> 00:23:40.607 So let's copy this condition here, just like this, 422 00:23:44.040 --> 00:23:47.460 and then again making the code nicely declarative 423 00:23:47.460 --> 00:23:49.443 by using the ternary operator. 424 00:23:51.240 --> 00:23:53.820 So if this condition is true, 425 00:23:53.820 --> 00:23:56.970 so if the value is above the limit, 426 00:23:56.970 --> 00:24:01.247 then here we want to return the original object copied. 427 00:24:03.570 --> 00:24:08.100 So remember that this creates a copy and add a new property. 428 00:24:08.100 --> 00:24:10.293 And so that's flag: 'limit'. 429 00:24:13.980 --> 00:24:16.110 And otherwise, what we will want to do 430 00:24:16.110 --> 00:24:19.473 is simply return the original entry. 431 00:24:20.430 --> 00:24:22.410 And that's actually it. 432 00:24:22.410 --> 00:24:24.510 So let's just check out the result 433 00:24:24.510 --> 00:24:27.120 and then I will show it to you again. 434 00:24:27.120 --> 00:24:30.330 All right, so here now, of course, 435 00:24:30.330 --> 00:24:34.383 we need to again store the results into a variable. 436 00:24:35.400 --> 00:24:37.650 Let's call this one finalBudget 437 00:24:37.650 --> 00:24:40.533 because we will not create any new budget. 438 00:24:41.970 --> 00:24:44.163 And I'm then gonna log that here. 439 00:24:46.830 --> 00:24:51.003 And so let's see if we got the flag here. 440 00:24:52.200 --> 00:24:55.143 And indeed flag is set to limit. 441 00:24:56.040 --> 00:24:57.180 So that worked. 442 00:24:57.180 --> 00:25:01.650 And you see that we did not actually manipulate any object. 443 00:25:01.650 --> 00:25:04.590 All we did here was to create a copy 444 00:25:04.590 --> 00:25:08.010 and then add the property onto that copy. 445 00:25:08.010 --> 00:25:08.843 Right? 446 00:25:10.830 --> 00:25:14.040 Now, here you might not be used anymore 447 00:25:14.040 --> 00:25:16.710 to actually see the return here 448 00:25:16.710 --> 00:25:18.750 in the map callback function, 449 00:25:18.750 --> 00:25:22.323 but that's just because we have this function block here. 450 00:25:23.190 --> 00:25:24.023 Right? 451 00:25:24.023 --> 00:25:26.190 And so remember that in the map function, 452 00:25:26.190 --> 00:25:30.660 whatever is returned from the callback will be the element 453 00:25:30.660 --> 00:25:34.320 in the same position of the new array, right? 454 00:25:34.320 --> 00:25:37.230 So that's why we need the return here. 455 00:25:37.230 --> 00:25:40.500 But, of course, we could also completely simplify 456 00:25:40.500 --> 00:25:44.370 all of this here if we wanted to make it simpler. 457 00:25:44.370 --> 00:25:46.050 So let's take this 458 00:25:46.050 --> 00:25:48.840 and actually, transform it into an arrow function 459 00:25:48.840 --> 00:25:50.450 if you prefer that. 460 00:25:50.450 --> 00:25:53.550 So I will then leave these two here. 461 00:25:53.550 --> 00:25:57.750 So function and state, then let's say just like this, 462 00:25:57.750 --> 00:25:59.403 then we don't need the return. 463 00:26:01.054 --> 00:26:03.000 And here, we can get rid of the braces as well 464 00:26:03.000 --> 00:26:04.173 and of the return. 465 00:26:08.850 --> 00:26:11.193 Let's call this one here, two. 466 00:26:13.380 --> 00:26:16.743 And here we don't need that semicolon, I guess. 467 00:26:17.820 --> 00:26:19.050 And that's it. 468 00:26:19.050 --> 00:26:20.700 Now, we're ready to go. 469 00:26:20.700 --> 00:26:23.280 And this is basically the same function, 470 00:26:23.280 --> 00:26:27.060 just copy it or actually comment it out. 471 00:26:27.060 --> 00:26:30.870 So just in case you prefer this arrow function. 472 00:26:30.870 --> 00:26:33.660 So I hope that this made sense. 473 00:26:33.660 --> 00:26:37.260 What's really important to note here once more 474 00:26:37.260 --> 00:26:40.380 is that we transformed this function here 475 00:26:40.380 --> 00:26:44.250 into a pure function, which does not mutate anything 476 00:26:44.250 --> 00:26:48.750 because the map method here returns a brand new array. 477 00:26:48.750 --> 00:26:51.240 So we give this function an array 478 00:26:51.240 --> 00:26:53.400 and it will then create a new one 479 00:26:53.400 --> 00:26:56.730 simply by mapping over the original one, 480 00:26:56.730 --> 00:26:59.940 which again creates then a brand new one. 481 00:26:59.940 --> 00:27:01.980 And in each position of the array, 482 00:27:01.980 --> 00:27:06.660 we then either return a copy of the original entry 483 00:27:06.660 --> 00:27:08.850 plus the flag property, 484 00:27:08.850 --> 00:27:13.410 or simply we return the original entry as it was. 485 00:27:13.410 --> 00:27:18.270 And so with this, again, our function is nice and pure, 486 00:27:18.270 --> 00:27:20.550 and does not create any side effect, 487 00:27:20.550 --> 00:27:23.670 and does not manipulate anything. 488 00:27:23.670 --> 00:27:24.810 Nice. 489 00:27:24.810 --> 00:27:26.820 And maybe you're actually noticing 490 00:27:26.820 --> 00:27:30.060 that throughout most of the course. 491 00:27:30.060 --> 00:27:33.360 We actually kind of followed these principles already, 492 00:27:33.360 --> 00:27:35.580 but without calling it functional. 493 00:27:35.580 --> 00:27:39.570 And I remember especially the Bankist project, 494 00:27:39.570 --> 00:27:42.810 so in a section about a race. 495 00:27:42.810 --> 00:27:45.180 So in there, I told you a lot of times 496 00:27:45.180 --> 00:27:47.820 that we should always pass all the data that we need 497 00:27:47.820 --> 00:27:51.630 for a certain function to work right into that function. 498 00:27:51.630 --> 00:27:55.830 So that, again, it does not depend on any outside data 499 00:27:55.830 --> 00:27:58.380 because really you will see in practice 500 00:27:58.380 --> 00:27:59.970 that this makes it a lot easier 501 00:27:59.970 --> 00:28:02.940 to reason about the function itself. 502 00:28:02.940 --> 00:28:05.580 And so if you do that for all of your functions, 503 00:28:05.580 --> 00:28:07.860 then in the end, that will make your code 504 00:28:07.860 --> 00:28:12.450 a lot easier to understand and a lot more readable now. 505 00:28:12.450 --> 00:28:15.900 Okay, but with that being said, let's now move on here 506 00:28:15.900 --> 00:28:18.267 to our final function. 507 00:28:18.267 --> 00:28:21.570 And here, again, we have this for loop. 508 00:28:21.570 --> 00:28:23.280 And inside of that loop, 509 00:28:23.280 --> 00:28:27.720 we are actually constantly manipulating or mutating 510 00:28:27.720 --> 00:28:29.670 this output variable here. 511 00:28:29.670 --> 00:28:31.950 And that, of course, goes against 512 00:28:31.950 --> 00:28:34.620 the spirit of immutability. 513 00:28:34.620 --> 00:28:35.490 Right? 514 00:28:35.490 --> 00:28:37.140 So immutability is, of course, 515 00:28:37.140 --> 00:28:39.570 not just for objects and arrays, 516 00:28:39.570 --> 00:28:42.750 this also goes for more regular variables. 517 00:28:42.750 --> 00:28:44.730 And so in functional code, 518 00:28:44.730 --> 00:28:48.450 you will probably never see the let variable. 519 00:28:48.450 --> 00:28:51.633 So we're always trying to compute a variable, 520 00:28:52.650 --> 00:28:57.437 for example, based on methods like this one here, right? 521 00:28:58.590 --> 00:29:01.770 And so here we will actually be able to achieve 522 00:29:01.770 --> 00:29:03.210 something similar. 523 00:29:03.210 --> 00:29:04.980 So let's think together 524 00:29:04.980 --> 00:29:08.970 how we could create a string like this here 525 00:29:08.970 --> 00:29:13.350 simply based on pure and functional functions. 526 00:29:13.350 --> 00:29:17.250 So data transformation functions for arrays 527 00:29:17.250 --> 00:29:19.383 and also for strings, actually. 528 00:29:20.580 --> 00:29:22.170 Let's comment all of this out 529 00:29:22.170 --> 00:29:25.260 because, of course, it's gonna be a better, 530 00:29:25.260 --> 00:29:27.930 more declarative and functional way. 531 00:29:27.930 --> 00:29:30.690 So in the code that we had here before, 532 00:29:30.690 --> 00:29:32.700 of course, it was very imperative, 533 00:29:32.700 --> 00:29:35.790 we said create an empty variable, 534 00:29:35.790 --> 00:29:39.160 then we manually said that it should loop over 535 00:29:40.260 --> 00:29:42.930 all of the entries in the budget array. 536 00:29:42.930 --> 00:29:46.140 And then whenever we had a big expense, 537 00:29:46.140 --> 00:29:48.000 which is basically this one here, 538 00:29:48.000 --> 00:29:52.380 it should then add the emoji to the output variable here. 539 00:29:52.380 --> 00:29:55.620 So to this string, right? 540 00:29:55.620 --> 00:29:57.430 But if we really think about this, 541 00:29:57.430 --> 00:30:00.123 there is a better way to doing this. 542 00:30:02.970 --> 00:30:05.220 So this one here is called output, 543 00:30:05.220 --> 00:30:08.953 and I guess we should just actually call it bigExpenses. 544 00:30:09.840 --> 00:30:12.510 So you could have done that before. 545 00:30:12.510 --> 00:30:13.983 So giving it a better name. 546 00:30:15.540 --> 00:30:18.120 So what we really want to do, 547 00:30:18.120 --> 00:30:21.210 and this now, I think, requires a little bit more thinking 548 00:30:21.210 --> 00:30:25.530 on our part, but believe me, it's gonna be worth it. 549 00:30:25.530 --> 00:30:27.540 So what we really want to do here 550 00:30:27.540 --> 00:30:30.660 is not all of this imperative stuff. 551 00:30:30.660 --> 00:30:34.740 So what we want to do is actually just filter our array 552 00:30:34.740 --> 00:30:36.687 for these bigExpenses. 553 00:30:36.687 --> 00:30:39.360 And then, basically, for each of the results, 554 00:30:39.360 --> 00:30:41.940 all we want to do is to create a nice string 555 00:30:41.940 --> 00:30:43.653 containing only the emoji. 556 00:30:46.260 --> 00:30:48.510 So let's translate what we just said 557 00:30:48.510 --> 00:30:50.043 and starting with the filter. 558 00:30:52.110 --> 00:30:56.280 So entry and then here the condition 559 00:30:56.280 --> 00:30:58.320 is, of course, gonna be the same. 560 00:30:58.320 --> 00:31:03.320 So basically an expensive or a bigExpense. 561 00:31:05.490 --> 00:31:09.970 So let's start by logging this here 562 00:31:11.550 --> 00:31:16.050 just so we can see what we're doing, bigExpenses. 563 00:31:16.050 --> 00:31:18.750 And here we say that the state is not defined, 564 00:31:18.750 --> 00:31:23.070 and that's simply because I didn't pass it in yet. 565 00:31:23.070 --> 00:31:24.870 So just like before, of course, 566 00:31:24.870 --> 00:31:28.770 we want to make this function not to depend on any variable 567 00:31:28.770 --> 00:31:30.540 from the outside. 568 00:31:30.540 --> 00:31:34.543 That's how we pass it in here as finalBudget. 569 00:31:38.160 --> 00:31:39.933 So let's see what we have here. 570 00:31:40.920 --> 00:31:44.970 And indeed that is the New iPhone and Laptop, 571 00:31:44.970 --> 00:31:47.263 which are exactly our bigExpenses. 572 00:31:48.537 --> 00:31:50.250 And so, now, all we need to do 573 00:31:50.250 --> 00:31:53.370 is to get these emojis here out 574 00:31:53.370 --> 00:31:57.917 and then create a nice string based on the result, right? 575 00:31:59.460 --> 00:32:01.440 So we have now this array of two, 576 00:32:01.440 --> 00:32:06.180 and so we want to again create an array of two, 577 00:32:06.180 --> 00:32:08.580 but only with these emojis. 578 00:32:08.580 --> 00:32:10.983 So let's use map for that. 579 00:32:13.950 --> 00:32:15.910 So again, that is an entry 580 00:32:17.670 --> 00:32:20.883 and here we want the entry.description. 581 00:32:21.900 --> 00:32:24.270 And then just take the last two characters. 582 00:32:24.270 --> 00:32:27.453 So just like we did here before. 583 00:32:30.900 --> 00:32:32.160 All right? 584 00:32:32.160 --> 00:32:35.427 And now, we can just join that like this, 585 00:32:39.480 --> 00:32:40.800 as we had before. 586 00:32:40.800 --> 00:32:42.780 And there we go. 587 00:32:42.780 --> 00:32:46.230 So this here is essentially the functional version 588 00:32:46.230 --> 00:32:48.393 of just doing this here. 589 00:32:49.620 --> 00:32:53.490 So after this video, you can maybe take a better look 590 00:32:53.490 --> 00:32:57.630 and really compare these two things that we did here. 591 00:32:57.630 --> 00:33:00.870 Lemme just show you that we could also have done it 592 00:33:00.870 --> 00:33:01.890 in another way. 593 00:33:01.890 --> 00:33:04.260 So instead of map and join, 594 00:33:04.260 --> 00:33:07.533 we could have done it all in one go using reduce. 595 00:33:09.117 --> 00:33:11.430 And so once again, this is a nice use case 596 00:33:11.430 --> 00:33:15.690 of showing you a more advanced way of using reduce. 597 00:33:15.690 --> 00:33:18.450 So again, the use case of reduce 598 00:33:18.450 --> 00:33:21.900 is to basically take all the values in one array 599 00:33:21.900 --> 00:33:24.300 and create one value out of them. 600 00:33:24.300 --> 00:33:27.240 So reduce them all into just one. 601 00:33:27.240 --> 00:33:29.757 And in this case, what we want is our string. 602 00:33:29.757 --> 00:33:32.043 And so that's gonna be the accumulator. 603 00:33:33.450 --> 00:33:36.810 And then as always, we have the current value, 604 00:33:36.810 --> 00:33:39.660 then here a call back, and then the initial value, 605 00:33:39.660 --> 00:33:41.673 which is just gonna be an empty string. 606 00:33:42.840 --> 00:33:47.550 So what we want to do here is to basically always return 607 00:33:47.550 --> 00:33:50.343 the previous string plus the current string. 608 00:33:52.380 --> 00:33:55.080 So that's the previous string, 609 00:33:55.080 --> 00:33:59.577 and then the current string like this. 610 00:33:59.577 --> 00:34:04.577 And of course, we still need to say .description.slice, 611 00:34:05.340 --> 00:34:06.213 like this. 612 00:34:10.620 --> 00:34:15.620 So we're almost there already, just missing this separator. 613 00:34:16.500 --> 00:34:18.180 And there we go. 614 00:34:18.180 --> 00:34:21.480 Now, we just have this ugly thing here. 615 00:34:21.480 --> 00:34:24.573 Let's see what happens if we remove this here altogether. 616 00:34:25.590 --> 00:34:28.230 And yeah, of course, that cannot work. 617 00:34:28.230 --> 00:34:30.450 We always need an initial value. 618 00:34:30.450 --> 00:34:34.380 And so now we could go ahead and only start reading here, 619 00:34:34.380 --> 00:34:36.213 but that's not really necessary. 620 00:34:37.110 --> 00:34:39.510 So we can, of course, go back to using just this code, 621 00:34:39.510 --> 00:34:41.610 but that's not gonna be necessary. 622 00:34:41.610 --> 00:34:45.933 Of course, we can just go back and use this code right here, 623 00:34:47.850 --> 00:34:49.380 and take out this one. 624 00:34:49.380 --> 00:34:54.330 So this was just yet another use case of the reduce method 625 00:34:54.330 --> 00:34:56.490 that I wanted to show you here 626 00:34:56.490 --> 00:35:00.900 so that we can create even strings using reduce. 627 00:35:00.900 --> 00:35:03.360 Alright, so I'm leaving this here again 628 00:35:03.360 --> 00:35:06.390 for you to compare, give it a save. 629 00:35:06.390 --> 00:35:09.960 And I think that with this we are done. 630 00:35:09.960 --> 00:35:14.580 So we transformed our initial code, which looked pretty bad, 631 00:35:14.580 --> 00:35:17.160 first by applying some general guidelines 632 00:35:17.160 --> 00:35:20.400 for modern and clean code. 633 00:35:20.400 --> 00:35:24.360 And then, now, in this video, we made our code functional 634 00:35:24.360 --> 00:35:27.510 and took out all of the impure functions, 635 00:35:27.510 --> 00:35:30.930 and side effects, and data mutations. 636 00:35:30.930 --> 00:35:33.630 So a lot cleaner, a lot nicer. 637 00:35:33.630 --> 00:35:38.193 And also if you ask me a lot more professional-looking code. 638 00:35:39.030 --> 00:35:42.390 Now, actually, this function here is not pure. 639 00:35:42.390 --> 00:35:44.220 Let me just write that here. 640 00:35:44.220 --> 00:35:46.110 So it's an impure function 641 00:35:46.110 --> 00:35:48.810 because it creates a side effect 642 00:35:48.810 --> 00:35:51.900 by doing this console.log here. 643 00:35:51.900 --> 00:35:53.220 Okay? 644 00:35:53.220 --> 00:35:57.810 So in fact, all console.logs here are, of course, impure 645 00:35:57.810 --> 00:35:59.760 because they do something. 646 00:35:59.760 --> 00:36:03.150 So they create something here in the console in this case. 647 00:36:03.150 --> 00:36:05.820 So they create input/output. 648 00:36:05.820 --> 00:36:09.960 But, of course, any program needs to have some side effects. 649 00:36:09.960 --> 00:36:11.910 Because otherwise, what is the point 650 00:36:11.910 --> 00:36:13.980 of the program in the first place? 651 00:36:13.980 --> 00:36:16.980 If we didn't have all of these console.logs, 652 00:36:16.980 --> 00:36:19.650 how would we even know that the program is running 653 00:36:19.650 --> 00:36:21.180 in the first place? 654 00:36:21.180 --> 00:36:22.013 Right? 655 00:36:22.013 --> 00:36:23.970 It would not be useful at all. 656 00:36:23.970 --> 00:36:27.780 And so as I said, we always need some side effects, 657 00:36:27.780 --> 00:36:29.460 but in functional programming, 658 00:36:29.460 --> 00:36:33.480 we try to push these side effects as far to the edge. 659 00:36:33.480 --> 00:36:37.050 So as far to the end of our program as possible. 660 00:36:37.050 --> 00:36:39.870 So without having them all over the place, 661 00:36:39.870 --> 00:36:41.940 polluting our application. 662 00:36:41.940 --> 00:36:44.430 Now, this kind of mini-project here 663 00:36:44.430 --> 00:36:48.390 is, of course, very far from being complete. 664 00:36:48.390 --> 00:36:49.500 And if you wish, 665 00:36:49.500 --> 00:36:52.500 you can, of course, develop this a lot further. 666 00:36:52.500 --> 00:36:56.160 For example, you can add a function for adding the income, 667 00:36:56.160 --> 00:36:59.310 or you can also create functions for calculating 668 00:36:59.310 --> 00:37:03.510 the total expenses and incomes, the overall budget, 669 00:37:03.510 --> 00:37:07.260 how much the expenses are in percentage of the income, 670 00:37:07.260 --> 00:37:09.120 and so on and so forth. 671 00:37:09.120 --> 00:37:11.790 But I will leave it like this here 672 00:37:11.790 --> 00:37:14.400 because again, this is enough for us now 673 00:37:14.400 --> 00:37:17.700 and our code looks pretty professional as it is. 674 00:37:17.700 --> 00:37:21.870 Just keep in mind again that these are more like guidelines 675 00:37:21.870 --> 00:37:24.300 and not really hard rules. 676 00:37:24.300 --> 00:37:26.580 So large applications, 677 00:37:26.580 --> 00:37:30.240 they're very hard to make 100% functional 678 00:37:30.240 --> 00:37:32.610 and that's absolutely okay. 679 00:37:32.610 --> 00:37:35.340 So actually, right in the next project, 680 00:37:35.340 --> 00:37:38.340 we will already break many of these rules. 681 00:37:38.340 --> 00:37:40.080 And, again, that's okay. 682 00:37:40.080 --> 00:37:42.060 It's not a big problem. 683 00:37:42.060 --> 00:37:46.380 As long as we try to still keep some of these principles 684 00:37:46.380 --> 00:37:47.970 in some of the places, 685 00:37:47.970 --> 00:37:50.850 we're already making our code a lot better 686 00:37:50.850 --> 00:37:52.323 and a lot more professional. 687 00:37:53.340 --> 00:37:54.480 Now, okay. 688 00:37:54.480 --> 00:37:56.790 And with that being said, you are now ready 689 00:37:56.790 --> 00:38:01.440 to go build the biggest and kind of the final project 690 00:38:01.440 --> 00:38:03.960 of this course in the next section. 691 00:38:03.960 --> 00:38:06.783 And so I really hope to see you there soon.