Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introducing ES2015!
You have completed Introducing ES2015!
Preview
Managing context in JavaScript has always been challenging. Arrow functions will help ease the pain.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up