Preview
Video Player
00:00
00:00
Concise Arrow Function Syntax
3:16Arrow function syntax can be even more concise. In this video we'll modify existing arrow functions to be shorter.
Arrow functions are less verbose
than function declarations.
0:00
But they can get even more concise.
0:03
If your arrow function only
takes a single argument
0:06
like in the case of square and cube.
0:10
You don't need parentheses.
0:14
You can't remove parentheses on
functions with no or multiple arguments.
0:18
Only on functions with single arguments.
0:23
If you're only using one line of code,
you don't need the return keyword.
0:26
It will always return
the value of the statement
0:32
without the use of the return keyword.
0:35
You can reduce the Arrow syntax further
by removing the curly braces when you
0:38
only have a single line of
code in your array function.
0:43
If you haven't got multiple
lines of code in your function.
0:48
This can really clean up your
code to be more concise.
0:51
Let's also make the cube function more
concise by removing the parentheses,
0:55
the return key word with the curly braces.
1:01
Can we make the rest of these
functions more concise?
1:07
Multiply, add, and
subtract are all one line long.
1:12
So we can omit the returns and
the curly braces.
1:18
Since there are two arguments for
each function,
1:31
we have to leave the parentheses.
1:35
Finally, let's take a look at
functions with no arguments.
1:39
Take a look at the same name function,
1:44
the sayName are a function has two
lines of code.
1:47
So we can't reduce this further.
1:53
Also there are no arguments.
1:55
So we have to leave the parentheses.
1:57
They say Bye function can be
reduced to a single line.
2:00
Because there's only one line
of code in the function block.
2:04
And there you have it, we've re-factored
several function declarations into arrow
2:10
function expressions.
2:15
This shorthand syntax can
look strange at first.
2:17
Take a look in the fourth and final file.
2:22
Each one of these divide functions
Are all functionally the same.
2:25
The function declaration,
The function expression and
2:32
the arrow functions perform the same task.
2:38
Dividing one number by another.
2:43
I'd encourage you to get in additional
practice by rewriting some of your
2:46
own existing JavaScript programs
to use arrow function syntax.
2:50
Most documentation, articles and
2:55
courses about JavaScript use
this new arrow function syntax.
2:57
It's also expected of you
as a JavaScript developer
3:01
that you understand the syntax too.
3:04
All modern browsers have support for
the arrow function syntax.
3:07
So it has never been a better
time to start using it yourself.
3:10
Until next time, keep coding.
3:14