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.