WEBVTT 00:06.280 --> 00:12.530 In this video you're going to learn a new concept in Essex called Arrow functions. 00:12.610 --> 00:15.160 So what's an arrow function. 00:15.160 --> 00:22.370 So let's first create an example using iOS 5 where you are an event listener to a button. 00:22.970 --> 00:24.430 So you've got a few buttons here. 00:24.460 --> 00:25.710 Each Watson has got an idea. 00:25.930 --> 00:28.120 So the first one is of course an idea button one. 00:28.240 --> 00:31.430 Then Watson too and so on. 00:31.480 --> 00:35.680 So we're gonna have such an event to the first button. 00:36.040 --> 00:37.910 Seven years five. 00:38.140 --> 00:39.700 You two to do that using 00:44.310 --> 00:49.200 the odd event listener method. 00:50.340 --> 01:02.500 So the event is click and function for example he's going to log something like Yes my 01:12.860 --> 01:16.180 say by Save and try this. 01:16.440 --> 01:17.240 Then he's logging. 01:17.250 --> 01:18.530 Yes. 01:18.820 --> 01:19.270 Perfect. 01:20.600 --> 01:25.250 Now in iOS 6 There's a new way of doing the same thing 01:30.820 --> 01:40.410 you're gonna do with that to the second button just because an the button to AND WE'RE GONNA USE AN 01:40.410 --> 01:41.880 ARROW function. 01:41.880 --> 01:49.690 So instead of using this function expression like what's the hero function is going to be slightly different. 01:49.740 --> 01:50.760 So instead of function 01:54.970 --> 02:02.910 we're going to have parentheses where you would normally place the arguments or the parameters of the 02:02.910 --> 02:04.050 function. 02:04.050 --> 02:07.920 So since we don't have any arguments that's gonna be empty. 02:08.110 --> 02:14.680 And then you're going to have an arrow and this is why we call them arrow functions. 02:14.760 --> 02:17.980 So let's make this one log six. 02:18.330 --> 02:27.310 So again the syntax is parentheses and then arrow which is a an equal sign followed by the A by a grievance 02:27.320 --> 02:28.050 sign. 02:28.160 --> 02:34.810 Then you've got your function code inside curly brackets or inside a block. 02:35.130 --> 02:42.080 So if I save and try this then we get the right result. 02:42.120 --> 02:44.590 So this is was an arrow function. 02:44.810 --> 02:48.730 It's now let's have a quick look at some other examples. 02:48.990 --> 02:51.750 So let's define an array 02:54.430 --> 03:07.890 list and have something like what's inside and let's create a new list using is five syntax. 03:07.990 --> 03:17.410 So this list is going to be created using the first list by taking every element and multiplying its 03:17.410 --> 03:18.820 by two. 03:19.180 --> 03:21.740 So it's quite a list one. 03:22.940 --> 03:31.240 And if you remember we're going to use the method map of arrays which takes a function that function 03:31.240 --> 03:38.890 is gonna be applied to the elements of the original array and will return the jury. 03:39.040 --> 03:46.900 So we want a function which takes a primary so X and returns X multiplied by two 03:51.120 --> 03:59.080 So now if I log at least 1 I'm gonna get 2 and 6. 03:59.440 --> 04:07.890 Right now in is 6 let's use an arrow function instead of this function expression like this 04:19.160 --> 04:25.170 so I'm gonna call it list to this time and our function is going to be in error error function. 04:25.170 --> 04:36.340 So instead of function of X we're going to have X inside parentheses and then an error like this so 04:36.370 --> 04:37.000 let's log 04:40.420 --> 04:44.980 leads to and you get the correct results. 04:44.980 --> 04:46.520 All right. 04:46.720 --> 04:55.070 Now there is a new way of writing this function he's gonna be a lot easier. 04:55.100 --> 05:02.270 So when you have a an error function which has of course a return statements like that you can actually 05:02.270 --> 05:06.670 simplify the whole function like this. 05:06.690 --> 05:14.820 So if I create a new list this time with three so instead of having X 05:18.880 --> 05:27.160 and then the arrow and then we could incite a block I can actually call before moving there. 05:27.240 --> 05:30.980 You don't have to place X inside parentheses. 05:31.080 --> 05:37.450 You can also write X like that if you like and that's correct. 05:38.050 --> 05:38.640 Okay. 05:38.800 --> 05:39.670 So now 05:42.620 --> 05:50.470 instead of having the code inside a block like that's we're going to delete all of this and instead 05:50.470 --> 05:55.270 of having the return statements we're gonna keep only what is being returned 06:00.670 --> 06:01.800 like this. 06:02.470 --> 06:04.120 So let's make sure that this is working. 06:05.230 --> 06:10.430 So list three and we guessed the correct results. 06:10.470 --> 06:10.890 Perfect. 06:11.580 --> 06:22.550 So this is a very easy way of writing aero functions and it makes your programming experience really 06:22.550 --> 06:24.320 really a lot easier. 06:24.320 --> 06:26.690 Now you gonna move to something really interesting. 06:26.720 --> 06:33.210 You're gonna be exploring the scope of this inside an arrow function. 06:33.260 --> 06:35.460 So first let's go back to iOS 5 06:40.380 --> 06:46.450 and see the scope of this inside a function. 06:46.490 --> 06:53.460 So for example let's create an event listener which will listen to a click event on that button. 06:55.270 --> 06:59.530 So let's copy this code and change it slightly. 06:59.530 --> 07:12.600 So we are looking after the button of I.D. 1 3 and this time let's log this those in a shameful 07:18.160 --> 07:18.420 right. 07:18.420 --> 07:18.690 So 07:22.510 --> 07:23.870 if we save earned 07:27.570 --> 07:42.090 click on the button we get the correct in an HMO of votes bottom and that's because this here is referring 07:42.900 --> 07:49.010 to 0 wasn't 2 which we are touching the aren't event listener method 07:51.760 --> 07:57.240 and your you must be already familiar with this it is white. 07:58.140 --> 08:13.560 All right when you are touching an event listener to an object you know that's functions inside those 08:13.590 --> 08:18.730 events listener or inside bus method. 08:19.570 --> 08:26.180 They have that this element referring to the objects. 08:26.180 --> 08:33.860 So this here is the button okay. 08:34.180 --> 08:34.720 Right. 08:34.750 --> 08:40.910 So now let's move to E6 and use an arrow function. 08:41.160 --> 08:41.850 So this time 08:44.780 --> 08:50.090 let's copy this code and change it to Watson for 08:54.150 --> 08:58.490 and we gonna be logging this bot in an HMO 09:03.020 --> 09:13.590 so let's save and try this and we get undefined so instead of getting the correct in a shame metaphor 09:13.630 --> 09:23.950 Watson we're guessing and defined and the reason why is because this has a lexical scope inside arrow 09:23.950 --> 09:30.890 functions which is the same scope as the function now 0 function. 09:30.910 --> 09:46.390 Well our aero function has got a scope which is or a lexical scope which is window all right and this 09:46.660 --> 09:48.120 will take. 09:48.220 --> 09:59.530 We follow the same lexical scope of our function even though the function is actually called inside 10:00.040 --> 10:05.540 a method which is attached to an object. 10:05.820 --> 10:11.790 So you wouldn't you would expect this to refer to the button if you use an arrow function. 10:11.790 --> 10:13.110 It doesn't work like that. 10:13.140 --> 10:20.400 This will refer to the same lexical scope of the function and the lexical scope of this function here 10:20.820 --> 10:23.740 is window y. 10:24.130 --> 10:31.780 So this here is referring to the window objects right. 10:31.980 --> 10:32.450 Perfect. 10:33.000 --> 10:35.360 So this is very important to understand. 10:35.400 --> 10:36.570 So you gonna have another example. 10:36.580 --> 10:41.710 Just make sure that you get this white. 10:42.020 --> 10:49.620 So first let's go back to iOS 5 and create an object called quality player file. 10:50.880 --> 10:54.740 So this object is going to have properties and methods. 10:54.750 --> 10:55.980 So it's give us a name 11:00.320 --> 11:11.340 and let's give us a property of so we made a point a function. 11:11.510 --> 11:13.950 OK. 11:14.340 --> 11:22.210 This function will attach an event listener to that button. 11:22.370 --> 11:23.060 Right. 11:23.120 --> 11:27.840 So it selects the button does copy the code from the 11:30.910 --> 11:34.410 selecting the button five. 11:34.810 --> 11:42.810 And we are having an event listener so the event is gonna be click 11:51.930 --> 11:53.260 on the function. 11:53.370 --> 11:54.480 He's gonna be asked following 11:57.740 --> 11:59.180 so let's log 12:02.270 --> 12:11.260 Hello plus this so the idea here is to log. 12:11.360 --> 12:12.070 Hello. 12:12.110 --> 12:15.690 Followed by the name of our player. 12:15.860 --> 12:17.750 Now if you run this code 12:21.720 --> 12:23.130 you cause an error somewhere. 12:56.480 --> 13:03.060 This time let's go back to his wife first and create an object 13:06.020 --> 13:07.440 let's call it play five. 13:07.730 --> 13:14.360 So this object is gonna have a property name and a method 13:17.080 --> 13:17.920 let's call it 13:23.930 --> 13:25.940 so inside this method. 13:25.930 --> 13:30.000 We're going to call this at some points. 13:30.070 --> 13:30.720 All right. 13:30.730 --> 13:40.440 So while this method is gonna be doing it's going to be a touching event to that button. 13:40.780 --> 13:50.860 So let's select the button using its I.D. button five and we are adding an event listener here. 13:51.040 --> 13:58.270 The event is click and the function is gonna do something like logging. 13:59.270 --> 13:59.650 Allow 14:02.270 --> 14:07.100 followed by the name of the play. 14:07.140 --> 14:12.710 So this dot name we're gonna see if we get the correct results. 14:12.720 --> 14:12.950 OK. 14:14.670 --> 14:15.060 So 14:26.990 --> 14:35.340 it is call the method click and see what we get. 14:35.340 --> 14:39.170 So if we click on the button we get. 14:39.240 --> 14:44.940 Hello and we don't think we don't get anything after that. 14:45.150 --> 14:49.420 No if we just log this like that's 14:52.220 --> 15:01.550 we get the button to it to which we attach the events using the events. 15:01.570 --> 15:07.170 Listen the method so we were expecting 15:09.980 --> 15:19.130 to get the objects itself but we got the wasn't itself and this is absolutely normal because we know 15:19.130 --> 15:27.200 that s e is five if you have a function like that's inside a method attached to an object you know that 15:27.290 --> 15:37.010 this inside the function is going to refer to the object and if you remember in is 5 we had a way to 15:37.010 --> 15:45.820 overcome that you had to create another variable before attaching the method so let's call it for example 15:45.830 --> 15:53.300 player and you store the elements this inside this variable. 15:53.330 --> 15:56.750 So this is how we used to overcome this in years five. 15:57.860 --> 16:06.820 Now if you try this and you call a player right there then you know that you're gonna get the correct 16:06.910 --> 16:14.770 value of this which is the objects to which click is attached. 16:14.890 --> 16:15.400 Right. 16:15.400 --> 16:25.630 So again this here is inside Vaughn's function or that method and that method is assigned to those objects. 16:25.630 --> 16:28.760 So this is gonna refer to that objects. 16:28.810 --> 16:31.030 This is applicable in iOS 5. 16:31.210 --> 16:37.330 So let's try and you get this time the objects. 16:37.330 --> 16:44.500 So if you log player not name you should get the correct results. 16:44.500 --> 16:45.050 All right. 16:45.100 --> 16:46.920 So that's what's happening in mind. 16:47.050 --> 16:53.550 Now let's move to iOS 6 now with the lexical scope of this inside iOS 6. 16:53.590 --> 16:55.160 Things are going to change. 16:55.810 --> 16:56.860 So it is copy this code 17:03.430 --> 17:15.710 let's call a player play player 6 and the button button six this time is delete that line 17:18.550 --> 17:20.830 and this time we're gonna use an arrow. 17:20.830 --> 17:24.450 Function like this. 17:24.710 --> 17:28.300 So parentheses then arrow 17:31.040 --> 17:33.470 then we are logging this time. 17:33.770 --> 17:34.340 This 17:37.770 --> 17:43.640 Dot's name so let's see what happens. 17:46.620 --> 17:54.360 And we aren't getting job now unlike is why this is working straightaway without having to add a new 17:54.360 --> 17:57.730 line storing this right there. 17:57.840 --> 18:04.170 And the reason why is because this becomes lexical here because it's inside an arrow function. 18:05.280 --> 18:14.010 So the scope of this is lexical and the lexical scope here is inside the player six objects. 18:14.010 --> 18:24.370 So this will always refer to the player six objects wherever you call is inside the objects. 18:24.840 --> 18:33.490 If you wrote this line in the global scope then this would refer to the window object. 18:34.050 --> 18:37.610 And that's the lexical scope of your function. 18:37.650 --> 18:38.900 In that case. 18:39.270 --> 18:46.600 Now again the lexical scope of your function in this case is place X where objects. 18:46.600 --> 18:47.530 All right. 18:47.590 --> 18:50.560 So hopefully this makes all sense. 18:50.650 --> 18:54.740 And then next in the next few videos we're going to cover other new features in here. 18:54.760 --> 18:55.090 Six.