1 00:00:01,140 --> 00:00:02,010 ‫In this video, 2 00:00:02,010 --> 00:00:05,793 ‫let's quickly get ourselves familiar with arrow functions. 3 00:00:07,320 --> 00:00:10,440 ‫So, arrow functions are a new way of writing functions 4 00:00:10,440 --> 00:00:14,430 ‫that have been introduced into JavaScript in ES6, 5 00:00:14,430 --> 00:00:16,770 ‫and they are very helpful for writing quick 6 00:00:16,770 --> 00:00:19,530 ‫and short one-line functions. 7 00:00:19,530 --> 00:00:21,930 ‫Now, many people actually use arrow functions 8 00:00:21,930 --> 00:00:25,860 ‫for all functions now, but I personally really don't like 9 00:00:25,860 --> 00:00:29,033 ‫that and I only find them useful for, 10 00:00:29,033 --> 00:00:32,850 ‫well, as I said, these one-liner functions. 11 00:00:32,850 --> 00:00:34,575 ‫So, let's say that we want to write a function 12 00:00:34,575 --> 00:00:38,310 ‫which automatically does this part here. 13 00:00:38,310 --> 00:00:40,390 ‫So, takes in a value that is supposed to be a date 14 00:00:40,390 --> 00:00:42,420 ‫and will get the year. 15 00:00:42,420 --> 00:00:43,918 ‫So, based on this convention 16 00:00:43,918 --> 00:00:48,270 ‫that our dates are always written in this format right here, 17 00:00:48,270 --> 00:00:51,693 ‫so date-month-day. 18 00:00:54,300 --> 00:00:58,710 ‫So the, let's say, old way of writing that would be simply 19 00:00:58,710 --> 00:01:00,633 ‫to use the function keyword, 20 00:01:03,510 --> 00:01:07,590 ‫then, let's say, get year and it receives a string, 21 00:01:07,590 --> 00:01:11,340 ‫and then we can return, just like we did up here. 22 00:01:11,340 --> 00:01:14,253 ‫Let's actually copy this to make it a bit faster. 23 00:01:16,440 --> 00:01:17,530 ‫And then we could use 24 00:01:19,941 --> 00:01:24,941 ‫get year with, for example, the publication date 25 00:01:25,770 --> 00:01:26,970 ‫that we already have. 26 00:01:26,970 --> 00:01:30,513 ‫And so this results in 1965, just as we have here. 27 00:01:31,710 --> 00:01:34,110 ‫So, this is the traditional way of writing functions, 28 00:01:34,110 --> 00:01:37,500 ‫which I still use all the time for longer functions, 29 00:01:37,500 --> 00:01:40,320 ‫but now we also have arrow functions. 30 00:01:40,320 --> 00:01:42,570 ‫So, let's see how we write an arrow function. 31 00:01:44,070 --> 00:01:47,583 ‫So, the function is basically simply the argument, 32 00:01:48,810 --> 00:01:52,143 ‫then the arrow, and then what we want to return, 33 00:01:53,610 --> 00:01:58,610 ‫which is string.split and then the first element. 34 00:02:00,060 --> 00:02:03,480 ‫And that's it. This is a function. 35 00:02:03,480 --> 00:02:06,090 ‫And maybe you noticed that the Prettier extension 36 00:02:06,090 --> 00:02:09,084 ‫that we're using in this course did automatically wrap 37 00:02:09,084 --> 00:02:12,330 ‫this parameter here inside these parentheses. 38 00:02:12,330 --> 00:02:14,460 ‫And that's because we can actually specify 39 00:02:14,460 --> 00:02:17,197 ‫multiple arguments, or parameters, 40 00:02:17,197 --> 00:02:20,160 ‫and then we really need to use the parentheses. 41 00:02:20,160 --> 00:02:22,643 ‫And so that's why Prettier placed them there, 42 00:02:22,643 --> 00:02:25,593 ‫because like this, we cannot make any mistakes. 43 00:02:26,790 --> 00:02:29,850 ‫So, we could really pass any number of parameters 44 00:02:29,850 --> 00:02:33,120 ‫herein that we wanted and then based off those, 45 00:02:33,120 --> 00:02:35,310 ‫we can then return something. 46 00:02:35,310 --> 00:02:38,342 ‫So again, this part here is automatically returned 47 00:02:38,342 --> 00:02:42,543 ‫without us having to write the return keyword explicitly. 48 00:02:44,827 --> 00:02:49,500 ‫Okay, so let's just turn this one here off 49 00:02:49,500 --> 00:02:53,130 ‫because now we want to reuse this get year name 50 00:02:53,130 --> 00:02:55,146 ‫because right now, this is a function, 51 00:02:55,146 --> 00:02:56,944 ‫but we cannot really use it 52 00:02:56,944 --> 00:02:59,253 ‫because we haven't stored it anywhere. 53 00:03:00,780 --> 00:03:05,280 ‫So, we can just do this, const, get year, 54 00:03:05,280 --> 00:03:09,300 ‫and then store that function value into this variable here. 55 00:03:09,300 --> 00:03:12,210 ‫And so this then becomes a so-called function expression 56 00:03:12,210 --> 00:03:16,200 ‫as well, while this one here is a function declaration. 57 00:03:16,200 --> 00:03:18,270 ‫So that's a subtle difference that you might have heard 58 00:03:18,270 --> 00:03:20,610 ‫about and it's not really important. 59 00:03:20,610 --> 00:03:22,950 ‫What matters is that this is an arrow function, 60 00:03:22,950 --> 00:03:26,102 ‫where we automatically return whatever is here 61 00:03:26,102 --> 00:03:28,920 ‫on the right side of this arrow. 62 00:03:28,920 --> 00:03:32,760 ‫Now, if we had more code here, so if we had multiple lines, 63 00:03:32,760 --> 00:03:36,720 ‫then we would have to use a function block again. 64 00:03:36,720 --> 00:03:40,320 ‫So, using these curly braces, then we could write 65 00:03:40,320 --> 00:03:43,350 ‫whatever code we needed here, and then in the end, 66 00:03:43,350 --> 00:03:47,100 ‫we would actually have to manually return again. 67 00:03:47,100 --> 00:03:49,440 ‫So, this one would also work the same way. 68 00:03:49,440 --> 00:03:51,960 ‫So, you'll see that we have the result here. 69 00:03:51,960 --> 00:03:55,590 ‫But if you use this block, then you really do need 70 00:03:55,590 --> 00:03:57,660 ‫this return keyword again. 71 00:03:57,660 --> 00:04:00,213 ‫Otherwise, as you see, it returns undefined. 72 00:04:01,740 --> 00:04:04,110 ‫But again, the ideal way of using this function is 73 00:04:04,110 --> 00:04:07,154 ‫when you really have just a one-liner, then you don't need 74 00:04:07,154 --> 00:04:10,410 ‫a return keyword, don't need a function block. 75 00:04:10,410 --> 00:04:12,000 ‫All you need is this. 76 00:04:12,000 --> 00:04:16,200 ‫And this really becomes very useful for callback functions, 77 00:04:16,200 --> 00:04:19,533 ‫for example, in some arrow methods, as we will see later. 78 00:04:20,370 --> 00:04:22,243 ‫Now, let's actually use this here. 79 00:04:22,243 --> 00:04:27,243 ‫So for that, I will cut this part and we'll place it here 80 00:04:27,840 --> 00:04:29,820 ‫before the summary because now I want 81 00:04:29,820 --> 00:04:32,253 ‫to use the get year function in here. 82 00:04:33,570 --> 00:04:35,073 ‫Also, delete this part. 83 00:04:36,120 --> 00:04:39,660 ‫Actually, I cut it and put it here just as a reference. 84 00:04:39,660 --> 00:04:43,290 ‫And now here, instead of doing it manually here, 85 00:04:43,290 --> 00:04:45,540 ‫we can call the function right here 86 00:04:45,540 --> 00:04:47,140 ‫inside of the template, literal. 87 00:04:48,090 --> 00:04:52,560 ‫So get year, and again, publication date. 88 00:04:52,560 --> 00:04:55,050 ‫And result that we get in the console 89 00:04:55,050 --> 00:04:57,063 ‫is, indeed, exactly the same.