WEBVTT 00:00.690 --> 00:06.090 Before we actually represent different behavior of aero functions than it's in case of standard functions, 00:06.510 --> 00:12.160 I want to give you a little example and show how convenient is to use aero functions with our helpers. 00:12.750 --> 00:15.200 I'm not going to write the code in S5. 00:15.210 --> 00:16.290 Let's use directly. 00:16.290 --> 00:22.890 It's six here, so create numbers right away and place some numbers. 00:25.300 --> 00:31.840 Then assume that we want to create a new era for that, I will use one of the era helper methods, which 00:31.840 --> 00:41.230 is map, so create variable and call it double assign to it numbers dot map. 00:43.730 --> 00:48.980 So here we don't need to use parentheses because we are going to use only one parameter, which will 00:48.980 --> 00:50.570 be the current item, so. 00:50.570 --> 00:59.120 Right, no, then use error function and then number multiplied two to. 01:01.530 --> 01:04.170 Let's run in council the variable double. 01:07.750 --> 01:13.030 Then reload and we have new right, which consists of double numbers. 01:14.140 --> 01:19.930 All right, just for information, I would like to recommend that when you are going to be using a helper's 01:20.470 --> 01:26.650 would be more convenient to use aero functions with them because those helpers actually have one statement. 01:27.100 --> 01:30.160 Therefore, it will allow you to write code in more concise form. 01:31.600 --> 01:37.510 OK, actually, we have seen mostly the syntactic changes in aero function so far, which are made in 01:37.510 --> 01:38.410 S6 version. 01:38.860 --> 01:43.990 But there is also one big difference between standard and aero functions, which you should definitely 01:43.990 --> 01:44.900 take into account. 01:45.400 --> 01:47.950 I'm going to talk about lexical this. 01:48.890 --> 01:54.500 In order to understand what it means, I don't want to talk a lot about theory, let's just write an 01:54.500 --> 01:57.200 example and see what it means at first. 01:57.200 --> 02:03.620 Let's write is five could create object and call it person yes. 02:03.620 --> 02:04.070 Five. 02:06.710 --> 02:19.670 Then in 30 years, some properties, first name as Niek and last name as DOP, then create method inside 02:19.670 --> 02:20.690 objects and call it. 02:22.240 --> 02:27.730 Say full name and assign to it anonymous function. 02:30.190 --> 02:38.410 Just for demonstration purposes, I'm going to return function in which we will get full name of the 02:38.410 --> 02:38.830 person. 02:39.810 --> 02:47.130 So right here at Castle, that lock and we're going to use this, which, as you remember, is special 02:47.130 --> 02:52.720 variable and it points to an object and actually depends on where it exists, lexically. 02:53.250 --> 02:53.700 So. 02:53.790 --> 02:54.330 Right. 02:54.330 --> 02:55.860 This dot first name. 02:57.950 --> 03:01.940 Plus space here, then, plus these last name. 03:03.850 --> 03:12.700 Let's invoke, say, fullname method, right person is five that say full name in order to invoke return 03:12.700 --> 03:16.360 function, we just need to place you another parentheses. 03:18.190 --> 03:25.000 Before I reload, I want you to think about what will be the result, I'm sure you guessed that result 03:25.000 --> 03:26.740 is undefined values. 03:27.790 --> 03:34.350 It's because this function is not bound to any specific object, and in that case, this variable points 03:34.360 --> 03:35.590 the global window object. 03:36.990 --> 03:42.030 In order to prove that, let's run it in council, right, a lot like this. 03:44.850 --> 03:52.140 You see that we got window object, as you remember, we used a little trick here, we have to create 03:52.150 --> 04:00.000 variable outside of this function and generally this variable is called us self or sometimes that let's 04:00.000 --> 04:01.710 call it that. 04:03.360 --> 04:06.720 And we have to assign to this variable this. 04:08.730 --> 04:16.770 Which in this case points to person is five object, then instead of this variable insert here that 04:17.340 --> 04:20.600 if we reload, we will get Negrito. 04:21.150 --> 04:24.960 And also you see that that variable points to person object. 04:25.880 --> 04:32.360 All right, there is another way to do that, which allows us to avoid creating new variable, we can 04:32.360 --> 04:34.160 use your BINDE method. 04:35.300 --> 04:43.610 And indicating it this variable as an argument which actually points to person object also, let's change 04:43.610 --> 04:45.560 back of that into this. 04:47.000 --> 04:49.580 And delete that variable. 04:50.860 --> 04:51.370 Reload. 04:52.750 --> 04:54.130 And we have the same output. 04:55.390 --> 04:59.080 Obviously, instead of this, we can insert your personal object. 05:00.110 --> 05:01.340 Person is five. 05:02.680 --> 05:04.780 And the result will be the same. 05:05.750 --> 05:11.920 All right, so we need all of this stuff in is five, but in Essex, everything is much more simpler. 05:12.440 --> 05:14.460 We just need to create variables. 05:14.480 --> 05:16.700 Also, we don't need to use Binta method. 05:17.180 --> 05:18.920 We can just use our function. 05:19.370 --> 05:22.880 And I think that it's one of the best use case of arole functions. 05:23.780 --> 05:30.590 OK, let's copy this function and transform it as ESX version right here const. 05:32.550 --> 05:33.930 Person, yes, six. 05:36.970 --> 05:37.420 Then. 05:38.580 --> 05:41.400 Change function into a role function. 05:45.310 --> 05:52.630 I'm going to transform also this string value into template string. 05:58.480 --> 06:04.480 Then delete, find method and also write here below person S6. 06:06.720 --> 06:10.300 Let's reload and we have the same needed result. 06:11.010 --> 06:18.370 It happens because in case of error functions, this variable points to functions surrounding scope. 06:19.260 --> 06:24.980 So in this case, this variable in Saiful named Method points to person object. 06:25.500 --> 06:31.860 And because of that, Saiful name function scope is surrounding scope of our written function. 06:32.400 --> 06:37.140 Therefore, this variable in return function points to person object. 06:38.510 --> 06:39.140 Makes sense. 06:40.850 --> 06:46.940 OK, so this is very helpful and important feature of arrow functions because it allows us to avoid 06:46.940 --> 06:50.860 using the tricks which we had to use in case of S5 code. 06:51.890 --> 06:54.080 This stuff may be a bit confusing for you. 06:54.080 --> 06:56.120 So I'm going to use another example. 06:57.260 --> 07:02.300 As you see, we have here having elements and I'm going to attach that listener to this element. 07:02.870 --> 07:06.710 So write documents and use your selector method. 07:08.420 --> 07:19.760 Place your H1 hiding element, then attach event listener with click event and also write your anonymous 07:19.760 --> 07:20.270 function. 07:22.730 --> 07:26.280 OK, let's check what this variable points here, right? 07:26.300 --> 07:27.890 Consider this. 07:31.220 --> 07:39.100 Reload, then click on Harring, and it said that it points to collect Element itself, let's create 07:39.110 --> 07:45.440 function expression inside anonymous function, right variable A equals to function. 07:47.550 --> 07:54.690 And let's say we want to change the color of having elements into Red Unclick, so write this thought. 07:55.600 --> 07:58.030 Style, that color. 07:59.440 --> 08:04.960 Equals to read and then invoke this function. 08:06.690 --> 08:08.790 Reload, then click. 08:09.770 --> 08:15.710 And we have an error, that's because in this case, as you order to get this variable inside function 08:15.710 --> 08:23.570 eight points to global window object, if we transform function into arole function, then it's this 08:23.570 --> 08:26.330 variable will act like outer functions. 08:26.360 --> 08:26.720 This. 08:27.940 --> 08:32.680 So remote, Callick and the Hadrien became red. 08:34.110 --> 08:37.180 All right, I'm sure that now it makes sense to you. 08:37.720 --> 08:40.000 Before we finish, I am going to show you one thing. 08:40.510 --> 08:47.020 When we deal with objects with S6 and also objects contain methods, for example, in this case, person 08:47.020 --> 08:47.590 ethics. 08:48.100 --> 08:49.960 Here we have a method Saiful name. 08:50.320 --> 08:56.860 We're able to get rid of function keyword and place parentheses with Machel's name, that it will work 08:56.860 --> 09:01.300 in the same way, but as a regular function and not as Arul function. 09:01.810 --> 09:04.640 Otherwise we wouldn't get your Nito in council. 09:05.790 --> 09:08.860 OK, so we have learned how error functions. 09:08.860 --> 09:15.670 Work in Essex and I recommend you to take into account the issue regarding this variable in order to 09:15.670 --> 09:17.530 avoid weight box errors. 09:18.550 --> 09:20.220 All right, let's move on.