WEBVTT 0 00:00.300 --> 00:08.310 In this lesson I want to introduce you to a new ES6 concept and that's something called arrow functions 1 00:08.340 --> 00:12.780 or you might also hear people refer to it as the fat arrow. 2 00:12.780 --> 00:19.340 Essentially all that arrow functions are is a shorter way of writing a Javascript function. 3 00:19.380 --> 00:20.860 It's not so complicated. 4 00:21.240 --> 00:27.510 So go ahead and fork the starting sandbox and let's tackle this concept of arrow functions together. 5 00:29.160 --> 00:33.660 Now we've already seen quite a few ways of writing functions in JavaScript right? 6 00:33.680 --> 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 00:42.090 --> 00:47.070 call it x and then we'll return x multiplied by x. 8 00:47.070 --> 00:48.600 That's it, simple. 9 00:48.600 --> 00:53.280 This is the most basic way of writing a Javascript function. 10 00:53.280 --> 00:55.450 But there are other ways. 11 00:55.470 --> 01:04.050 So for example if we activate our numbers array again ,whenever we've needed to use a function as an 12 01:04.050 --> 01:09.810 input to another function we've also seen that it's quite helpful to use an anonymous function to 13 01:09.870 --> 01:12.730 make it simpler and easier to read. 14 01:12.750 --> 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 01:21.900 --> 01:30.910 each of the numbers inside that array and then I can save this to a new array called newNumbers and 16 01:30.910 --> 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 01:41.020 --> 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 01:49.210 --> 01:55.930 lessons that we can simply just put a function inside the parentheses just as well. And we can even cut 19 01:55.930 --> 02:00.790 down on the width of our lines by deleting the name of our function. 20 02:00.790 --> 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 02:08.800 --> 02:11.810 thing but now it just doesn't have a name anymore. 22 02:12.040 --> 02:17.530 And because it lives inside another function it usually doesn't need to have a name. 23 02:17.530 --> 02:26.330 It's usually easy enough to look at what it does and see its functionality. Now arrow functions take 24 02:26.330 --> 02:29.180 it just one step further. 25 02:29.180 --> 02:33.410 It lets us actually delete this function keyword. 26 02:33.410 --> 02:39.260 And instead we replace it with a equals sign and a right angle bracket. 27 02:39.260 --> 02:42.740 So now these are the inputs of our function 28 02:42.890 --> 02:46.360 and this is the body of our function. 29 02:46.520 --> 02:54.950 And the only thing that denotes that this whole thing is a function is that so called fat arrow. 30 02:54.950 --> 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 03:00.740 --> 03:04.550 And if this is just a single line that's also not a fat arrow. 32 03:04.670 --> 03:09.200 So it has to be the equals and the right angle bracket combined together. 33 03:09.200 --> 03:12.420 Now we can make this even shorter if we want to. 34 03:12.440 --> 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 03:20.540 --> 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 03:28.490 --> 03:31.250 need a set of parentheses around them. 37 03:31.460 --> 03:39.290 But if you only have one input or one parameter, you can actually just get rid of the parentheses as 38 03:39.290 --> 03:39.850 well. 39 03:39.860 --> 03:43.440 This is exactly the same as before. 40 03:43.700 --> 03:51.920 On top of that, if you have only a single line statement where you're only returning a single expression 41 03:51.950 --> 04:00.380 such as this, you can actually delete the return keyword and delete these curly braces so you end up 42 04:00.590 --> 04:03.580 with inline code that looks like this. 43 04:03.770 --> 04:13.310 Now our map function is taking each item in our numbers array and multiplying it by itself and then 44 04:13.340 --> 04:15.680 creating a new array. 45 04:15.950 --> 04:23.510 But the syntax is now much much shorter and that means there are pros and cons. 46 04:23.600 --> 04:32.270 It might be that for a beginner coming to Javascript this is really hard to understand. And especially 47 04:32.270 --> 04:39.020 in cases where you have people on your team who are more junior, having code like this is not always 48 04:39.020 --> 04:39.480 great. 49 04:39.980 --> 04:47.570 So depending on your project, your use case, your team, your own level of comfort with this kind of shortened 50 04:47.570 --> 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 04:56.450 --> 05:04.160 these array functions like map, filter, reduce a lot, then in these cases you will see a lot of people 52 05:04.220 --> 05:10.490 using arrow functions inside just because it makes it so much simpler and you can achieve things just 53 05:10.550 --> 05:15.490 in one line. But it does take a little bit of getting used to. 54 05:15.530 --> 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 05:23.730 --> 05:25.930 and I want you to uncomment 56 05:26.030 --> 05:30.270 each of these functions starting from map then filter the reduce. 57 05:30.350 --> 05:37.790 I want you to convert this current format of anonymous functions to arrow functions and to simplify 58 05:37.790 --> 05:39.990 them as much as you can. 59 05:40.070 --> 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 05:48.230 --> 05:56.530 actual React code where we're using the map function to create custom entry components. 61 05:56.750 --> 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 06:01.610 --> 06:02.810 together. 63 06:02.810 --> 06:06.200 Pause the video and try to give those two parts of the challenge a go. 64 06:10.270 --> 06:10.590 All right. 65 06:10.620 --> 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 06:16.290 --> 06:23.300 the function keyword and add a fat arrow in between the input and the body of the function. 67 06:23.400 --> 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 06:30.030 --> 06:32.400 just have a simple expression. 69 06:32.400 --> 06:38.800 So let's go ahead and delete this return keyword as well as the curly braces 70 06:39.000 --> 06:44.540 and that semicolon and put it all onto the same line. 71 06:44.800 --> 06:51.090 And now we notice that we've only got a single input so we can delete those parentheses as well. 72 06:51.180 --> 06:53.910 That's the first one completed. 73 06:53.910 --> 06:55.610 Next let's move on to filter. 74 07:00.140 --> 07:04.370 And it should end up looking like this. Now 75 07:04.380 --> 07:10.620 reduce is a little bit different because here we've now got two inputs; the accumulator and the current 76 07:10.620 --> 07:11.490 number. 77 07:11.520 --> 07:18.680 That means once we delete the function keyword and add our fat arrow, we can't actually delete these parentheses. 78 07:18.720 --> 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 07:26.850 --> 07:34.570 we can go ahead and delete everything and end up with just a single line statement like this. 80 07:36.130 --> 07:42.640 Finally you've got find and find index which is pretty standard and it should end up looking like 81 07:42.640 --> 07:44.090 this. 82 07:44.110 --> 07:49.720 So now let's go ahead and comment all of this code out and actually use our arrow function knowledge 83 07:50.080 --> 07:52.040 in our App.jsx. 84 07:52.090 --> 07:58.360 So here we've got a function called createEntry which is taking each of the emoji terms that's being 85 07:58.360 --> 08:05.980 mapped through here and using the emoji terms properties such as id, emoji name, meaning and mapping 86 08:05.980 --> 08:16.180 them over to a prop. The solution to this challenge is first to just cut this function and replace it 87 08:16.210 --> 08:24.640 inside here. And then we're going to further simplify this by removing the function keyword, adding a 88 08:24.640 --> 08:32.920 fat arrow, deleting the name of the function, deleting the parentheses around our single input and then 89 08:32.980 --> 08:40.780 we can even go as far to delete the return keyword and the closing curly braces. 90 08:40.780 --> 08:48.850 And the reason is because our entry component is treated as basically a single line of code. Even though 91 08:48.880 --> 08:54.040 they're placed on different lines just to make it easy to read, effectively 92 08:54.040 --> 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 09:01.870 --> 09:03.040 like so. 94 09:03.040 --> 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 09:10.630 --> 09:17.500 a set of parentheses when you're returning a component that has many different properties. 96 09:17.500 --> 09:19.450 Did you manage to get this right? 97 09:19.450 --> 09:25.690 If not be sure to review the early parts and make sure that you've completed each of these exercises 98 09:26.140 --> 09:28.650 as well as maybe read around the topic. 99 09:28.840 --> 09:34.630 So there's a really good article that I linked to from the Mozilla team where they talk about arrow 100 09:34.630 --> 09:39.790 functions in depth, some of the history and it's a really interesting piece of reading and it'll give 101 09:39.790 --> 09:46.120 you a lot of color and background to how arrow functions work and why they were introduced. But in the 102 09:46.120 --> 09:46.970 next lesson, 103 09:46.990 --> 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 09:52.990 --> 09:54.040 of that and more, 105 09:54.190 --> 09:54.780 I'll see there.