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