Preview
Video Player
00:00
00:00
Arrow Functions
4:55Managing context in JavaScript has always been challenging. Arrow functions will help ease the pain.
[MUSIC]
0:00
In this part of the course we'll be
looking at some of the more interesting
0:04
parts of ES2015 like aero functions,
default parameters, rest parameters,
0:08
the spread operator and destructuring.
0:12
First up, in this video,
you'll learn a new syntax for
0:15
writing JavaScript functions
using arrow functions.
0:18
Arrow functions are often
referred to as lambda function
0:22
in other programming languages.
0:24
They provide a short syntax for defining
functions and simplify function scope.
0:26
Let's have a look.
0:31
If you'd like to follow along using the
latest work space, open the work space for
0:33
this video.
0:36
I'll start by opening
the file arrowkeys.js.
0:37
In the file, I have a person
constructor which takes some data and
0:41
has a method called getKeys that
returns the current object's keys.
0:46
Then, I have instantiated a new person and
0:52
gave it a name Alena
with a role of teacher.
0:55
And right below I console.log the keys.
0:58
Now right below this console.Iog,
I reassign the getKeys
1:02
method to a getKeys variable
outside of the person instance.
1:07
And finally, I execute the new getKeys
function and log it to the console.
1:12
So let's run this file in the console and
see what happens.
1:17
Well the scope for getKeys has changed,
and the keys are not what I was expecting.
1:25
The second getKeys does
not refer to Alena and
1:31
it's throwing the exception cannot
convert undefined or null to object.
1:35
So what I want is to get the same
results for both getKeys calls.
1:41
Using ES 2015, there is one simple yet
1:47
significant change I can make to
the code to return the same results.
1:50
I'll change the getKeys method from an
anonymous function to an arrow function.
1:55
Now an arrow function is defined
with a set of parentheses, and
2:01
the new arrow token.
2:06
So now let's save this file and
2:10
run it in the console to see if we get
the same results in both getKeys calls.
2:11
And sure enough, we do.
2:17
So what the arrow, or lambda function
does, is it binds the function to
2:21
the instance of the person,
no matter where it was called.
2:26
In other words, this now refers to Alena.
2:31
Let's take a look at another example.
2:37
I'll open the file arrow-this.js.
2:39
This example introduces
another new feature of ES2015.
2:43
Promises.
2:47
And you can find references
to the Promise specification
2:48
in the Teacher's Notes of this video.
2:51
With Promises, callback functions
are handed off to another scope
2:53
to be called once an event is complete.
2:57
And because of this,
you have to take extra care when
2:59
handing off a callback function so that it
has a way to access its original scope.
3:02
So in this example,
3:07
I have a greet function on the classroom
using the arrow function syntax.
3:09
And here, the greet function calls
greet on the instance of the teacher.
3:15
Now here's where I'm making sure I
have access to the correct scope.
3:20
And as you can see,
this is pretty hard to read.
3:25
It's an immediately invoked
function expression
3:28
that returns a function which logs the
name of the teacher and their greeting.
3:31
And we also pass an error to the callback
in the event an error happens.
3:35
With the arrow function,
3:41
I can make this a lot easier to
read with fewer lines of code.
3:42
Like this.
3:46
Then, instead of saying
classroom.teacher.name,
3:53
we'll say this.teacher.name.
3:57
We can also pass the error to
the callback using the arrow function.
4:00
So, now the promise returns then,
we use our arrow function.
4:17
The greeting is passed to our function and
we log the message.
4:22
And there was a lot less code to write
compared with the previous example.
4:26
Keep in mind that arrow functions
don't require parentheses
4:32
when your function only
takes a single parameter.
4:35
You can even omit the curly braces
when you're simply returning
4:37
the result of your
expression like we are here.
4:40
And be sure to review the teacher's notes
for more information on Arrow functions.
4:45
Coming up in the next video,
4:50
you'll learn how to set default
parameters in your functions.
4:51