WEBVTT 1 00:00:01.520 --> 00:00:04.693 So let's know, learn about the bind method. 2 00:00:06.310 --> 00:00:08.730 And just like the call method, 3 00:00:08.730 --> 00:00:12.470 bind also allows us to manually set this keywords 4 00:00:12.470 --> 00:00:14.610 for any function call. 5 00:00:14.610 --> 00:00:16.570 Now, the difference is that bind 6 00:00:16.570 --> 00:00:19.180 does not immediately call the function. 7 00:00:19.180 --> 00:00:22.080 Instead it returns a new function 8 00:00:22.080 --> 00:00:24.790 where this keyword is bound. 9 00:00:24.790 --> 00:00:29.670 So it's set to whatever value we pass into bind. 10 00:00:29.670 --> 00:00:32.200 So let's continue with our airline example 11 00:00:32.200 --> 00:00:34.390 from the previous lecture here. 12 00:00:34.390 --> 00:00:37.770 And now let's say that we need to use the book function 13 00:00:37.770 --> 00:00:41.120 for Eurowings all the time. 14 00:00:41.120 --> 00:00:45.332 So, remember we have this Eurowings object 15 00:00:45.332 --> 00:00:47.749 and then we used a book.call, 16 00:00:48.884 --> 00:00:50.860 to use the book function 17 00:00:50.860 --> 00:00:54.020 with Eurowings set to this keyword. 18 00:00:54.020 --> 00:00:56.283 So that's what we did in the last lecture. 19 00:00:57.820 --> 00:01:00.253 So let me just copy this code here. 20 00:01:02.030 --> 00:01:03.800 But now, as I said, 21 00:01:03.800 --> 00:01:08.350 we can use the bind method to create a new function 22 00:01:08.350 --> 00:01:12.993 with the this keyword also set to Eurowings, all right? 23 00:01:14.930 --> 00:01:19.000 So again, this will not call the book function. 24 00:01:19.000 --> 00:01:21.850 Instead it will return a new function 25 00:01:21.850 --> 00:01:25.743 where this keyword will always be set to Eurowings. 26 00:01:26.690 --> 00:01:31.674 And so let's create a new function here called bookEW, 27 00:01:31.674 --> 00:01:33.424 where its just a code of Eurowings. 28 00:01:35.940 --> 00:01:37.300 All right? 29 00:01:37.300 --> 00:01:39.723 And so now let's use this function. 30 00:01:41.030 --> 00:01:46.030 So bookEW, Steven Williams 31 00:01:48.420 --> 00:01:50.743 and we're missing the flight number here. 32 00:01:51.870 --> 00:01:53.203 So 23. 33 00:01:54.638 --> 00:01:56.750 And so as you see, this now looks 34 00:01:56.750 --> 00:01:59.740 like the normal book function call again. 35 00:01:59.740 --> 00:02:01.890 And that's because this function here 36 00:02:01.890 --> 00:02:05.960 already has the this keyword set in stone basically. 37 00:02:05.960 --> 00:02:09.250 And so here, of course, we no longer need to specify 38 00:02:09.250 --> 00:02:11.130 to these keywords again. 39 00:02:11.130 --> 00:02:15.250 So the signature here, so the name of the parameters 40 00:02:15.250 --> 00:02:18.920 is back to being simply the flight number 41 00:02:18.920 --> 00:02:22.650 and the passenger name, okay? 42 00:02:22.650 --> 00:02:25.700 And so now again, we see that Steven booked a seat 43 00:02:25.700 --> 00:02:28.810 on Eurowings flight EW23. 44 00:02:28.810 --> 00:02:31.540 And so that worked perfectly. 45 00:02:31.540 --> 00:02:34.543 Let's also of course, see at the object again. 46 00:02:37.580 --> 00:02:42.090 So with all the bookings and indeed here is Steven Williams 47 00:02:42.090 --> 00:02:43.903 in the flight that we just booked. 48 00:02:45.060 --> 00:02:48.520 Great, so this is really, really useful. 49 00:02:48.520 --> 00:02:51.570 And we could now of course go ahead and do the same 50 00:02:51.570 --> 00:02:53.800 for all the airlines. 51 00:02:53.800 --> 00:02:57.740 So creating one booking function for each of the airlines. 52 00:02:57.740 --> 00:02:59.790 And this then makes it a little bit easier 53 00:02:59.790 --> 00:03:02.295 to book a flight for each of the airlines, 54 00:03:02.295 --> 00:03:04.723 if we have to do it multiple times. 55 00:03:05.733 --> 00:03:09.970 So instead of having to use a call all the time, 56 00:03:09.970 --> 00:03:11.903 we can just do bind once. 57 00:03:14.960 --> 00:03:18.170 So defining the disk keyword once like this 58 00:03:18.170 --> 00:03:22.903 and from there on, we can always use these functions. 59 00:03:27.417 --> 00:03:32.417 .bind and this one, Swiss, all right? 60 00:03:33.360 --> 00:03:35.290 Now, I'm not gonna use them all here now 61 00:03:35.290 --> 00:03:37.693 because we already know how that works, 62 00:03:38.820 --> 00:03:40.330 all right? 63 00:03:40.330 --> 00:03:41.580 So this is great, 64 00:03:41.580 --> 00:03:44.700 but we can actually take this even further. 65 00:03:44.700 --> 00:03:48.890 So in the call method, we can pass multiple arguments here 66 00:03:48.890 --> 00:03:51.550 besides this keywords, right? 67 00:03:51.550 --> 00:03:54.460 And so in the bind method, we can actually do the same. 68 00:03:54.460 --> 00:03:56.100 And then all of these arguments 69 00:03:56.100 --> 00:03:59.090 will also be basically set in stone. 70 00:03:59.090 --> 00:04:00.970 So they will be defined 71 00:04:00.970 --> 00:04:03.380 and the function will then always be called 72 00:04:03.380 --> 00:04:05.850 with these same arguments. 73 00:04:05.850 --> 00:04:08.900 For example, we could use bind to create a function 74 00:04:08.900 --> 00:04:13.063 for one specific airline and a specific flight number. 75 00:04:14.960 --> 00:04:19.960 So let's say, bookEW, just like we had here, 76 00:04:21.120 --> 00:04:25.370 but then really specific, only for flight 23. 77 00:04:25.370 --> 00:04:29.000 So that would be book.bind 78 00:04:30.050 --> 00:04:33.630 and then of course we have to again, define Eurowings, 79 00:04:33.630 --> 00:04:36.980 but then we can start to finding the list of arguments 80 00:04:37.980 --> 00:04:40.020 or the list of parameters 81 00:04:40.020 --> 00:04:44.403 and setting the first one to 23, okay? 82 00:04:47.180 --> 00:04:49.523 And so if we look at our bind function now, 83 00:04:50.620 --> 00:04:54.470 remember that it needs the flight number and the name. 84 00:04:54.470 --> 00:04:57.310 But now in our bookEW23 function, 85 00:04:57.310 --> 00:05:01.350 it is as if this first argument was already set. 86 00:05:01.350 --> 00:05:04.603 And so all remaining function now only need the name. 87 00:05:06.380 --> 00:05:07.680 So this function, 88 00:05:07.680 --> 00:05:10.020 this one now only needs the name, 89 00:05:10.020 --> 00:05:13.107 because the number was already preset here 90 00:05:13.107 --> 00:05:14.593 in the bind method. 91 00:05:15.820 --> 00:05:17.053 So, let's see. 92 00:05:18.790 --> 00:05:22.353 So, our newly created function bookEW23, 93 00:05:23.671 --> 00:05:25.963 and let's now book a flight for myself. 94 00:05:32.430 --> 00:05:34.710 And let's book a flight for Martha, 95 00:05:34.710 --> 00:05:36.253 let's say, Cooper. 96 00:05:37.480 --> 00:05:42.480 And, yeah, let's check out our output here. 97 00:05:42.510 --> 00:05:44.263 And so these are the two. 98 00:05:45.240 --> 00:05:50.240 And indeed both of them are for Eurowings flight EW23, 99 00:05:50.330 --> 00:05:51.769 all right? 100 00:05:51.769 --> 00:05:54.210 And so that's exactly what we were expecting. 101 00:05:54.210 --> 00:05:58.780 Again, because we preset that 23 right here. 102 00:05:58.780 --> 00:05:59.810 If we preset this here 103 00:05:59.810 --> 00:06:01.970 to one, two, three, four, five, 104 00:06:01.970 --> 00:06:05.470 then of course, both of these new flights here 105 00:06:05.470 --> 00:06:08.793 would be booked onto that flight number, okay? 106 00:06:11.000 --> 00:06:14.340 So this allows us to set in stone, certain arguments. 107 00:06:14.340 --> 00:06:17.170 And so this function, the resulting function, 108 00:06:17.170 --> 00:06:19.400 then becomes even simpler. 109 00:06:19.400 --> 00:06:22.010 So right now all we need to pass in 110 00:06:22.010 --> 00:06:25.130 is the passenger name, right? 111 00:06:25.130 --> 00:06:28.930 And then everything else basically happens automatically. 112 00:06:28.930 --> 00:06:30.580 And taking this even further, 113 00:06:30.580 --> 00:06:34.040 we could even define, have the passenger name here 114 00:06:34.040 --> 00:06:35.450 for example, like this. 115 00:06:35.450 --> 00:06:39.770 And then this function would always book a flight for Jonas 116 00:06:39.770 --> 00:06:41.370 on flight 23. 117 00:06:41.370 --> 00:06:45.557 But that would probably take it a little bit too far now. 118 00:06:47.110 --> 00:06:51.780 And I deleted the 23 here, 119 00:06:51.780 --> 00:06:53.280 of course, I didn't want that. 120 00:06:54.690 --> 00:06:56.290 So this is correct. 121 00:06:56.290 --> 00:06:58.600 And by the way, what we did here, 122 00:06:58.600 --> 00:07:03.070 so, basically specifying parts of the argument beforehand, 123 00:07:03.070 --> 00:07:07.700 is actually a common pattern called partial application. 124 00:07:07.700 --> 00:07:10.010 So essentially, partial application 125 00:07:10.010 --> 00:07:12.620 means that a part of the arguments 126 00:07:12.620 --> 00:07:16.350 of the original function are already applied, 127 00:07:16.350 --> 00:07:18.920 so which means, already set. 128 00:07:18.920 --> 00:07:23.920 And so that's exactly what the bookEW23 function is, right? 129 00:07:24.890 --> 00:07:26.690 It's essentially the book function 130 00:07:26.690 --> 00:07:30.210 but with 23 already predefined. 131 00:07:30.210 --> 00:07:31.290 Great. 132 00:07:31.290 --> 00:07:35.400 So, hopefully this was a nice example for you to understand 133 00:07:35.400 --> 00:07:39.110 the call apply and bind methods, 134 00:07:39.110 --> 00:07:41.410 but there are also other situations 135 00:07:41.410 --> 00:07:43.780 in which we can use the bind method 136 00:07:43.780 --> 00:07:45.760 and where it is very useful. 137 00:07:45.760 --> 00:07:49.580 And one example of that is when we use objects together 138 00:07:49.580 --> 00:07:50.963 with event listeners. 139 00:07:51.930 --> 00:07:53.630 So let's write that here actually, 140 00:07:54.900 --> 00:07:58.683 with event listeners. 141 00:08:00.210 --> 00:08:02.180 And so now this button here 142 00:08:02.180 --> 00:08:03.920 will finally come into play. 143 00:08:03.920 --> 00:08:06.510 And maybe you've been wondering about that. 144 00:08:06.510 --> 00:08:08.890 But let's start by adding a new property 145 00:08:08.890 --> 00:08:10.720 only to the Lufthansa object 146 00:08:12.030 --> 00:08:15.500 and let's set it to 300. 147 00:08:15.500 --> 00:08:19.640 So meaning that this company has 300 planes. 148 00:08:19.640 --> 00:08:22.600 And then we also add a new method 149 00:08:22.600 --> 00:08:24.760 only to the Lufthansa object, 150 00:08:24.760 --> 00:08:27.023 which is to buy a new plane. 151 00:08:31.350 --> 00:08:32.183 So function, 152 00:08:33.323 --> 00:08:37.347 and now what we want to do is, this.planes++. 153 00:08:39.320 --> 00:08:41.990 So essentially we want to add a new plane, 154 00:08:41.990 --> 00:08:43.990 whenever we click on this button. 155 00:08:43.990 --> 00:08:46.783 So eventually that's what we will want to do. 156 00:08:47.890 --> 00:08:52.170 And then let's also log this.planes to the console. 157 00:08:52.170 --> 00:08:56.610 And probably we should also log this keywords 158 00:08:56.610 --> 00:08:58.610 to the console as well. 159 00:08:58.610 --> 00:09:01.690 And now let's actually attach our event handler 160 00:09:01.690 --> 00:09:03.310 to this element, 161 00:09:03.310 --> 00:09:06.890 let's inspect it here, okay? 162 00:09:06.890 --> 00:09:08.763 It should need to go to elements. 163 00:09:09.680 --> 00:09:12.250 So, this is the button here 164 00:09:12.250 --> 00:09:13.773 and it has the class, buy. 165 00:09:15.270 --> 00:09:18.817 So document.queryselector.buy, 166 00:09:20.940 --> 00:09:24.900 addEventListener for click. 167 00:09:24.900 --> 00:09:26.520 And then the second argument, 168 00:09:26.520 --> 00:09:30.160 as you already know, is the handler function. 169 00:09:30.160 --> 00:09:33.430 So addEventListener here is the higher order function 170 00:09:33.430 --> 00:09:35.700 which receives a callback function. 171 00:09:35.700 --> 00:09:39.690 And so that should be lufthansa.buyPlane, all right? 172 00:09:44.620 --> 00:09:46.610 So essentially, this function here 173 00:09:46.610 --> 00:09:48.480 is what we want to happen, 174 00:09:48.480 --> 00:09:51.520 which again takes the current number of planes 175 00:09:51.520 --> 00:09:53.723 and increases it by one. 176 00:09:55.740 --> 00:09:57.193 So let's do that. 177 00:09:58.610 --> 00:10:01.883 And now as I click on this button, let's see what happens. 178 00:10:03.150 --> 00:10:05.683 And we get not a number here. 179 00:10:06.800 --> 00:10:10.000 So this .Planes is now not a number. 180 00:10:10.000 --> 00:10:13.380 And the reason for that is that this keyword 181 00:10:13.380 --> 00:10:17.090 is this button element, okay? 182 00:10:17.090 --> 00:10:18.833 And do you know why that is? 183 00:10:19.870 --> 00:10:22.000 Well, in one of the theory lectures, 184 00:10:22.000 --> 00:10:24.850 we learned that in an event handler function, 185 00:10:24.850 --> 00:10:28.130 that this keyword always points to the element 186 00:10:28.130 --> 00:10:31.133 on which that handler is attached to. 187 00:10:32.170 --> 00:10:35.770 So, this is the handler function, right? 188 00:10:35.770 --> 00:10:39.380 And so it is attached to this element, 189 00:10:39.380 --> 00:10:40.650 so to this button. 190 00:10:40.650 --> 00:10:43.530 And therefore, inside of the handler function 191 00:10:43.530 --> 00:10:46.690 or the event listener, it doesn't really matter. 192 00:10:46.690 --> 00:10:48.443 But inside of this function, 193 00:10:48.443 --> 00:10:51.634 this keyword will point to the button element. 194 00:10:51.634 --> 00:10:56.090 And so that's why this keyword here 195 00:10:56.090 --> 00:10:59.710 returns this button, okay? 196 00:10:59.710 --> 00:11:02.170 So here you have yet another proof 197 00:11:02.170 --> 00:11:05.820 that this keyword really is set dynamically. 198 00:11:05.820 --> 00:11:10.820 Because if we simply called a Lufthansa.buyPlane out here, 199 00:11:12.173 --> 00:11:16.260 then of course, this keyword would be Lufthansa, 200 00:11:16.260 --> 00:11:18.180 so this object, right? 201 00:11:18.180 --> 00:11:21.920 Because that's the object calling the function. 202 00:11:21.920 --> 00:11:24.500 But in this case it is of course, 203 00:11:24.500 --> 00:11:28.830 this event listener function calling this function. 204 00:11:28.830 --> 00:11:31.180 And so therefore, the button itself 205 00:11:31.180 --> 00:11:35.050 will then become this keyword, okay? 206 00:11:35.050 --> 00:11:36.480 Here we now see the results 207 00:11:36.480 --> 00:11:38.393 of calling this function out here. 208 00:11:39.280 --> 00:11:42.210 And so now we started with 300 209 00:11:42.210 --> 00:11:45.093 and it was increased just as we wanted it to be. 210 00:11:45.930 --> 00:11:48.000 So let's take this out here 211 00:11:48.000 --> 00:11:49.920 and let's go back to clicking here 212 00:11:49.920 --> 00:11:52.690 to see the result we had before. 213 00:11:52.690 --> 00:11:53.873 So that's this button. 214 00:11:54.800 --> 00:11:57.810 Now, of course, in this handler function here, 215 00:11:57.810 --> 00:12:00.600 we still need this keyword to point 216 00:12:00.600 --> 00:12:03.860 to the Lufthansa object itself, right? 217 00:12:03.860 --> 00:12:06.890 Otherwise this logic here will not work. 218 00:12:06.890 --> 00:12:10.470 So what this means is that we need to manually define 219 00:12:10.470 --> 00:12:11.963 to this keyword right here. 220 00:12:12.800 --> 00:12:13.683 So right here. 221 00:12:15.110 --> 00:12:16.940 Now, how should we do that? 222 00:12:16.940 --> 00:12:21.030 Should we use the call method or the bind method? 223 00:12:21.030 --> 00:12:23.690 Well, we need to pass in a function here 224 00:12:23.690 --> 00:12:25.600 and not to call it. 225 00:12:25.600 --> 00:12:28.260 And so we already know that the call method 226 00:12:28.260 --> 00:12:29.690 calls the function. 227 00:12:29.690 --> 00:12:31.640 And so that's not what we need. 228 00:12:31.640 --> 00:12:34.190 And so therefore, we use bind. 229 00:12:34.190 --> 00:12:35.977 Because we already know that bind 230 00:12:35.977 --> 00:12:38.840 is gonna return a new function. 231 00:12:38.840 --> 00:12:41.313 And so this keyword should be Lufthansa, 232 00:12:41.313 --> 00:12:45.830 and so that's exactly what we define, okay? 233 00:12:45.830 --> 00:12:50.830 And now as we click here we should see the Lufthansa object 234 00:12:50.880 --> 00:12:52.870 being this keywords. 235 00:12:52.870 --> 00:12:55.563 Indeed, and that's now exactly what we got here. 236 00:12:56.470 --> 00:12:58.690 So that's the result of this line of code. 237 00:12:58.690 --> 00:13:02.150 And so again, this now points to Lufthansa, 238 00:13:02.150 --> 00:13:06.360 because that's what we told JavaScript to do right here. 239 00:13:06.360 --> 00:13:08.360 And so indeed now the number of planes 240 00:13:08.360 --> 00:13:13.360 is increasing each time that we click on this button. 241 00:13:13.460 --> 00:13:15.950 Great, so we have our problem solved. 242 00:13:15.950 --> 00:13:19.060 And in fact, we will do this a couple more times 243 00:13:19.060 --> 00:13:20.620 throughout the course. 244 00:13:20.620 --> 00:13:22.340 So this one is an important one. 245 00:13:22.340 --> 00:13:24.210 And in general, the bind method 246 00:13:24.210 --> 00:13:28.332 is something you really need to understand, all right? 247 00:13:28.332 --> 00:13:30.439 Now, just one final example here, 248 00:13:30.439 --> 00:13:34.900 which is again, gonna be about partial application, 249 00:13:34.900 --> 00:13:38.573 because this is another big use case for the bind method. 250 00:13:41.240 --> 00:13:44.450 And in this case of partial application, 251 00:13:44.450 --> 00:13:48.510 many times we are not even interested in this keywords, 252 00:13:48.510 --> 00:13:50.961 but we still use bind for this, all right? 253 00:13:50.961 --> 00:13:53.860 Now, remember that partial application 254 00:13:53.860 --> 00:13:58.060 means that we can preset parameters, all right? 255 00:13:58.060 --> 00:14:00.910 So let's start by creating a general function 256 00:14:00.910 --> 00:14:05.803 which adds a tax to some value. 257 00:14:07.510 --> 00:14:11.433 So let's start with the tax rate and then the value itself. 258 00:14:14.040 --> 00:14:16.233 And let's write an arrow function here. 259 00:14:17.520 --> 00:14:20.160 And so this works by doing 260 00:14:20.160 --> 00:14:25.160 value + value * the tax rate, right? 261 00:14:28.750 --> 00:14:32.180 So imagine that the tax rate would be 10% 262 00:14:32.180 --> 00:14:34.427 and the value 100. 263 00:14:34.427 --> 00:14:38.650 And so adding the tax to 100 would be 110. 264 00:14:38.650 --> 00:14:42.550 Well, let's actually do 200 to make it a bit more clear. 265 00:14:42.550 --> 00:14:45.603 And of course we need to call the function here itself, 266 00:14:47.930 --> 00:14:48.763 okay? 267 00:14:48.763 --> 00:14:52.000 So now 10% of 200 is 20, 268 00:14:52.000 --> 00:14:57.000 and so the results should be 220 and that didn't work. 269 00:14:57.454 --> 00:15:00.720 And yeah, that's because we need to define this here 270 00:15:00.720 --> 00:15:04.470 as a decimal number here of course. 271 00:15:04.470 --> 00:15:08.410 So only then this rate here can make sense, okay? 272 00:15:08.410 --> 00:15:10.713 So 220 now. 273 00:15:11.840 --> 00:15:16.220 So this here is the general function for adding tax. 274 00:15:16.220 --> 00:15:18.490 But now let's say that there is one tax 275 00:15:18.490 --> 00:15:19.980 that we use all the time. 276 00:15:19.980 --> 00:15:23.763 And so let's create a function for that. 277 00:15:24.657 --> 00:15:26.940 So for example, here in Portugal, 278 00:15:26.940 --> 00:15:31.893 the VAT, which is value added tax, is 23%. 279 00:15:32.810 --> 00:15:34.990 And so we can now use the bind function 280 00:15:34.990 --> 00:15:39.990 on this function and preset the rate always, 281 00:15:40.080 --> 00:15:43.470 so that it always will be this 23%. 282 00:15:43.470 --> 00:15:45.040 And then we have a function 283 00:15:45.040 --> 00:15:46.930 which only calculates the VAT 284 00:15:46.930 --> 00:15:49.163 for whatever value we pass into it. 285 00:15:50.840 --> 00:15:54.780 So, addTax.bind 286 00:15:54.780 --> 00:15:56.920 and then the first argument of bind 287 00:15:56.920 --> 00:15:59.370 is this keywords, remember? 288 00:15:59.370 --> 00:16:01.160 But in this case, we don't care 289 00:16:01.160 --> 00:16:02.930 about the this keyword at all. 290 00:16:02.930 --> 00:16:05.210 It's not even here in the function. 291 00:16:05.210 --> 00:16:07.570 And so, we just say, null. 292 00:16:07.570 --> 00:16:09.300 It could be any other value 293 00:16:09.300 --> 00:16:11.440 because nothing will happen with it, 294 00:16:11.440 --> 00:16:14.980 but it's kind of a standard to just use null. 295 00:16:14.980 --> 00:16:16.903 And now we can set the rate here. 296 00:16:18.100 --> 00:16:20.850 So let's preset it to 23%, 297 00:16:20.850 --> 00:16:23.960 so 0.23, all right? 298 00:16:23.960 --> 00:16:28.260 And so this sets the rate value here in stone. 299 00:16:28.260 --> 00:16:29.810 So essentially, this would be the same 300 00:16:29.810 --> 00:16:31.000 as writing... 301 00:16:33.200 --> 00:16:34.461 Let's paste it here. 302 00:16:34.461 --> 00:16:38.880 So this must be, addVAT equals, 303 00:16:38.880 --> 00:16:42.650 and the rate is preset to 0.23. 304 00:16:46.470 --> 00:16:49.480 So this is essentially what our addVAT function 305 00:16:49.480 --> 00:16:52.233 now looks like, okay? 306 00:16:53.240 --> 00:16:57.613 So, because we already set 0.23 in stone. 307 00:16:59.060 --> 00:17:01.583 So, now we can start using that. 308 00:17:03.990 --> 00:17:08.693 So this should be 123 and it is. 309 00:17:10.020 --> 00:17:13.920 We can use anything we want now like 23 310 00:17:14.770 --> 00:17:16.443 and so on and so forth. 311 00:17:17.790 --> 00:17:19.283 So I hope this makes sense. 312 00:17:20.290 --> 00:17:21.890 When you want to do this yourself, 313 00:17:21.890 --> 00:17:25.040 just keep in mind that the order of the arguments then 314 00:17:25.040 --> 00:17:26.210 is important. 315 00:17:26.210 --> 00:17:28.540 If you want it to preset the rate, 316 00:17:28.540 --> 00:17:31.650 then it has to be the first argument in this function. 317 00:17:31.650 --> 00:17:36.650 Otherwise, this will not really work here, okay? 318 00:17:37.320 --> 00:17:40.530 Now you could argue that what we just did here 319 00:17:40.530 --> 00:17:44.370 could easily have been done with default parameters. 320 00:17:44.370 --> 00:17:46.330 But this is actually different, 321 00:17:46.330 --> 00:17:49.650 because this here is creating a brand new, 322 00:17:49.650 --> 00:17:51.800 simply, more specific function 323 00:17:51.800 --> 00:17:53.860 based on a more general function, 324 00:17:53.860 --> 00:17:56.420 which is the addTax function. 325 00:17:56.420 --> 00:17:58.390 And of course, the example here 326 00:17:58.390 --> 00:18:02.300 could be a lot more complex too, right? 327 00:18:02.300 --> 00:18:04.140 So this really is different 328 00:18:04.140 --> 00:18:05.670 because using binds, 329 00:18:05.670 --> 00:18:08.970 actually it really gives us a new function. 330 00:18:08.970 --> 00:18:13.030 So, it's as if we returned a new specific function 331 00:18:13.030 --> 00:18:15.760 from the addTax function. 332 00:18:15.760 --> 00:18:19.130 And actually now I have a nice challenge for you 333 00:18:19.130 --> 00:18:23.391 which is to essentially rewrite this whole example here, 334 00:18:23.391 --> 00:18:26.060 but using the technique of one function 335 00:18:26.060 --> 00:18:28.070 returning another function. 336 00:18:28.070 --> 00:18:30.120 So we have one lecture about that 337 00:18:30.120 --> 00:18:32.820 and maybe you can go back and take a look at that. 338 00:18:32.820 --> 00:18:34.630 And then I want you to essentially, 339 00:18:34.630 --> 00:18:37.630 create a function that can return a function 340 00:18:37.630 --> 00:18:40.560 which will do just what this one does. 341 00:18:40.560 --> 00:18:43.220 So that's probably really challenging. 342 00:18:43.220 --> 00:18:46.700 So don't beat yourself up if you cannot do it. 343 00:18:46.700 --> 00:18:48.370 I know it is a challenge, 344 00:18:48.370 --> 00:18:51.570 but you can still try to take a minute or two 345 00:18:51.570 --> 00:18:54.510 and, yeah, really try it. 346 00:18:54.510 --> 00:18:55.443 If you can't do it, 347 00:18:55.443 --> 00:18:58.900 then just watch the solution in a minute, okay? 348 00:18:58.900 --> 00:19:00.640 Just don't use bind of course, 349 00:19:00.640 --> 00:19:03.440 because with that we already have the solution. 350 00:19:03.440 --> 00:19:05.860 So use the technique that I showed you earlier 351 00:19:05.860 --> 00:19:08.770 with the grid function, remember? 352 00:19:08.770 --> 00:19:11.550 And so here you can do something similar. 353 00:19:11.550 --> 00:19:13.973 So, see you in a second with the solution. 354 00:19:17.770 --> 00:19:18.970 Alright. 355 00:19:18.970 --> 00:19:21.030 I hope you tried that out. 356 00:19:21.030 --> 00:19:23.850 And here is how I would have done it. 357 00:19:23.850 --> 00:19:26.840 So, the first function here, 358 00:19:26.840 --> 00:19:28.790 I'm gonna call it addTaxRate. 359 00:19:31.987 --> 00:19:34.670 And I could do this with the arrow functions, 360 00:19:34.670 --> 00:19:37.030 but then that looks really confusing. 361 00:19:37.030 --> 00:19:39.433 So let's just focus on the functionality here. 362 00:19:40.550 --> 00:19:43.870 So this is the first function which only receives the rate. 363 00:19:43.870 --> 00:19:45.593 So similar to what we did here. 364 00:19:46.810 --> 00:19:51.193 And then what it does is to return a new function. 365 00:19:52.477 --> 00:19:53.900 And then this new function 366 00:19:53.900 --> 00:19:55.663 is the one that takes in the value. 367 00:19:57.360 --> 00:20:00.740 And it will then return just as the other function, 368 00:20:00.740 --> 00:20:05.010 value + value * the rate, okay? 369 00:20:08.885 --> 00:20:11.000 And so now based on this one, 370 00:20:11.000 --> 00:20:14.623 we could create addVAT2. 371 00:20:16.880 --> 00:20:18.900 And so that would be, addTaxRate 372 00:20:21.547 --> 00:20:23.163 and then call it with 0.23. 373 00:20:26.410 --> 00:20:28.640 And then let's just do the same 374 00:20:28.640 --> 00:20:31.150 to see if the results are the same. 375 00:20:31.150 --> 00:20:36.150 So, VAT2, and two, give it a try and here you go. 376 00:20:37.770 --> 00:20:39.600 So the results are the same. 377 00:20:39.600 --> 00:20:43.793 And so this addVAT2 is the same function as this one. 378 00:20:45.030 --> 00:20:48.260 So just to recap, we created this function, 379 00:20:48.260 --> 00:20:51.710 which then returns this one. 380 00:20:51.710 --> 00:20:55.130 So the first one is the one that needs the rate, 381 00:20:55.130 --> 00:20:57.770 because the rate is also what we used 382 00:20:57.770 --> 00:21:02.400 to define this addVAT function here, right? 383 00:21:02.400 --> 00:21:04.010 And so the resulting function 384 00:21:04.010 --> 00:21:06.470 is then the one who takes in the value. 385 00:21:06.470 --> 00:21:09.563 And that's why we have value here in the inner function too. 386 00:21:10.610 --> 00:21:13.334 Now this is just another way of doing the same thing 387 00:21:13.334 --> 00:21:17.210 and this is already pretty advanced stuff really. 388 00:21:17.210 --> 00:21:19.500 So, absolutely don't be upset 389 00:21:19.500 --> 00:21:22.200 if you didn't do this by yourself. 390 00:21:22.200 --> 00:21:23.950 But anyway, in the next video 391 00:21:23.950 --> 00:21:26.000 we have coding challenge number one 392 00:21:26.000 --> 00:21:27.940 of this section coming up. 393 00:21:27.940 --> 00:21:30.703 And so I hope to see you there very soon.