Now besides let and concert and no major feature added with next gen javascript with iOS 6 specifically
were aero functions.
Now let's rewrite does add function down here and let's not use the function keyword but let's instead
use this new Arrow function syntax for Dad you have to write the function as an expression which you
stored in a variable so we could have our add variable and dad can hold a function with the function
keyword.
As you probably know but you cannot also write a function without the function word with your parameter
list then an arrow which you construct by using the equals sign and a greater than sign and then your
function body.
And this is a valid function.
So here you can also assign parameters and use them and for example return it like this.
And then if you console log at 2 and 5 here like that and we save everything we'll see 7 in the console
here.
So that is something we can do.
That's a new syntax and one obvious benefit is that it's a bit shorter.
We save the function keyword and no benefit is that it has a couple of nice variations which make it
even more useful for example.
Besides it is already very short syntax here.
You could also if you just have one expression amidst the curly braces like this and then all the removed
the return statement and just write this function like that.
If you only have one expression you can admit to curly braces and the result of that one expression
is then automatically returned.
So there always is an implicit return statement in front of this.
So now does this way shorter than the function alternative as you can tell.
Now again this only is available though if you have one expression.
If you had two expressions or more in the body of that function you could not use these shorter syntax
you would need a real and normal function body surrounded with curly braces and no nice variation is
that if you have a function that only takes one parameter let's say we have our print output function
and that takes output which is string or a number let's say using a little union type here and then
we console lock output here.
Then we can of course use that to call print output here and add 5 and 2 but now of course from 1 we
can shorten this by removing the curly braces.
I am not really interested in the returned value of console log but it's also not a problem if we do
return it because as you learn there is an implicit return statement.
But now since we only have one argument we can even omit the parentheses around that argument.
However with a type assignment it will then not work.
It would work like that which works in vanilla javascript but which is not supported in typescript because
we admit to type assignment.
But if you would have to type assignment in a different place let's say with the function type assigned
to the constant which also gives typescript information about what will be stored in a constant.
Then this would be a syntax we can use.
So if we have this setup here and we give that type information to typescript in a different place then
we could use this more concise syntax.
Now arguably here we don't save a lot because now what we have to add that type assignment on our own.
But our case where we would save a lot is for example if you reach out to a button which we find in
the dorm maybe.
And please note here I have no button dorm but we can try to find one nonetheless
and we then add an event listener and now to make sure the typescript does not complain because button
could be null as it actually is here.
We can wrap this code into a check as you learned and now add an event listener to a click.
And now here we want to pass on a function that should be executed well that can be an anonymous function
here just like that.
And that shows us how great error functions are.
That's really not a lot of code and in here we get the event object which we now could console log like
this.
Now here we don't need to specify any function type anywhere because typescript knows what add event
listeners will provide to us that this will be an event object.
So indeed type code is able to infer this even the correct event object based on the event we're listening
to and ends here we can then retake take advantage of this very short and concise syntax.
So these are some of the variations of Arrow functions and of course I already used arrow functions
thus far in the course.
Just wanted to make it really clear again what they are and what we can do with them.