Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
28472
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.