Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how arrow functions provide a special, more concise syntax for creating functions. Arrow functions are similar to function expressions; they're appropriately called "arrow function expressions."
Resources
Rewrite the getArea function declaration as an arrow function:
const getArea = (width, length, unit) => {
const area = width * length;
return `${area} ${unit}`;
};
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
As you learn more about JavaScript and
how the language evolves, you'll realize
0:04
that it provides different and perhaps
more efficient ways to do similar things.
0:08
Working with functions
is one of those things.
0:12
So far you've learned how to write
a function as a declaration and
0:15
as an expression.
0:19
A function declaration, for example,
defines a function using the function
0:20
keyword followed by
the name of the function.
0:24
And a function expression
is an anonymous function or
0:26
a function without a name
that's assigned to a variable.
0:30
In this stage, I'll teach you another
method for writing functions.
0:33
You'll learn how arrow functions provide
a special more concise syntax for
0:37
creating functions.
0:41
Arrow functions are very similar
to function expressions.
0:42
In fact, they're properly called Arrow
Function Expressions, the basic syntax for
0:45
an arrow function looks like this.
0:50
You omit the function keyword [SOUND] and
after the parentheses add the arrow token,
0:52
which is just an equals sign immediately
followed by the greater than sign.
0:57
The body of the function can remain
the same but as you'll soon learn,
1:01
there are ways to make error
functions even more compact.
1:05
You can access the new set of files by
launching the work space with this video.
1:08
Open the file arrow-functions.js
located inside the js folder.
1:12
The files are already
linked to index dot html.
1:16
The get randomNumber function in this file
is written as a function declaration.
1:19
That's a function that begins
with the function key word,
1:23
followed by the name of the function and
a pair of parentheses.
1:27
We're going to convert this
function to an arrow function.
1:30
Now, arrow functions are similar to
the function expressions you learned about
1:33
earlier.
1:37
So let's first change the getRandomNumber() function declaration to
1:37
a function expression and
then to an arrow function.
1:41
Create a variable named getRandomNumber
and assign an anonymous function to it.
1:44
You can make this function even more
concise using the arrow function syntax.
1:55
To convert the getRandomNumber function
expression to an arrow function,
1:59
remove the function keyword.
2:04
And after the parenthesis add an arrow,
2:06
which is an equal sign immediately
followed by a greater than sign.
2:09
All right, so now we've rewritten the
function assigned to the getRandomNumber
2:13
variable as an arrow function.
2:17
And notice how arrow functions
themselves are anonymous functions,
2:19
because they don't have a name,
and you call or
2:23
reference the function
using the variable name.
2:26
Let's test the function by calling
it in the JavaScript console.
2:28
And it works,
we get a random number between 1 and 6.
2:35
Keep in mind that arrow functions
mostly behave like function expression.
2:40
For example, arrow function
expressions are not hoisted or
2:44
lifted up to the top of their
scope by the JavaScript engine.
2:47
They'd load only when the JavaScript
engine reaches the line of code their on.
2:51
So if you tried to call an arrow
function expression before it's defined,
2:55
you'll get an error.
2:59
Now currently,
this arrow function has no parameters.
3:01
When you need to add parameters
to the function definition,
3:04
you include them just as you do in
function declarations and expressions.
3:07
For example, add an upper
parameter inside the parentheses,
3:10
then use the value of the upper
parameter inside the function.
3:14
I'll save my file and
test it in the console.
3:18
By calling getRandomNumber() and
passing it the argument 12, and
3:22
there's my random number.
3:25
Besides being concise,
the arrow syntax has other benefits and
3:29
help solve common JavaScript problems and
gotchas.
3:33
Like other features,
they have advantages and disadvantages,
3:36
which are beyond the scope of this course.
3:39
But you'll get to know about
them later as you learn more and
3:41
more about the details of JavaScript.
3:44
And keep in mind that arrow functions
are not meant to replace regular function
3:46
declarations or function expressions.
3:50
It's just a newer syntax for
writing functions.
3:52
Function declarations, for example,
are still widely used by developers.
3:55
They're useful because they work in
a slightly different way than arrow
3:59
functions.
4:02
For instance, function declarations
are hoisted while arrow functions are not.
4:02
There are specific places where arrow
functions can improve your code too.
4:07
For example, in future lessons,
4:11
you'll experience the advantages of
the short arrow function syntax.
4:13
When you learn to pass functions as
arguments to other functions with
4:16
what are called callbacks, all right?
4:20
Now, to get additional practice
writing arrow functions,
4:22
why don't you rewrite this getArea
function declaration you wrote earlier as
4:25
an arrow function expression.
4:29
You can check out the solution in
the teacher's notes with this video.
4:31
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