WEBVTT 1 00:00:01.164 --> 00:00:03.288 Let's now talk about arrow functions, 2 00:00:03.288 --> 00:00:07.455 which are yet another very cool addition to JavaScript. 3 00:00:08.460 --> 00:00:10.162 So suppose that we have an array 4 00:00:10.162 --> 00:00:12.588 with a couple of birth years, 5 00:00:12.588 --> 00:00:17.147 and that we wanna calculate the age for each of these years. 6 00:00:17.147 --> 00:00:20.397 So basically we would have const years. 7 00:00:21.996 --> 00:00:26.019 Okay remember that whenever we have a value or a variable 8 00:00:26.019 --> 00:00:28.155 that's not gonna change over time 9 00:00:28.155 --> 00:00:31.910 we use the const to declare that variable. 10 00:00:31.910 --> 00:00:35.410 And in this case this is totally the case. 11 00:00:37.706 --> 00:00:40.789 So just some random years here, 1982, 12 00:00:42.697 --> 00:00:44.280 and let's say 1937. 13 00:00:46.858 --> 00:00:51.027 Okay, so remember we can use the map method 14 00:00:51.027 --> 00:00:55.874 to loop over the array and then do some stuff with it. 15 00:00:55.874 --> 00:00:58.661 And that's how we do it in ES5. 16 00:00:58.661 --> 00:01:03.447 So again we start with ES5 here and then move on to ES6. 17 00:01:03.447 --> 00:01:07.614 So in ES6 we would use var to declare a variable, right? 18 00:01:10.038 --> 00:01:13.159 So ages, and I'm gonna call it ages five, 19 00:01:13.159 --> 00:01:14.909 because it's for ES5. 20 00:01:16.563 --> 00:01:19.313 And now we can say years dot map. 21 00:01:20.203 --> 00:01:23.382 And you remember all of this right? 22 00:01:23.382 --> 00:01:26.878 So we have our callback function here, 23 00:01:26.878 --> 00:01:31.395 and then our code inside of this callback function. 24 00:01:31.395 --> 00:01:33.879 And remember that here in the map method, 25 00:01:33.879 --> 00:01:36.254 we have access to the current element, 26 00:01:36.254 --> 00:01:40.646 the current index, and also the entire years array. 27 00:01:40.646 --> 00:01:42.152 So I'm just gonna call it el 28 00:01:42.152 --> 00:01:44.824 which stands for element here, okay. 29 00:01:44.824 --> 00:01:48.342 And if we then return something here, 30 00:01:48.342 --> 00:01:52.104 which will be 2016, minus the element in this case, 31 00:01:52.104 --> 00:01:56.400 it then gets stored into this array that we specified here. 32 00:01:56.400 --> 00:01:58.541 So this is how the map method works, 33 00:01:58.541 --> 00:02:00.458 so nothing new in here. 34 00:02:01.784 --> 00:02:05.701 Let's just simply console that log, this array. 35 00:02:07.139 --> 00:02:10.674 So that we can see that everything works. 36 00:02:10.674 --> 00:02:13.536 Alright so these are the four ages. 37 00:02:13.536 --> 00:02:18.392 Now in ES6 we have a more beautiful and quicker way 38 00:02:18.392 --> 00:02:21.033 of writing this part here of the code. 39 00:02:21.033 --> 00:02:23.271 So this callback function. 40 00:02:23.271 --> 00:02:25.493 So let me show you how. 41 00:02:25.493 --> 00:02:28.493 ES6, so now I use the const keyword. 42 00:02:30.675 --> 00:02:34.092 And I'll call it ages six, years dot map, 43 00:02:36.521 --> 00:02:37.996 and now comes the difference. 44 00:02:37.996 --> 00:02:41.009 So now we can use an arrow function, 45 00:02:41.009 --> 00:02:43.662 and how does the arrow function work in this case? 46 00:02:43.662 --> 00:02:45.617 Well it's just like this: 47 00:02:45.617 --> 00:02:49.784 element, then arrow function 2016 minus the element. 48 00:02:52.346 --> 00:02:53.513 And that's it. 49 00:02:54.372 --> 00:02:56.135 So let me explain it to you. 50 00:02:56.135 --> 00:02:58.000 So here we have the argument, 51 00:02:58.000 --> 00:03:00.531 here we have the arrow operator 52 00:03:00.531 --> 00:03:02.093 and then here we have 53 00:03:02.093 --> 00:03:05.593 what we have here in the return statement. 54 00:03:06.522 --> 00:03:10.330 So this one here is going to produce the exact same thing 55 00:03:10.330 --> 00:03:14.022 as all of this piece of code up here. 56 00:03:14.022 --> 00:03:16.907 So for a simple callback function like this here 57 00:03:16.907 --> 00:03:20.657 with only one argument, it really is as simple as this. 58 00:03:20.657 --> 00:03:23.902 So there's no function keyword, no return keyword, 59 00:03:23.902 --> 00:03:26.425 no parenthesis nor curly braces, 60 00:03:26.425 --> 00:03:29.707 all we need is the argument, the arrow, 61 00:03:29.707 --> 00:03:33.103 and then what we have in our return statement. 62 00:03:33.103 --> 00:03:35.970 So it really is as simple as this. 63 00:03:35.970 --> 00:03:38.993 And to see how much easier it is for us to write code, 64 00:03:38.993 --> 00:03:39.872 like this right. 65 00:03:39.872 --> 00:03:43.556 So we have to write a lot less code. 66 00:03:43.556 --> 00:03:47.139 Just to make sure, let's also log this one. 67 00:03:49.708 --> 00:03:52.544 Just to show you that it really worked. 68 00:03:52.544 --> 00:03:56.920 And here it is, so it produces the exact same result 69 00:03:56.920 --> 00:04:00.001 and we write a lot less code. 70 00:04:00.001 --> 00:04:02.440 Now if we have more than one argument here 71 00:04:02.440 --> 00:04:05.025 we actually have to provide the parenthesis 72 00:04:05.025 --> 00:04:07.381 so let me show you an example of that. 73 00:04:07.381 --> 00:04:08.381 So ages six. 74 00:04:09.953 --> 00:04:13.541 And now remember we cannot change a constant right? 75 00:04:13.541 --> 00:04:16.552 So let's change it here to let, alright, 76 00:04:16.552 --> 00:04:18.518 and so now it's a normal variable 77 00:04:18.518 --> 00:04:20.834 that we can mutate as we want. 78 00:04:20.834 --> 00:04:23.936 And let's now write it in a different way. 79 00:04:23.936 --> 00:04:25.436 So years, dot map. 80 00:04:26.540 --> 00:04:28.446 And once again remember 81 00:04:28.446 --> 00:04:30.906 that we have access to the current element, 82 00:04:30.906 --> 00:04:34.158 the current index, and the array itself. 83 00:04:34.158 --> 00:04:37.635 So now I want to access the element and also the index. 84 00:04:37.635 --> 00:04:41.055 And so I have two arguments, and so as I said before, 85 00:04:41.055 --> 00:04:43.961 I now have to use these parentheses here. 86 00:04:43.961 --> 00:04:47.378 So element, and index, and then let's use 87 00:04:50.012 --> 00:04:52.474 the knowledge that we gained before in the last lecture. 88 00:04:52.474 --> 00:04:55.585 Which are these template literals. 89 00:04:55.585 --> 00:04:57.710 So we're gonna put a string in here 90 00:04:57.710 --> 00:04:59.210 saying age element 91 00:05:03.304 --> 00:05:06.887 index, or actually index plus one, why not? 92 00:05:08.552 --> 00:05:11.268 You simply, and remember that in here 93 00:05:11.268 --> 00:05:14.770 we can even have expressions like this. 94 00:05:14.770 --> 00:05:17.437 So like 2016, minus the element. 95 00:05:21.486 --> 00:05:23.191 And so that's it. 96 00:05:23.191 --> 00:05:25.775 So now we used two arguments here 97 00:05:25.775 --> 00:05:29.942 and therefore we had to use these parentheses here, okay. 98 00:05:30.989 --> 00:05:34.239 Let's just console that log ages again. 99 00:05:37.392 --> 00:05:41.948 So age element one, age element two, three, and four. 100 00:05:41.948 --> 00:05:44.092 So that's a small change that we have to do 101 00:05:44.092 --> 00:05:46.052 when we have two arguments. 102 00:05:46.052 --> 00:05:49.462 Now if we have more than one line here, 103 00:05:49.462 --> 00:05:52.669 in this return part here let's say, 104 00:05:52.669 --> 00:05:54.396 actually it's just this one here. 105 00:05:54.396 --> 00:05:56.271 So if we have more than this line, 106 00:05:56.271 --> 00:05:58.355 we also have to use the curly braces 107 00:05:58.355 --> 00:06:00.525 that we have to use in normal functions. 108 00:06:00.525 --> 00:06:04.756 And also the return keyword is then not implicit 109 00:06:04.756 --> 00:06:07.340 and we have to write it again. 110 00:06:07.340 --> 00:06:10.212 So let's see an example of that as well. 111 00:06:10.212 --> 00:06:12.531 And I'm gonna call it ages six again 112 00:06:12.531 --> 00:06:16.114 'cause why create new variables here right? 113 00:06:19.868 --> 00:06:24.035 So again the same argument and I skip the parentheses here. 114 00:06:28.581 --> 00:06:32.442 Alright and again, I want more than one line of code, 115 00:06:32.442 --> 00:06:36.359 and therefore I need to use these curly braces. 116 00:06:38.990 --> 00:06:41.148 So let's create a variable here, 117 00:06:41.148 --> 00:06:43.267 which is the current year, right? 118 00:06:43.267 --> 00:06:47.434 So that it makes sense that we have more than one line. 119 00:06:48.561 --> 00:06:50.681 And I'm sure that you know by now 120 00:06:50.681 --> 00:06:52.931 how to get the current year 121 00:06:54.510 --> 00:06:57.053 because we did this in our project. 122 00:06:57.053 --> 00:07:01.220 Alright, and we can also calculate the eight here outside, 123 00:07:04.427 --> 00:07:08.010 so let's say now minus the current element. 124 00:07:09.530 --> 00:07:13.756 And then let me return this string that we had before. 125 00:07:13.756 --> 00:07:15.173 So this one here. 126 00:07:16.989 --> 00:07:18.636 And remember that in this case 127 00:07:18.636 --> 00:07:21.651 I actually have to write out the return statement here, 128 00:07:21.651 --> 00:07:23.955 the return keyword. 129 00:07:23.955 --> 00:07:26.788 Now here I want age and that's it. 130 00:07:35.645 --> 00:07:36.478 Okay. 131 00:07:37.955 --> 00:07:41.096 And here we go, so it worked again. 132 00:07:41.096 --> 00:07:44.429 So there are three ways of writing arrow functions. 133 00:07:44.429 --> 00:07:47.604 First one is put one argument and one line of code 134 00:07:47.604 --> 00:07:49.619 and that's the simplest form. 135 00:07:49.619 --> 00:07:51.523 If we then add another argument, 136 00:07:51.523 --> 00:07:53.124 we know to use the parentheses. 137 00:07:53.124 --> 00:07:56.184 And if we then add more lines of code, 138 00:07:56.184 --> 00:07:59.058 more than one, then we have to use the curly braces 139 00:07:59.058 --> 00:08:01.908 and the return keyword at the end. 140 00:08:01.908 --> 00:08:05.302 Alright, so this is how arrow functions work. 141 00:08:05.302 --> 00:08:07.067 And I'm absolutely sure that you see 142 00:08:07.067 --> 00:08:09.337 how useful they can be, right? 143 00:08:09.337 --> 00:08:13.576 But there's even more to arrow functions, that's not all. 144 00:08:13.576 --> 00:08:15.787 So let's move on now to the next lecture 145 00:08:15.787 --> 00:08:17.620 to learn all about it.