Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,140 --> 00:00:03,468 So we learned about function declarations 2 2 00:00:03,468 --> 00:00:06,260 and expressions in the last video 3 3 00:00:06,260 --> 00:00:08,320 but there is actually a third type 4 4 00:00:08,320 --> 00:00:12,150 of function that was added to JavaScript in ES6 5 5 00:00:12,150 --> 00:00:13,963 and that's the arrow function. 6 6 00:00:15,210 --> 00:00:18,380 And an arrow function is simply a special form 7 7 00:00:18,380 --> 00:00:21,170 of function expression that is shorter 8 8 00:00:21,170 --> 00:00:23,900 and therefore faster to write. 9 9 00:00:23,900 --> 00:00:26,950 So let's actually get back this function expression 10 10 00:00:26,950 --> 00:00:28,490 from before here. 11 11 00:00:28,490 --> 00:00:30,120 So from the previous lecture 12 12 00:00:30,120 --> 00:00:33,040 just so that we have a comparison. 13 13 00:00:33,040 --> 00:00:34,753 So like a reference point. 14 14 00:00:36,390 --> 00:00:40,793 And so now let's write the arrow function. 15 15 00:00:41,650 --> 00:00:43,933 And this is how we write an arrow function. 16 16 00:00:45,100 --> 00:00:47,400 So again, we want the birthYeah 17 17 00:00:47,400 --> 00:00:50,220 because we want to calculate the age again 18 18 00:00:50,220 --> 00:00:52,950 and then we write an arrow 19 19 00:00:52,950 --> 00:00:54,530 and that's the reason why this function 20 20 00:00:54,530 --> 00:00:56,480 is called arrow function. 21 21 00:00:56,480 --> 00:00:59,810 And then we simply write what we want to return. 22 22 00:00:59,810 --> 00:01:01,130 So in this case, 23 23 00:01:01,130 --> 00:01:03,613 that's 2037 24 24 00:01:03,613 --> 00:01:07,940 minus the birthYeah and that's it. 25 25 00:01:07,940 --> 00:01:11,220 Now, to finish, we actually want 26 26 00:01:11,220 --> 00:01:13,630 to be able to use this function. 27 27 00:01:13,630 --> 00:01:16,630 So let's again store it in a variable, 28 28 00:01:16,630 --> 00:01:19,653 just like we did here with this function expression. 29 29 00:01:21,560 --> 00:01:26,560 So let's say const calcAge3 this time 30 30 00:01:27,300 --> 00:01:29,510 and then we set that variable 31 31 00:01:29,510 --> 00:01:31,981 to this function here, okay? 32 32 00:01:31,981 --> 00:01:34,910 So as I said, this is a special form 33 33 00:01:34,910 --> 00:01:36,380 of a function expression 34 34 00:01:36,380 --> 00:01:39,860 because it still is a function expression actually. 35 35 00:01:39,860 --> 00:01:42,860 So it's a value, all of this, 36 36 00:01:42,860 --> 00:01:44,930 that we assign to this variable. 37 37 00:01:44,930 --> 00:01:48,000 So just like this function expression up here. 38 38 00:01:48,000 --> 00:01:49,300 But this one, as you see, 39 39 00:01:49,300 --> 00:01:52,430 is a lot easier and faster to write. 40 40 00:01:52,430 --> 00:01:53,730 The first reason for that 41 41 00:01:53,730 --> 00:01:56,085 is that we don't need the curly braces, 42 42 00:01:56,085 --> 00:01:59,090 like we have here, to define a code block. 43 43 00:01:59,090 --> 00:02:03,810 And second is that the return actually happens implicitly. 44 44 00:02:03,810 --> 00:02:07,230 So this value here will automatically be returned 45 45 00:02:07,230 --> 00:02:12,050 without us having to explicitly write the return keyword. 46 46 00:02:12,050 --> 00:02:12,920 Okay? 47 47 00:02:12,920 --> 00:02:16,280 So this is excellent for simple one-liner functions. 48 48 00:02:16,280 --> 00:02:17,990 And you will see throughout the course 49 49 00:02:17,990 --> 00:02:20,400 that this is gonna be extremely helpful 50 50 00:02:20,400 --> 00:02:21,923 in certain situations. 51 51 00:02:23,150 --> 00:02:25,000 And now to use this function, 52 52 00:02:25,000 --> 00:02:27,220 it, of course, works the exact same way 53 53 00:02:27,220 --> 00:02:29,380 as using all the other functions. 54 54 00:02:29,380 --> 00:02:31,440 So we call calcAge3 55 55 00:02:32,570 --> 00:02:37,150 just like we called the other calcAge functions. 56 56 00:02:37,150 --> 00:02:38,730 Okay. 57 57 00:02:38,730 --> 00:02:43,730 And again, we save the returned value here to a variable 58 58 00:02:45,485 --> 00:02:49,633 and then let's just check it out here. 59 59 00:02:51,870 --> 00:02:54,160 And so this one should be 46 again, 60 60 00:02:54,160 --> 00:02:56,210 just like we had in the previous lecture. 61 61 00:02:57,090 --> 00:02:59,493 And yeah, it works. 62 62 00:03:00,360 --> 00:03:02,900 So indeed, the value that we calculated 63 63 00:03:02,900 --> 00:03:05,740 was returned automatically without us having 64 64 00:03:05,740 --> 00:03:07,950 to write the return keyword. 65 65 00:03:07,950 --> 00:03:10,940 Now, you see that here we also didn't need any parentheses 66 66 00:03:10,940 --> 00:03:12,530 or anything like that. 67 67 00:03:12,530 --> 00:03:14,893 Just this here is the function. 68 68 00:03:15,960 --> 00:03:16,793 Okay? 69 69 00:03:17,875 --> 00:03:19,630 Now, this is actually just the simplest form, 70 70 00:03:19,630 --> 00:03:22,761 which is when we only have exactly one parameter 71 71 00:03:22,761 --> 00:03:26,050 and only basically one line of code 72 72 00:03:26,050 --> 00:03:28,430 in which we want to return something. 73 73 00:03:28,430 --> 00:03:30,540 But it gets a little bit more complex 74 74 00:03:30,540 --> 00:03:34,350 when we add more parameters or more code. 75 75 00:03:34,350 --> 00:03:36,780 So let's now write another function 76 76 00:03:37,620 --> 00:03:39,630 and we can get rid of this one 77 77 00:03:39,630 --> 00:03:42,040 since it was just a copy anyway. 78 78 00:03:42,040 --> 00:03:44,750 And so let's say that we want to calculate 79 79 00:03:44,750 --> 00:03:49,050 how many years a person has left until retirement. 80 80 00:03:49,050 --> 00:03:52,413 So let's call this function yearsUntilRetirement. 81 81 00:03:56,790 --> 00:03:59,600 And then we set that equal to a function. 82 82 00:03:59,600 --> 00:04:02,547 And once again, let's pass in the birthYeah. 83 83 00:04:04,730 --> 00:04:06,100 Then the arrow again 84 84 00:04:06,100 --> 00:04:08,400 but now, here we need some more code 85 85 00:04:08,400 --> 00:04:10,550 because to calculate the number of years 86 86 00:04:10,550 --> 00:04:14,250 until the retirement based on the birthYeah alone, 87 87 00:04:14,250 --> 00:04:16,290 we first need to calculate the age, 88 88 00:04:16,290 --> 00:04:19,760 and then from there, we need to calculate the retirement age 89 89 00:04:19,760 --> 00:04:21,423 minus the current age. 90 90 00:04:22,420 --> 00:04:24,700 So we need more lines of code 91 91 00:04:24,700 --> 00:04:28,910 and so we are back to actually needing the curly braces 92 92 00:04:28,910 --> 00:04:32,270 in order to define a code block like this. 93 93 00:04:32,270 --> 00:04:34,260 So let's do what we just said. 94 94 00:04:34,260 --> 00:04:37,230 So calculate the age based on the birth year. 95 95 00:04:37,230 --> 00:04:41,790 So 2037 minus the birthYeah 96 96 00:04:42,690 --> 00:04:45,060 and now let's calculate 97 97 00:04:46,760 --> 00:04:49,003 the years until retirement basically. 98 98 00:04:49,890 --> 00:04:53,975 And so let's say that the retirement age is 65 years, 99 99 00:04:53,975 --> 00:04:57,963 as it is in many countries here in Europe at least. 100 100 00:04:58,890 --> 00:05:02,430 So 65 and then minus the current age. 101 101 00:05:02,430 --> 00:05:06,090 And that will then give us how many years we have left. 102 102 00:05:06,090 --> 00:05:08,320 And now to return this retirement, 103 103 00:05:08,320 --> 00:05:13,320 we actually need to write the return keyword explicitly. 104 104 00:05:14,400 --> 00:05:17,460 So we can only omit the return here 105 105 00:05:17,460 --> 00:05:21,320 in case we have a one-liner function like here. 106 106 00:05:21,320 --> 00:05:22,540 But if we have more, 107 107 00:05:22,540 --> 00:05:25,293 then we need to do the return still. 108 108 00:05:26,149 --> 00:05:29,540 So let's now run this function. 109 109 00:05:29,540 --> 00:05:32,230 So yearsUntilRetirement 110 110 00:05:32,230 --> 00:05:33,950 and then again some year 111 111 00:05:34,970 --> 00:05:39,030 and then as always, we could capture the return value 112 112 00:05:39,030 --> 00:05:40,600 into a variable. 113 113 00:05:40,600 --> 00:05:43,620 But this time, let's actually log that value 114 114 00:05:43,620 --> 00:05:45,003 to the console directly. 115 115 00:05:46,010 --> 00:05:48,370 So console.log 116 116 00:05:50,020 --> 00:05:53,093 and yeah, so let's try that. 117 117 00:05:54,140 --> 00:05:55,593 And so it's 19. 118 118 00:05:56,735 --> 00:06:00,400 And that makes sense because 65 minus 46, 119 119 00:06:00,400 --> 00:06:03,800 which is the age, is 19. 120 120 00:06:03,800 --> 00:06:04,820 Okay? 121 121 00:06:04,820 --> 00:06:08,010 So that's the scenario when we have one parameter here 122 122 00:06:08,010 --> 00:06:11,670 and then more than one line of code basically. 123 123 00:06:11,670 --> 00:06:13,210 And remember, in that situation, 124 124 00:06:13,210 --> 00:06:16,220 we need the return statement here. 125 125 00:06:16,220 --> 00:06:19,760 But now, what if we had multiple parameters? 126 126 00:06:19,760 --> 00:06:20,810 Well, then we need 127 127 00:06:20,810 --> 00:06:24,290 to wrap the parameters here into parentheses. 128 128 00:06:24,290 --> 00:06:26,980 So in VS Code, we can just select a variable 129 129 00:06:26,980 --> 00:06:29,290 and then write parentheses 130 130 00:06:29,290 --> 00:06:32,400 and then it will automatically wrap this variable 131 131 00:06:32,400 --> 00:06:35,620 into parentheses on both sides. 132 132 00:06:35,620 --> 00:06:37,560 So let's say we want the birthYeah 133 133 00:06:37,560 --> 00:06:39,960 but also the firstName 134 134 00:06:39,960 --> 00:06:42,910 so that we can like return something else, 135 135 00:06:42,910 --> 00:06:44,260 like a sentence. 136 136 00:06:44,260 --> 00:06:46,800 So let's comment out this part here 137 137 00:06:46,800 --> 00:06:49,830 and instead, let's return a string. 138 138 00:06:49,830 --> 00:06:52,070 And again, we're using a template string here 139 139 00:06:52,070 --> 00:06:53,830 to build that string 140 140 00:06:53,830 --> 00:06:57,600 and basically, I want to say like firstName retires 141 141 00:06:57,600 --> 00:06:59,760 in x years. 142 142 00:06:59,760 --> 00:07:02,783 So let's use that placeholder here. 143 143 00:07:03,830 --> 00:07:08,830 So firstName retires in 144 144 00:07:09,080 --> 00:07:11,663 and then we use that value that we just calculated. 145 145 00:07:12,740 --> 00:07:14,023 So retirement. 146 146 00:07:16,000 --> 00:07:17,210 Give it a save here 147 147 00:07:17,210 --> 00:07:18,950 and now we need to call it 148 148 00:07:18,950 --> 00:07:22,540 and so let's add the second argument here 149 149 00:07:22,540 --> 00:07:25,500 so that it will go to the second parameter. 150 150 00:07:25,500 --> 00:07:27,900 So the first one here is, of course, birthYeah 151 151 00:07:27,900 --> 00:07:30,660 and so that corresponds to 1991 152 152 00:07:30,660 --> 00:07:34,080 and now the second argument will go to the second parameter, 153 153 00:07:34,080 --> 00:07:35,230 which is the firstName. 154 154 00:07:36,350 --> 00:07:38,360 So let's say Jonas 155 155 00:07:38,360 --> 00:07:40,020 and let's just call it twice 156 156 00:07:41,110 --> 00:07:42,830 so that it actually makes more sense 157 157 00:07:42,830 --> 00:07:46,770 that we even put this logic into its own function. 158 158 00:07:46,770 --> 00:07:51,110 So let's say that Bob was born in 1980 159 159 00:07:52,420 --> 00:07:54,793 and so let's see how many years he has left. 160 160 00:07:58,010 --> 00:08:00,220 So Jonas retires in 19 years, 161 161 00:08:00,220 --> 00:08:03,300 Bob retires in eight years. 162 162 00:08:03,300 --> 00:08:07,980 Great, and that's essentially how the arrow functions work. 163 163 00:08:08,983 --> 00:08:10,450 You just need to keep in mind the couple 164 164 00:08:10,450 --> 00:08:13,320 of different scenarios that there are regarding 165 165 00:08:13,320 --> 00:08:14,920 to the number of lines of code 166 166 00:08:14,920 --> 00:08:18,010 that you need and the number of parameters. 167 167 00:08:18,010 --> 00:08:19,550 So as you add more code 168 168 00:08:19,550 --> 00:08:22,830 and more parameters, it gets a little bit more complex 169 169 00:08:22,830 --> 00:08:24,420 and we kind of lose the advantage 170 170 00:08:24,420 --> 00:08:26,560 of using an arrow function. 171 171 00:08:26,560 --> 00:08:30,320 So now you might ask the same question as before. 172 172 00:08:30,320 --> 00:08:33,130 What type of function should I use? 173 173 00:08:33,130 --> 00:08:35,493 Should I use arrow functions for everything 174 174 00:08:35,493 --> 00:08:37,880 since they're so easy to write? 175 175 00:08:37,880 --> 00:08:40,270 And well, the answer is no. 176 176 00:08:40,270 --> 00:08:42,484 But it's also complicated. 177 177 00:08:42,484 --> 00:08:45,440 That's because there is another fundamental difference 178 178 00:08:45,440 --> 00:08:49,150 between the arrow function and more traditional functions. 179 179 00:08:49,150 --> 00:08:52,620 So function declarations and function expressions. 180 180 00:08:52,620 --> 00:08:54,520 It's the fact that arrow function 181 181 00:08:54,520 --> 00:08:57,750 do not get a so-called this keyword. 182 182 00:08:57,750 --> 00:09:01,550 And this, once more, is a topic for much later. 183 183 00:09:01,550 --> 00:09:05,495 So remember that learning is not at all a linear process 184 184 00:09:05,495 --> 00:09:09,100 and so topics need to build up on one another 185 185 00:09:09,100 --> 00:09:10,750 in an incremental way. 186 186 00:09:10,750 --> 00:09:13,280 Otherwise, you would just get super overwhelmed 187 187 00:09:13,280 --> 00:09:16,490 and super stressed if I were to tell you everything 188 188 00:09:16,490 --> 00:09:17,483 at the same time. 189 189 00:09:17,483 --> 00:09:19,894 So for now, we will actually keep 190 190 00:09:19,894 --> 00:09:22,900 using mainly the normal functions, 191 191 00:09:22,900 --> 00:09:26,180 except for very simple one-liner functions. 192 192 00:09:26,180 --> 00:09:28,663 For example, like this one here. 193 193 00:09:28,663 --> 00:09:31,100 And that doesn't mean that arrow functions 194 194 00:09:31,100 --> 00:09:32,400 are not important. 195 195 00:09:32,400 --> 00:09:33,790 They absolutely are 196 196 00:09:33,790 --> 00:09:36,696 and I love them and I use them all the time. 197 197 00:09:36,696 --> 00:09:40,090 Sometimes I don't write regular functions at all. 198 198 00:09:40,090 --> 00:09:43,280 But again, you cannot yet understand all the implications 199 199 00:09:43,280 --> 00:09:45,240 of using arrow functions. 200 200 00:09:45,240 --> 00:09:47,036 So for now again, we will keep using 201 201 00:09:47,036 --> 00:09:50,423 probably the function expressions the most. 16855