[MUSIC]
>> Hi. My name is Aaron Powell.
I'm a Principal Cloud Advocate here at Microsoft.
Today, we're going to talk about arrow functions in JavaScript.
An arrow function, or some of you might be
familiar with a fat arrow function,
is a special type of function declaration we've got in JavaScript.
A function is normally defined using
a function keyword but an arrow function is
defined using an equal symbol and
the greater than symbol following it immediately.
That's why it gets its name, fat arrow.
The special thing about an arrow function is that it changes
the way that this context
is managed within it's average arrow function.
If you've worked with JavaScript functions before,
you might have seen that this value inside of
that function is determined by its parent scope.
It you catch you out on where that function was
called to what this actually represents.
Inside of the fat arrow function,
it captures its parents, this context,
and makes that available because an arrow function
doesn't have a disk context of its own,
instead it inherits it from its parent
or its parent's parent or it's parent's parent, etc,
depending on where the most
top-level non arrow function is defined.
An arrow function also supports implicit return values.
This means, you don't need to use the keyword return to
return a value out of
an arrow function if it's only a single line.
An arrow function can also be assigned to a variable,
so we will do const, add, equals,
and then our arrow function,
or it can be immediately used.
We can't just have a named function like we would with
a traditional JavaScript function
because it has to be assigned to a variable.
One of the other benefits is it's
a reduction in the number of characters you've got to
type or the number of characters
that are in the output JavaScript,
and that's a small bundle size you
might be sending down in a browser response.
Let's have a look at a couple of different
use cases for an arrow function.
On the first set of examples,
we'll see we're creating an add function.
We're assigning that to a variable called add using a keyword.
Then it has two arguments, a and b,
and then our arrow keyword or our arrow operator,
sorry, and then a plus b.
Now, this doesn't have a return statement,
and it's also only a single line which
an arrow function then names as an implicit return value.
When we were to do a console.log on that add function,
it will give us the value of three.
Now, we can still have a multi-line
and explicit return for our arrow function,
and that's what we're doing with our subtract variable.
Subtract is assigned to an arrow function,
and this time we're using the curly brackets to
denote that this is going to take multiple lines.
Here, we then have the implicit return, sorry,
the explicit return, not an implicit
return by using the return keyword.
Now, you could imagine you could have
other things that this function is also doing,
but in this case it's still only a single line.
Then if we were to call it,
we would call it the same way we call the add function,
just by invoking that function and passing in some arguments.
As I mentioned before,
that this context changes with inside of
an arrow function and it's
important to understand what that means.
This context in a traditional JavaScript function
is defined where that function is called,
whereas in an arrow function,
it's inherited from its parent.
If it is invoked inside of the callback for
a callback handler such as
a click event or an asynchronous operation,
then it will be wherever that function was defined
as passes an argument to the callback.
That is where that this context will be.
This means that inside of an arrow function,
you're less likely to rely on this because it's always
inherited somewhere up in
the hierarchy of the definition of that function,
and it's not something you can
control with inside of your own scope.
Because you cannot actually change the way that
this context is defined with inside of an arrow function.
In other JavaScript functions,
you have some control over that,
but this is always explicitly defined by its parent.
It's also maintained if you pass
this function as a reference to another function.
This is where you would pass it as
the callback handler to
something that's going to happen asynchronously,
whether it's a set timeout,
that this scope is always going to be defined
by its parent and it could be passing that
so on and so forth to many different locations where you
have so far removed from whether it was originally defined,
but that this scope is originally
captured from its declaration point.
If we're dealing with our return values,
we can have them implicit or explicit.
A single line arrow function will always be implicit returned,
even if the result of the operation returns
and have nothing and returns an undefined,
then the return value of
your implicit statement is going to be undefined.
If you want to make a arrow function over multiple lines,
then we would use the curly brackets that would then
denote the start and end of the block that is that function,
and then everything with inside of
those curly brackets are the block statements that we have.
This is similar to a traditional JavaScript function.