WEBVTT 1 00:00:01.140 --> 00:00:03.468 So we learned about function declarations 2 00:00:03.468 --> 00:00:06.260 and expressions in the last video 3 00:00:06.260 --> 00:00:08.320 but there is actually a third type 4 00:00:08.320 --> 00:00:12.150 of function that was added to JavaScript in ES6 5 00:00:12.150 --> 00:00:13.963 and that's the arrow function. 6 00:00:15.210 --> 00:00:18.380 And an arrow function is simply a special form 7 00:00:18.380 --> 00:00:21.170 of function expression that is shorter 8 00:00:21.170 --> 00:00:23.900 and therefore faster to write. 9 00:00:23.900 --> 00:00:26.950 So let's actually get back this function expression 10 00:00:26.950 --> 00:00:28.490 from before here. 11 00:00:28.490 --> 00:00:30.120 So from the previous lecture 12 00:00:30.120 --> 00:00:33.040 just so that we have a comparison. 13 00:00:33.040 --> 00:00:34.753 So like a reference point. 14 00:00:36.390 --> 00:00:40.793 And so now let's write the arrow function. 15 00:00:41.650 --> 00:00:43.933 And this is how we write an arrow function. 16 00:00:45.100 --> 00:00:47.400 So again, we want the birthYeah 17 00:00:47.400 --> 00:00:50.220 because we want to calculate the age again 18 00:00:50.220 --> 00:00:52.950 and then we write an arrow 19 00:00:52.950 --> 00:00:54.530 and that's the reason why this function 20 00:00:54.530 --> 00:00:56.480 is called arrow function. 21 00:00:56.480 --> 00:00:59.810 And then we simply write what we want to return. 22 00:00:59.810 --> 00:01:01.130 So in this case, 23 00:01:01.130 --> 00:01:03.613 that's 2037 24 00:01:03.613 --> 00:01:07.940 minus the birthYeah and that's it. 25 00:01:07.940 --> 00:01:11.220 Now, to finish, we actually want 26 00:01:11.220 --> 00:01:13.630 to be able to use this function. 27 00:01:13.630 --> 00:01:16.630 So let's again store it in a variable, 28 00:01:16.630 --> 00:01:19.653 just like we did here with this function expression. 29 00:01:21.560 --> 00:01:26.560 So let's say const calcAge3 this time 30 00:01:27.300 --> 00:01:29.510 and then we set that variable 31 00:01:29.510 --> 00:01:31.981 to this function here, okay? 32 00:01:31.981 --> 00:01:34.910 So as I said, this is a special form 33 00:01:34.910 --> 00:01:36.380 of a function expression 34 00:01:36.380 --> 00:01:39.860 because it still is a function expression actually. 35 00:01:39.860 --> 00:01:42.860 So it's a value, all of this, 36 00:01:42.860 --> 00:01:44.930 that we assign to this variable. 37 00:01:44.930 --> 00:01:48.000 So just like this function expression up here. 38 00:01:48.000 --> 00:01:49.300 But this one, as you see, 39 00:01:49.300 --> 00:01:52.430 is a lot easier and faster to write. 40 00:01:52.430 --> 00:01:53.730 The first reason for that 41 00:01:53.730 --> 00:01:56.085 is that we don't need the curly braces, 42 00:01:56.085 --> 00:01:59.090 like we have here, to define a code block. 43 00:01:59.090 --> 00:02:03.810 And second is that the return actually happens implicitly. 44 00:02:03.810 --> 00:02:07.230 So this value here will automatically be returned 45 00:02:07.230 --> 00:02:12.050 without us having to explicitly write the return keyword. 46 00:02:12.050 --> 00:02:12.920 Okay? 47 00:02:12.920 --> 00:02:16.280 So this is excellent for simple one-liner functions. 48 00:02:16.280 --> 00:02:17.990 And you will see throughout the course 49 00:02:17.990 --> 00:02:20.400 that this is gonna be extremely helpful 50 00:02:20.400 --> 00:02:21.923 in certain situations. 51 00:02:23.150 --> 00:02:25.000 And now to use this function, 52 00:02:25.000 --> 00:02:27.220 it, of course, works the exact same way 53 00:02:27.220 --> 00:02:29.380 as using all the other functions. 54 00:02:29.380 --> 00:02:31.440 So we call calcAge3 55 00:02:32.570 --> 00:02:37.150 just like we called the other calcAge functions. 56 00:02:37.150 --> 00:02:38.730 Okay. 57 00:02:38.730 --> 00:02:43.730 And again, we save the returned value here to a variable 58 00:02:45.485 --> 00:02:49.633 and then let's just check it out here. 59 00:02:51.870 --> 00:02:54.160 And so this one should be 46 again, 60 00:02:54.160 --> 00:02:56.210 just like we had in the previous lecture. 61 00:02:57.090 --> 00:02:59.493 And yeah, it works. 62 00:03:00.360 --> 00:03:02.900 So indeed, the value that we calculated 63 00:03:02.900 --> 00:03:05.740 was returned automatically without us having 64 00:03:05.740 --> 00:03:07.950 to write the return keyword. 65 00:03:07.950 --> 00:03:10.940 Now, you see that here we also didn't need any parentheses 66 00:03:10.940 --> 00:03:12.530 or anything like that. 67 00:03:12.530 --> 00:03:14.893 Just this here is the function. 68 00:03:15.960 --> 00:03:16.793 Okay? 69 00:03:17.875 --> 00:03:19.630 Now, this is actually just the simplest form, 70 00:03:19.630 --> 00:03:22.761 which is when we only have exactly one parameter 71 00:03:22.761 --> 00:03:26.050 and only basically one line of code 72 00:03:26.050 --> 00:03:28.430 in which we want to return something. 73 00:03:28.430 --> 00:03:30.540 But it gets a little bit more complex 74 00:03:30.540 --> 00:03:34.350 when we add more parameters or more code. 75 00:03:34.350 --> 00:03:36.780 So let's now write another function 76 00:03:37.620 --> 00:03:39.630 and we can get rid of this one 77 00:03:39.630 --> 00:03:42.040 since it was just a copy anyway. 78 00:03:42.040 --> 00:03:44.750 And so let's say that we want to calculate 79 00:03:44.750 --> 00:03:49.050 how many years a person has left until retirement. 80 00:03:49.050 --> 00:03:52.413 So let's call this function yearsUntilRetirement. 81 00:03:56.790 --> 00:03:59.600 And then we set that equal to a function. 82 00:03:59.600 --> 00:04:02.547 And once again, let's pass in the birthYeah. 83 00:04:04.730 --> 00:04:06.100 Then the arrow again 84 00:04:06.100 --> 00:04:08.400 but now, here we need some more code 85 00:04:08.400 --> 00:04:10.550 because to calculate the number of years 86 00:04:10.550 --> 00:04:14.250 until the retirement based on the birthYeah alone, 87 00:04:14.250 --> 00:04:16.290 we first need to calculate the age, 88 00:04:16.290 --> 00:04:19.760 and then from there, we need to calculate the retirement age 89 00:04:19.760 --> 00:04:21.423 minus the current age. 90 00:04:22.420 --> 00:04:24.700 So we need more lines of code 91 00:04:24.700 --> 00:04:28.910 and so we are back to actually needing the curly braces 92 00:04:28.910 --> 00:04:32.270 in order to define a code block like this. 93 00:04:32.270 --> 00:04:34.260 So let's do what we just said. 94 00:04:34.260 --> 00:04:37.230 So calculate the age based on the birth year. 95 00:04:37.230 --> 00:04:41.790 So 2037 minus the birthYeah 96 00:04:42.690 --> 00:04:45.060 and now let's calculate 97 00:04:46.760 --> 00:04:49.003 the years until retirement basically. 98 00:04:49.890 --> 00:04:53.975 And so let's say that the retirement age is 65 years, 99 00:04:53.975 --> 00:04:57.963 as it is in many countries here in Europe at least. 100 00:04:58.890 --> 00:05:02.430 So 65 and then minus the current age. 101 00:05:02.430 --> 00:05:06.090 And that will then give us how many years we have left. 102 00:05:06.090 --> 00:05:08.320 And now to return this retirement, 103 00:05:08.320 --> 00:05:13.320 we actually need to write the return keyword explicitly. 104 00:05:14.400 --> 00:05:17.460 So we can only omit the return here 105 00:05:17.460 --> 00:05:21.320 in case we have a one-liner function like here. 106 00:05:21.320 --> 00:05:22.540 But if we have more, 107 00:05:22.540 --> 00:05:25.293 then we need to do the return still. 108 00:05:26.149 --> 00:05:29.540 So let's now run this function. 109 00:05:29.540 --> 00:05:32.230 So yearsUntilRetirement 110 00:05:32.230 --> 00:05:33.950 and then again some year 111 00:05:34.970 --> 00:05:39.030 and then as always, we could capture the return value 112 00:05:39.030 --> 00:05:40.600 into a variable. 113 00:05:40.600 --> 00:05:43.620 But this time, let's actually log that value 114 00:05:43.620 --> 00:05:45.003 to the console directly. 115 00:05:46.010 --> 00:05:48.370 So console.log 116 00:05:50.020 --> 00:05:53.093 and yeah, so let's try that. 117 00:05:54.140 --> 00:05:55.593 And so it's 19. 118 00:05:56.735 --> 00:06:00.400 And that makes sense because 65 minus 46, 119 00:06:00.400 --> 00:06:03.800 which is the age, is 19. 120 00:06:03.800 --> 00:06:04.820 Okay? 121 00:06:04.820 --> 00:06:08.010 So that's the scenario when we have one parameter here 122 00:06:08.010 --> 00:06:11.670 and then more than one line of code basically. 123 00:06:11.670 --> 00:06:13.210 And remember, in that situation, 124 00:06:13.210 --> 00:06:16.220 we need the return statement here. 125 00:06:16.220 --> 00:06:19.760 But now, what if we had multiple parameters? 126 00:06:19.760 --> 00:06:20.810 Well, then we need 127 00:06:20.810 --> 00:06:24.290 to wrap the parameters here into parentheses. 128 00:06:24.290 --> 00:06:26.980 So in VS Code, we can just select a variable 129 00:06:26.980 --> 00:06:29.290 and then write parentheses 130 00:06:29.290 --> 00:06:32.400 and then it will automatically wrap this variable 131 00:06:32.400 --> 00:06:35.620 into parentheses on both sides. 132 00:06:35.620 --> 00:06:37.560 So let's say we want the birthYeah 133 00:06:37.560 --> 00:06:39.960 but also the firstName 134 00:06:39.960 --> 00:06:42.910 so that we can like return something else, 135 00:06:42.910 --> 00:06:44.260 like a sentence. 136 00:06:44.260 --> 00:06:46.800 So let's comment out this part here 137 00:06:46.800 --> 00:06:49.830 and instead, let's return a string. 138 00:06:49.830 --> 00:06:52.070 And again, we're using a template string here 139 00:06:52.070 --> 00:06:53.830 to build that string 140 00:06:53.830 --> 00:06:57.600 and basically, I want to say like firstName retires 141 00:06:57.600 --> 00:06:59.760 in x years. 142 00:06:59.760 --> 00:07:02.783 So let's use that placeholder here. 143 00:07:03.830 --> 00:07:08.830 So firstName retires in 144 00:07:09.080 --> 00:07:11.663 and then we use that value that we just calculated. 145 00:07:12.740 --> 00:07:14.023 So retirement. 146 00:07:16.000 --> 00:07:17.210 Give it a save here 147 00:07:17.210 --> 00:07:18.950 and now we need to call it 148 00:07:18.950 --> 00:07:22.540 and so let's add the second argument here 149 00:07:22.540 --> 00:07:25.500 so that it will go to the second parameter. 150 00:07:25.500 --> 00:07:27.900 So the first one here is, of course, birthYeah 151 00:07:27.900 --> 00:07:30.660 and so that corresponds to 1991 152 00:07:30.660 --> 00:07:34.080 and now the second argument will go to the second parameter, 153 00:07:34.080 --> 00:07:35.230 which is the firstName. 154 00:07:36.350 --> 00:07:38.360 So let's say Jonas 155 00:07:38.360 --> 00:07:40.020 and let's just call it twice 156 00:07:41.110 --> 00:07:42.830 so that it actually makes more sense 157 00:07:42.830 --> 00:07:46.770 that we even put this logic into its own function. 158 00:07:46.770 --> 00:07:51.110 So let's say that Bob was born in 1980 159 00:07:52.420 --> 00:07:54.793 and so let's see how many years he has left. 160 00:07:58.010 --> 00:08:00.220 So Jonas retires in 19 years, 161 00:08:00.220 --> 00:08:03.300 Bob retires in eight years. 162 00:08:03.300 --> 00:08:07.980 Great, and that's essentially how the arrow functions work. 163 00:08:08.983 --> 00:08:10.450 You just need to keep in mind the couple 164 00:08:10.450 --> 00:08:13.320 of different scenarios that there are regarding 165 00:08:13.320 --> 00:08:14.920 to the number of lines of code 166 00:08:14.920 --> 00:08:18.010 that you need and the number of parameters. 167 00:08:18.010 --> 00:08:19.550 So as you add more code 168 00:08:19.550 --> 00:08:22.830 and more parameters, it gets a little bit more complex 169 00:08:22.830 --> 00:08:24.420 and we kind of lose the advantage 170 00:08:24.420 --> 00:08:26.560 of using an arrow function. 171 00:08:26.560 --> 00:08:30.320 So now you might ask the same question as before. 172 00:08:30.320 --> 00:08:33.130 What type of function should I use? 173 00:08:33.130 --> 00:08:35.493 Should I use arrow functions for everything 174 00:08:35.493 --> 00:08:37.880 since they're so easy to write? 175 00:08:37.880 --> 00:08:40.270 And well, the answer is no. 176 00:08:40.270 --> 00:08:42.484 But it's also complicated. 177 00:08:42.484 --> 00:08:45.440 That's because there is another fundamental difference 178 00:08:45.440 --> 00:08:49.150 between the arrow function and more traditional functions. 179 00:08:49.150 --> 00:08:52.620 So function declarations and function expressions. 180 00:08:52.620 --> 00:08:54.520 It's the fact that arrow function 181 00:08:54.520 --> 00:08:57.750 do not get a so-called this keyword. 182 00:08:57.750 --> 00:09:01.550 And this, once more, is a topic for much later. 183 00:09:01.550 --> 00:09:05.495 So remember that learning is not at all a linear process 184 00:09:05.495 --> 00:09:09.100 and so topics need to build up on one another 185 00:09:09.100 --> 00:09:10.750 in an incremental way. 186 00:09:10.750 --> 00:09:13.280 Otherwise, you would just get super overwhelmed 187 00:09:13.280 --> 00:09:16.490 and super stressed if I were to tell you everything 188 00:09:16.490 --> 00:09:17.483 at the same time. 189 00:09:17.483 --> 00:09:19.894 So for now, we will actually keep 190 00:09:19.894 --> 00:09:22.900 using mainly the normal functions, 191 00:09:22.900 --> 00:09:26.180 except for very simple one-liner functions. 192 00:09:26.180 --> 00:09:28.663 For example, like this one here. 193 00:09:28.663 --> 00:09:31.100 And that doesn't mean that arrow functions 194 00:09:31.100 --> 00:09:32.400 are not important. 195 00:09:32.400 --> 00:09:33.790 They absolutely are 196 00:09:33.790 --> 00:09:36.696 and I love them and I use them all the time. 197 00:09:36.696 --> 00:09:40.090 Sometimes I don't write regular functions at all. 198 00:09:40.090 --> 00:09:43.280 But again, you cannot yet understand all the implications 199 00:09:43.280 --> 00:09:45.240 of using arrow functions. 200 00:09:45.240 --> 00:09:47.036 So for now again, we will keep using 201 00:09:47.036 --> 00:09:50.423 probably the function expressions the most.