All right then, gang.
So arrow functions are a more modern addition to the JavaScript language, and they offer us a cleaner
and shorter way to write functions.
So what I'm going to do is I'm going to take this function that is a regular function.
We've already seen this to calculate the area and I'm going to turn this into an arrow function and
show you how we do this.
So I'll keep this here as reference, but what I'm going to do is come down here and create a new constant
and I'm going to call this calc area.
It's the same name, but we'll comment this one out later on.
And when we create an arrow function, we set it equal to, first of all, parentheses.
We don't use the function keyword.
So the parentheses right here, they take in any parameters that we have.
So we have the radius.
So let's pass that in.
Then we do an arrow which is equals and then the Chevron, and then we open up our code block at the
end.
We can still do our semicolon.
Now inside this code block, this is where we do the function body, which is this kind of thing right
here.
So now then, this is an arrow function version of this regular function, and it's just a bit shorter.
We don't have to write out the function keyword right here, so it's a bit easier to create.
Now, if I comment out this thing, I'm calling this function right here, so it should work.
So let me save it and come over to the browser and we can see that we get 78.5 for the area.
So this is still working, this arrow function.
Okay.
It's just a newer and shorter way to write functions.
Now we can simplify this even more.
The first way we can simplify this is using these parentheses or rather taking them away.
When we only have one parameter, we can take away these parentheses and this is still going to work.
If I save it and refresh, we can see we still get that.
Now.
This only works when there's exactly one parameter.
If we were to pass in two parameters, then we need the parentheses.
So radius and then something else.
We need the parentheses there when there's more than one parameter.
Likewise, if there's no parameters, we also need the parentheses there.
We can't just take them away because that wouldn't be an arrow function.
We need the parentheses there when there's zero parameters or more than one.
But if there is just one parameter, we can take away the parentheses like that.
Okay, so the next thing we can do when we just have a single return like this on one line, we can
actually take away the return keyword and we can scoot it up to the same line over here and we can take
away the code block, curly braces like so.
And now what this does is return this value, even though we don't write out the return keyword like
that, it still returns the value.
Look, if we try to return here on one line, we get a squiggly line under it, meaning that's not what
we're meant to do.
We just write out the value that we want to return.
If I wanted to return a value, which was Hello, I'd write it there and it would return that.
And then this right here would get the value of Hello, whatever is returned.
I don't want to do that.
I want to return this thing, which is the area.
If I save it now and run it, then this still works.
So this kind of syntax, if you're comparing it to this, is now a lot shorter and a lot easier to write.
So remember one parameter and we can remove the parentheses anymore and we need them or any less than
we need them.
And if we're just returning something very simply on one line, we can move it up to the next line,
remove the return keyword and also remove the curly braces.
So there is another major difference between a regular function like this and an arrow function, and
that is to do with the binding of the this keyword which we've not covered yet.
And that means there will be times when arrow functions shouldn't necessarily be used.
But I don't want to delve into that just yet.
It's beyond the scope of this video, pun intended, but we will cover that at a later time.
Now, as a little exercise, just to get used to arrow functions, what I've done is I've created some
regular functions down here, so I'm just going to cut those and I'm going to paste them up here like
so and delete all the space.
We don't need that.
And I'm going to just get rid of all this because we don't need these anymore.
And what we're going to do is just practice turning regular functions into arrow functions.
So right here we have another simple regular function.
So if you want to pause the video right here and try it out for yourself, then on pause and watch how
I do it, that's absolutely fine.
But what I'm going to do now is do an arrow function version of this function.
So I'm going to say const greet is going to be equal to a function.
We don't have any parameters, so we need the parentheses.
Then we do our arrow, then we do our code block.
I'm going to return Hello World Now because we're doing a simple return on one line.
We can remove that keyword and we can also scoot this up and remove these things right here.
So this is the arrow function version of this.
And if I try to call this now, I'm going to call greet and I'm going to comment out this so there's
no conflict and save it.
This should work.
Oops, we need to log it to the console.
So let's say const test or results is equal to this because we're returning a value and that's going
to be stored in result now.
So now we can say console dot log results and save it and preview and we can see that.
Okay, So let's do the next example.
I'm going to comment that one out and uncomment this.
This one's a little more complex.
So we have this const called Bill right here set to a function and it takes in two parameters.
Then inside we're creating this local variable called total and we're cycling through the products so
we can see that products must be some kind of array.
And for each product we're getting the total and we're adding the product value plus any kind of tax.
Okay, So just a simple formula then in the end, we're returning the total.
So this is more than just a simple return statement.
Now what I'm going to do is come down here and I'm just going to console dot log and we're going to
console dot log the bill function and we're going to pass in a couple of parameters or arguments in
this case.
So the first one is the product and this is going to be an array of prices essentially.
So we're going to take in the first one, which is ten, we'll do 15 and 30 After that.
We need a second argument, which is the tax, and that's just going to be 0.2 for 20%.
Now I'm logging this directly in the console instead of storing this in some kind of variable and then
logging it to the console like we did here.
But this is exactly the same, okay?
It's just a shorter way of doing it.
Well, logging it directly.
Okay.
So we have that.
Let's just make sure it works, save it, and we get this as the total over here, 66 so we know what
it should be.
So we're taking those products in, we're cycling through them for each one.
We're adding to the total variable over here.
We're taking the product price plus any tax on that price, which is 0.2 times the product price, then
we're returning the total.
So let's convert this now into an arrow function.
So what I'm going to do is say const bill is equal to parentheses.
We have more than one parameter.
So we need our parentheses, we take in the products and we also take in the tax.
Then we need our arrow, then the curly braces, the end.
We'll do our semicolon.
Okay, So inside this function, what we're going to do is create the local variable.
So total equal zero.
And in fact, we can just copy this stuff right here.
We don't need to totally rewrite it again, like, so now we can't shorten this to one line because
we have all of this extra logic right here and that doesn't work with our functions on one line.
It only works when we have one simple return statement like we did up here.
We're just returning something simple or with the area example in here we have a lot more logic, so
we can't just scoot this up to one line, but we can still have an arrow function which is still a bit
shorter than a regular function.
Okay, so this.
Is the arrow function version of this.
There's not that much difference.
We just remove the function keyword and add on the arrow.
That's all we're doing, essentially.
So let me comment this out and make sure this one still works.
We're calling it down here, Save it and preview and we still get 66.
So then a lot of the time in this course, I will be using arrow functions as we go forward.
So if you ever need a refresher, do come back to this video.
And like I said, there is another major advantage of arrow functions in some cases when it comes to
the this keyword, sometimes it's a disadvantage and we'll talk about that later on.
