WEBVTT 00:00.600 --> 00:06.930 In this lecture, I'm going to describe a three builtin methods of function in JavaScript called apply 00:06.930 --> 00:07.650 and Bind. 00:08.670 --> 00:14.730 They are very simple to understand, but at the same time, there could be lots of situations in JavaScript 00:15.180 --> 00:18.390 where using those methods is very efficient and flexible. 00:19.230 --> 00:19.680 All right. 00:20.250 --> 00:25.090 Let's go to the editor and demonstrate each of these methods using some examples. 00:25.410 --> 00:34.800 I'm going to create object rights one person and create here some properties. 00:35.220 --> 00:36.960 First name John. 00:39.630 --> 00:50.350 Then last name, right, Smith, then I'm going to create a method for getting the full name right, 00:50.370 --> 00:52.560 full name, then function. 00:56.080 --> 00:59.110 And then return this start first name. 01:02.000 --> 01:02.510 Plus. 01:04.200 --> 01:07.360 Place space here and then plus this that last night. 01:09.300 --> 01:16.440 OK, now I'm going to create function expression, which will define a person's age and the job, the 01:16.440 --> 01:27.420 right var defined person, and then assign to that variable the function with the parameters, age and 01:27.420 --> 01:27.810 job. 01:31.100 --> 01:33.830 And then South Dakota braces right to counsel the clock. 01:37.140 --> 01:42.510 Right, they start fullName plus these. 01:45.470 --> 01:47.780 Then plus the age variable. 01:50.350 --> 01:55.240 Then years old, and he is a. 01:59.060 --> 02:00.500 And plus, your job. 02:02.180 --> 02:11.510 OK, I'm going to call dysfunctional, right, define person and then inside the parentheses, let's 02:11.840 --> 02:15.290 pass arguments for age and job rights, for example. 02:15.300 --> 02:19.040 Twenty eight and developer. 02:21.870 --> 02:24.690 So what do you think we'll get here? 02:25.560 --> 02:29.430 I believe that you guess this will be definitely an error. 02:31.050 --> 02:38.400 The reason is that this variable points to global object and on global level, fullName method doesn't 02:38.400 --> 02:38.880 exist. 02:39.810 --> 02:44.760 In order to work it, we need somehow to point this variable to the person object. 02:45.530 --> 02:49.710 This is a moment when we can use call, apply and find methods. 02:50.310 --> 02:57.150 Using those methods, we can define to which objects should refer this variable as first I'm going to 02:57.150 --> 02:58.350 use call method. 02:58.770 --> 03:01.270 Let's change this code a little bit. 03:02.070 --> 03:08.730 So here we do not need to place parentheses because as we know, functions are objects in JavaScript 03:09.030 --> 03:12.840 and therefore we can use dot notation in order to attach to it. 03:13.770 --> 03:15.450 So write that call. 03:17.160 --> 03:23.100 Now, inside the parentheses, we need to define an object as a parameter to which this variable should 03:23.100 --> 03:23.560 refer. 03:23.910 --> 03:25.890 So we need to write to your person. 03:28.020 --> 03:31.710 We can already reload the page because call method. 03:31.740 --> 03:33.930 Besides that, it defines this variable. 03:34.170 --> 03:36.870 It also invokes the function at the same time. 03:37.860 --> 03:38.780 So reload. 03:39.630 --> 03:41.370 And here we have our text. 03:42.180 --> 03:49.440 But instead of H and job parameters, we have undefined because we have not passed proper arguments 03:49.950 --> 03:59.550 so we can define them here after person parameter write 28 and again developer. 04:02.450 --> 04:08.930 Revote and we have John Smith is 28 years old and he is that developer. 04:10.010 --> 04:14.150 All right, let's move on to the next method, which is applying. 04:14.570 --> 04:17.090 It works in the exact same way as coal. 04:17.990 --> 04:22.240 But the only difference is that we pass arguments as an right. 04:22.940 --> 04:25.920 I mean, that arguments should be items of an array. 04:26.810 --> 04:27.200 So. 04:27.200 --> 04:27.650 Right. 04:28.670 --> 04:42.590 Define person, then use apply method again, plus as a first parameter person object and then inside 04:42.590 --> 04:51.320 the square brackets, write the arguments for each and job thirty and let's say designer. 04:55.150 --> 05:01.850 So revolt and you see that we have John Smith is 30 years old and he's a designer. 05:03.170 --> 05:06.310 Again, those two methods work in the exact same way. 05:06.610 --> 05:13.120 And the only difference is that in case of a tie method argument, police should be always in a right. 05:14.200 --> 05:20.590 Sometimes you may come across some situations in JavaScript where a method can be more useful for you 05:20.590 --> 05:21.260 than call. 05:22.460 --> 05:26.200 OK, the next and the last one is binde method. 05:27.160 --> 05:29.710 Binde is a bit different from the previous ones. 05:30.280 --> 05:37.030 When we used by the method we create a new Koppio function, then we can define to which object should 05:37.030 --> 05:38.090 this variable refer. 05:38.110 --> 05:39.850 And also we can pass the parameters. 05:40.840 --> 05:47.590 The main difference between BINDE and previous Callon apply methods is that bind itself does not invoke 05:47.590 --> 05:48.120 a function. 05:49.060 --> 05:56.110 So we need to create a new variable and in that variable we have to store a function and attached to 05:56.110 --> 05:57.250 it by the method. 05:57.640 --> 06:07.210 So write variable get person which equals to define person, don't bind. 06:09.610 --> 06:14.470 And inside the parentheses that's pass as parameter person object. 06:16.910 --> 06:22.610 After that, we need to call the function using this newly created variable name, so right, get person 06:24.800 --> 06:33.590 and inside the parentheses, I'm going to pass the arguments, for example, 19 as an H and student. 06:36.810 --> 06:47.370 Reload and here we go, John Smith is 19 years old and he's a student, all right, when we use Binde 06:47.370 --> 06:49.580 method, we can define parameters. 06:50.850 --> 06:57.240 So right here after person 19 and student. 06:59.780 --> 07:03.290 And then get rid of the arguments from get person. 07:06.760 --> 07:15.070 Reload and you see that we have exact same result in some cases, we can define one of the parameters 07:15.400 --> 07:17.900 inside the method as a permanent. 07:18.580 --> 07:28.690 So let's live your age and write, for example, 35 and remove a student from here and then pass in 07:28.690 --> 07:29.440 that person. 07:29.650 --> 07:33.310 Different arguments, for example, musician. 07:37.220 --> 07:45.680 Reload and you see that we have John Smith is 35 years old and he is a musician, so we can use this 07:45.680 --> 07:52.240 age parameter as a default and on each invocation, we can just change the job arguments. 07:53.210 --> 07:58.850 So invoke this function again and write as a job. 07:59.430 --> 08:08.300 For example, driver reload and see that in both cases we have same age, 35, but with different jobs. 08:09.920 --> 08:10.390 All right. 08:11.360 --> 08:16.540 So I hope that everything is clear and you understand well how those methods work. 08:17.090 --> 08:20.240 But before we finish, I'm going to write one more example. 08:20.690 --> 08:28.070 Let's create another object and call it Niek, then create properties. 08:28.310 --> 08:32.870 First name and last name, Doe. 08:35.870 --> 08:44.270 Now I'm going to borrow fullName from personal object, I think that it's very simple now and you guess 08:44.270 --> 08:45.140 how to do that. 08:45.950 --> 08:49.250 So right in council, control the clock. 08:51.710 --> 08:57.840 Person, that full name, dot com. 09:00.230 --> 09:09.380 And here we need to pass as a parameter the second object that we have created, right, Nick Reloads 09:09.890 --> 09:11.840 and we have Nick Doe in concept. 09:13.540 --> 09:21.440 OK, I think that it's enough color and biometrics are very convenient and flexible tools and JavaScript 09:21.440 --> 09:25.170 and lots of JavaScript libraries and frameworks use them. 09:25.790 --> 09:31.520 I hope that you understood well how they work, and I believe that you can use those methods in your 09:31.520 --> 09:32.690 code successfully.