0 1 00:00:00,300 --> 00:00:08,310 In this lesson I want to introduce you to a new ES6 concept and that's something called arrow functions 1 2 00:00:08,340 --> 00:00:12,780 or you might also hear people refer to it as the fat arrow. 2 3 00:00:12,780 --> 00:00:19,340 Essentially all that arrow functions are is a shorter way of writing a Javascript function. 3 4 00:00:19,380 --> 00:00:20,860 It's not so complicated. 4 5 00:00:21,240 --> 00:00:27,510 So go ahead and fork the starting sandbox and let's tackle this concept of arrow functions together. 5 6 00:00:29,160 --> 00:00:33,660 Now we've already seen quite a few ways of writing functions in JavaScript right? 6 7 00:00:33,680 --> 00:00:42,090 Let's say I had a function. Let's create a function that just squares a number, we'll take a number let's 7 8 00:00:42,090 --> 00:00:47,070 call it x and then we'll return x multiplied by x. 8 9 00:00:47,070 --> 00:00:48,600 That's it, simple. 9 10 00:00:48,600 --> 00:00:53,280 This is the most basic way of writing a Javascript function. 10 11 00:00:53,280 --> 00:00:55,450 But there are other ways. 11 12 00:00:55,470 --> 00:01:04,050 So for example if we activate our numbers array again ,whenever we've needed to use a function as an 12 13 00:01:04,050 --> 00:01:09,810 input to another function we've also seen that it's quite helpful to use an anonymous function to 13 14 00:01:09,870 --> 00:01:12,730 make it simpler and easier to read. 14 15 00:01:12,750 --> 00:01:21,870 For example, if I wanted to loop through my numbers and I call my map function to go ahead and square 15 16 00:01:21,900 --> 00:01:30,910 each of the numbers inside that array and then I can save this to a new array called newNumbers and 16 17 00:01:30,910 --> 00:01:40,950 then log it to the console. And we get a new array with each number being squared, so the power of two. 17 18 00:01:41,020 --> 00:01:49,210 This is basically us passing in this function as it is and you've seen in the last lesson and many other 18 19 00:01:49,210 --> 00:01:55,930 lessons that we can simply just put a function inside the parentheses just as well. And we can even cut 19 20 00:01:55,930 --> 00:02:00,790 down on the width of our lines by deleting the name of our function. 20 21 00:02:00,790 --> 00:02:08,800 So now we have an anonymous function. And if we refresh our console, you can see it does exactly the same 21 22 00:02:08,800 --> 00:02:11,810 thing but now it just doesn't have a name anymore. 22 23 00:02:12,040 --> 00:02:17,530 And because it lives inside another function it usually doesn't need to have a name. 23 24 00:02:17,530 --> 00:02:26,330 It's usually easy enough to look at what it does and see its functionality. Now arrow functions take 24 25 00:02:26,330 --> 00:02:29,180 it just one step further. 25 26 00:02:29,180 --> 00:02:33,410 It lets us actually delete this function keyword. 26 27 00:02:33,410 --> 00:02:39,260 And instead we replace it with a equals sign and a right angle bracket. 27 28 00:02:39,260 --> 00:02:42,740 So now these are the inputs of our function 28 29 00:02:42,890 --> 00:02:46,360 and this is the body of our function. 29 30 00:02:46,520 --> 00:02:54,950 And the only thing that denotes that this whole thing is a function is that so called fat arrow. 30 31 00:02:54,950 --> 00:03:00,610 Now be careful with the syntax because if you add a space there then it's no longer a fat arrow. 31 32 00:03:00,740 --> 00:03:04,550 And if this is just a single line that's also not a fat arrow. 32 33 00:03:04,670 --> 00:03:09,200 So it has to be the equals and the right angle bracket combined together. 33 34 00:03:09,200 --> 00:03:12,420 Now we can make this even shorter if we want to. 34 35 00:03:12,440 --> 00:03:20,150 So with arrow functions if we have more than one input say we had an x and a y and we simply multiplied 35 36 00:03:20,540 --> 00:03:28,490 x by y in the body of our function, then in this case we have two input parameters and we definitely 36 37 00:03:28,490 --> 00:03:31,250 need a set of parentheses around them. 37 38 00:03:31,460 --> 00:03:39,290 But if you only have one input or one parameter, you can actually just get rid of the parentheses as 38 39 00:03:39,290 --> 00:03:39,850 well. 39 40 00:03:39,860 --> 00:03:43,440 This is exactly the same as before. 40 41 00:03:43,700 --> 00:03:51,920 On top of that, if you have only a single line statement where you're only returning a single expression 41 42 00:03:51,950 --> 00:04:00,380 such as this, you can actually delete the return keyword and delete these curly braces so you end up 42 43 00:04:00,590 --> 00:04:03,580 with inline code that looks like this. 43 44 00:04:03,770 --> 00:04:13,310 Now our map function is taking each item in our numbers array and multiplying it by itself and then 44 45 00:04:13,340 --> 00:04:15,680 creating a new array. 45 46 00:04:15,950 --> 00:04:23,510 But the syntax is now much much shorter and that means there are pros and cons. 46 47 00:04:23,600 --> 00:04:32,270 It might be that for a beginner coming to Javascript this is really hard to understand. And especially 47 48 00:04:32,270 --> 00:04:39,020 in cases where you have people on your team who are more junior, having code like this is not always 48 49 00:04:39,020 --> 00:04:39,480 great. 49 50 00:04:39,980 --> 00:04:47,570 So depending on your project, your use case, your team, your own level of comfort with this kind of shortened 50 51 00:04:47,570 --> 00:04:56,450 syntax, then you can choose to use it but you don't have to. Just be aware that because in React we use 51 52 00:04:56,450 --> 00:05:04,160 these array functions like map, filter, reduce a lot, then in these cases you will see a lot of people 52 53 00:05:04,220 --> 00:05:10,490 using arrow functions inside just because it makes it so much simpler and you can achieve things just 53 54 00:05:10,550 --> 00:05:15,490 in one line. But it does take a little bit of getting used to. 54 55 00:05:15,530 --> 00:05:23,300 So as a challenge, I want you to go ahead and comment out this line of code maybe keep it around as reference 55 56 00:05:23,730 --> 00:05:25,930 and I want you to uncomment 56 57 00:05:26,030 --> 00:05:30,270 each of these functions starting from map then filter the reduce. 57 58 00:05:30,350 --> 00:05:37,790 I want you to convert this current format of anonymous functions to arrow functions and to simplify 58 59 00:05:37,790 --> 00:05:39,990 them as much as you can. 59 60 00:05:40,070 --> 00:05:48,190 And once you're done with that, then go into your App.jsx and go ahead and do the same for our 60 61 00:05:48,230 --> 00:05:56,530 actual React code where we're using the map function to create custom entry components. 61 62 00:05:56,750 --> 00:06:01,610 And if you get stuck or if you have any problems then come back and we'll work through the solution 62 63 00:06:01,610 --> 00:06:02,810 together. 63 64 00:06:02,810 --> 00:06:06,200 Pause the video and try to give those two parts of the challenge a go. 64 65 00:06:10,270 --> 00:06:10,590 All right. 65 66 00:06:10,620 --> 00:06:16,290 So the first one we're tackling is the old map function and the first thing we're gonna do is delete 66 67 00:06:16,290 --> 00:06:23,300 the function keyword and add a fat arrow in between the input and the body of the function. 67 68 00:06:23,400 --> 00:06:30,030 Next we're going to see if we have multiple lines of code in our block of code and we don't. We actually 68 69 00:06:30,030 --> 00:06:32,400 just have a simple expression. 69 70 00:06:32,400 --> 00:06:38,800 So let's go ahead and delete this return keyword as well as the curly braces 70 71 00:06:39,000 --> 00:06:44,540 and that semicolon and put it all onto the same line. 71 72 00:06:44,800 --> 00:06:51,090 And now we notice that we've only got a single input so we can delete those parentheses as well. 72 73 00:06:51,180 --> 00:06:53,910 That's the first one completed. 73 74 00:06:53,910 --> 00:06:55,610 Next let's move on to filter. 74 75 00:07:00,140 --> 00:07:04,370 And it should end up looking like this. Now 75 76 00:07:04,380 --> 00:07:10,620 reduce is a little bit different because here we've now got two inputs; the accumulator and the current 76 77 00:07:10,620 --> 00:07:11,490 number. 77 78 00:07:11,520 --> 00:07:18,680 That means once we delete the function keyword and add our fat arrow, we can't actually delete these parentheses. 78 79 00:07:18,720 --> 00:07:26,790 It needs it when there are more than two inputs. But we do only have a single line being returned so 79 80 00:07:26,850 --> 00:07:34,570 we can go ahead and delete everything and end up with just a single line statement like this. 80 81 00:07:36,130 --> 00:07:42,640 Finally you've got find and find index which is pretty standard and it should end up looking like 81 82 00:07:42,640 --> 00:07:44,090 this. 82 83 00:07:44,110 --> 00:07:49,720 So now let's go ahead and comment all of this code out and actually use our arrow function knowledge 83 84 00:07:50,080 --> 00:07:52,040 in our App.jsx. 84 85 00:07:52,090 --> 00:07:58,360 So here we've got a function called createEntry which is taking each of the emoji terms that's being 85 86 00:07:58,360 --> 00:08:05,980 mapped through here and using the emoji terms properties such as id, emoji name, meaning and mapping 86 87 00:08:05,980 --> 00:08:16,180 them over to a prop. The solution to this challenge is first to just cut this function and replace it 87 88 00:08:16,210 --> 00:08:24,640 inside here. And then we're going to further simplify this by removing the function keyword, adding a 88 89 00:08:24,640 --> 00:08:32,920 fat arrow, deleting the name of the function, deleting the parentheses around our single input and then 89 90 00:08:32,980 --> 00:08:40,780 we can even go as far to delete the return keyword and the closing curly braces. 90 91 00:08:40,780 --> 00:08:48,850 And the reason is because our entry component is treated as basically a single line of code. Even though 91 92 00:08:48,880 --> 00:08:54,040 they're placed on different lines just to make it easy to read, effectively 92 93 00:08:54,040 --> 00:09:01,750 all of these props are just all on the same line and we've only got a single element being returned 93 94 00:09:01,870 --> 00:09:03,040 like so. 94 95 00:09:03,040 --> 00:09:10,600 So if you wanted to, you could even delete these two but it's usually good practice in React to have 95 96 00:09:10,630 --> 00:09:17,500 a set of parentheses when you're returning a component that has many different properties. 96 97 00:09:17,500 --> 00:09:19,450 Did you manage to get this right? 97 98 00:09:19,450 --> 00:09:25,690 If not be sure to review the early parts and make sure that you've completed each of these exercises 98 99 00:09:26,140 --> 00:09:28,650 as well as maybe read around the topic. 99 100 00:09:28,840 --> 00:09:34,630 So there's a really good article that I linked to from the Mozilla team where they talk about arrow 100 101 00:09:34,630 --> 00:09:39,790 functions in depth, some of the history and it's a really interesting piece of reading and it'll give 101 102 00:09:39,790 --> 00:09:46,120 you a lot of color and background to how arrow functions work and why they were introduced. But in the 102 103 00:09:46,120 --> 00:09:46,970 next lesson, 103 104 00:09:46,990 --> 00:09:52,990 now that we've leveled up our Javascript, we're going to be heading back into our React coding. For all 104 105 00:09:52,990 --> 00:09:54,040 of that and more, 105 106 00:09:54,190 --> 00:09:54,780 I'll see there.