Instructor: Let's now talk about arrow functions,
which are yet another very cool addition to JavaScript.
So suppose that we have an array
with a couple of birth years,
and that we wanna calculate the age for each of these years.
So basically we would have const years.
Okay remember that whenever we have a value or a variable
that's not gonna change over time
we use the const to declare that variable.
And in this case this is totally the case.
So just some random years here, 1982,
and let's say 1937.
Okay, so remember we can use the map method
to loop over the array and then do some stuff with it.
And that's how we do it in ES5.
So again we start with ES5 here and then move on to ES6.
So in ES6 we would use var to declare a variable, right?
So ages, and I'm gonna call it ages five,
because it's for ES5.
And now we can say years dot map.
And you remember all of this right?
So we have our callback function here,
and then our code inside of this callback function.
And remember that here in the map method,
we have access to the current element,
the current index, and also the entire years array.
So I'm just gonna call it el
which stands for element here, okay.
And if we then return something here,
which will be 2016, minus the element in this case,
it then gets stored into this array that we specified here.
So this is how the map method works,
so nothing new in here.
Let's just simply console that log, this array.
So that we can see that everything works.
Alright so these are the four ages.
Now in ES6 we have a more beautiful and quicker way
of writing this part here of the code.
So this callback function.
So let me show you how.
ES6, so now I use the const keyword.
And I'll call it ages six, years dot map,
and now comes the difference.
So now we can use an arrow function,
and how does the arrow function work in this case?
Well it's just like this:
element, then arrow function 2016 minus the element.
And that's it.
So let me explain it to you.
So here we have the argument,
here we have the arrow operator
and then here we have
what we have here in the return statement.
So this one here is going to produce the exact same thing
as all of this piece of code up here.
So for a simple callback function like this here
with only one argument, it really is as simple as this.
So there's no function keyword, no return keyword,
no parenthesis nor curly braces,
all we need is the argument, the arrow,
and then what we have in our return statement.
So it really is as simple as this.
And to see how much easier it is for us to write code,
like this right.
So we have to write a lot less code.
Just to make sure, let's also log this one.
Just to show you that it really worked.
And here it is, so it produces the exact same result
and we write a lot less code.
Now if we have more than one argument here
we actually have to provide the parenthesis
so let me show you an example of that.
So ages six.
And now remember we cannot change a constant right?
So let's change it here to let, alright,
and so now it's a normal variable
that we can mutate as we want.
And let's now write it in a different way.
So years, dot map.
And once again remember
that we have access to the current element,
the current index, and the array itself.
So now I want to access the element and also the index.
And so I have two arguments, and so as I said before,
I now have to use these parentheses here.
So element, and index, and then let's use
the knowledge that we gained before in the last lecture.
Which are these template literals.
So we're gonna put a string in here
saying age element
index, or actually index plus one, why not?
You simply, and remember that in here
we can even have expressions like this.
So like 2016, minus the element.
And so that's it.
So now we used two arguments here
and therefore we had to use these parentheses here, okay.
Let's just console that log ages again.
So age element one, age element two, three, and four.
So that's a small change that we have to do
when we have two arguments.
Now if we have more than one line here,
in this return part here let's say,
actually it's just this one here.
So if we have more than this line,
we also have to use the curly braces
that we have to use in normal functions.
And also the return keyword is then not implicit
and we have to write it again.
So let's see an example of that as well.
And I'm gonna call it ages six again
'cause why create new variables here right?
So again the same argument and I skip the parentheses here.
Alright and again, I want more than one line of code,
and therefore I need to use these curly braces.
So let's create a variable here,
which is the current year, right?
So that it makes sense that we have more than one line.
And I'm sure that you know by now
how to get the current year
because we did this in our project.
Alright, and we can also calculate the eight here outside,
so let's say now minus the current element.
And then let me return this string that we had before.
So this one here.
And remember that in this case
I actually have to write out the return statement here,
the return keyword.
Now here I want age and that's it.
Okay.
And here we go, so it worked again.
So there are three ways of writing arrow functions.
First one is put one argument and one line of code
and that's the simplest form.
If we then add another argument,
we know to use the parentheses.
And if we then add more lines of code,
more than one, then we have to use the curly braces
and the return keyword at the end.
Alright, so this is how arrow functions work.
And I'm absolutely sure that you see
how useful they can be, right?
But there's even more to arrow functions, that's not all.
So let's move on now to the next lecture
to learn all about it.