1
00:00:00,000 --> 00:00:04,662
[MUSIC]

2
00:00:04,662 --> 00:00:05,350
Hello world.

3
00:00:05,350 --> 00:00:08,960
Andrew here, a lifelong learner 
and teacher here at Treehouse

4
00:00:08,960 --> 00:00:12,130
in this workshop we are going
to take a look at one method for

5
00:00:12,130 --> 00:00:15,760
writing functions that was
introduced in ECMAscript 2015.

6
00:00:15,760 --> 00:00:20,680
This syntax is been widely
adopted by JavaScript developers.

7
00:00:20,680 --> 00:00:22,390
And you are going to come across it.

8
00:00:22,390 --> 00:00:25,235
The arrow syntax is used
because it's concise.

9
00:00:25,235 --> 00:00:31,040
Arrow Function Syntax also solves common 
JavaScript gotchas surrounding scope when

10
00:00:31,040 --> 00:00:35,640
used in callbacks the language problems
are beyond the scope of this workshop.

11
00:00:35,640 --> 00:00:37,910
However, if you're interested now.

12
00:00:37,910 --> 00:00:41,070
I've added some reading material
in the teacher's notes.

13
00:00:41,070 --> 00:00:45,030
If you'd like to follow along open
up the workspace with this video.

14
00:00:45,030 --> 00:00:47,280
There are several JavaScript files.

15
00:00:47,280 --> 00:00:49,830
We're going to focus on the first three.

16
00:00:49,830 --> 00:00:51,620
Each file has some functions.

17
00:00:51,620 --> 00:00:58,460
In the first file, we have two functions,
with no arguments, sayName.

18
00:00:58,460 --> 00:00:59,880
And sayBye.

19
00:00:59,880 --> 00:01:07,450
The second file contains two functions
with a single argument square and cube.

20
00:01:07,450 --> 00:01:12,669
The third file contains three functions
with multiple arguments multiply,

21
00:01:12,669 --> 00:01:14,554
add and subtract.

22
00:01:14,554 --> 00:01:21,380
Before Script 2015 we generally
declared functions in JavaScript

23
00:01:21,380 --> 00:01:27,300
in one of two ways, as a function
declaration or a function expression.

24
00:01:27,300 --> 00:01:32,580
The functions in all of these three
files are function declarations.

25
00:01:32,580 --> 00:01:36,020
A function declaration starts
with the keyword function and

26
00:01:36,020 --> 00:01:38,410
the name you want to
give to that function.

27
00:01:39,430 --> 00:01:43,470
A pair of parentheses and curly braces

28
00:01:43,470 --> 00:01:47,980
contained in the block of code you want
to execute when the function runs.

29
00:01:47,980 --> 00:01:50,640
Rewriting a function declaration So

30
00:01:50,640 --> 00:01:55,440
a function expression is similar to 
writing an arrow function.

31
00:01:55,440 --> 00:01:59,840
Why don't we change sayName
from a function declaration

32
00:01:59,840 --> 00:02:04,310
to a function expression first and 
then to an arrow function?

33
00:02:04,310 --> 00:02:08,250
With a function expression you
assign a function to a variable.

34
00:02:08,250 --> 00:02:13,280
For example, to change the sayName 
function here I would simply create

35
00:02:13,280 --> 00:02:19,310
a variable named : sayName and
then assign the function to it.

36
00:02:21,640 --> 00:02:24,550
Notice I remove the name of the function.

37
00:02:24,550 --> 00:02:29,021
I can still call sayName like this.

38
00:02:29,021 --> 00:02:31,680
We're using ECMAscript 2015,

39
00:02:31,680 --> 00:02:33,430
and the best practice for

40
00:02:33,430 --> 00:02:37,300
declaring a variable is to make it
a constant with the keyword cons.

41
00:02:40,000 --> 00:02:44,330
Using const doesn't change the
functionality of the sayName function, but

42
00:02:44,330 --> 00:02:49,280
prevents us from reassigning what's
inside the sayName variable.

43
00:02:49,280 --> 00:02:52,130
sayName is now a function expression.

44
00:02:52,130 --> 00:02:56,520
Arrow functions are expressions 
similar to function expressions.

45
00:02:56,520 --> 00:03:01,640
To convert the sayName function expression
to an arrow function expression, we simply

46
00:03:01,640 --> 00:03:08,500
need to remove the keyword function and
after the parentheses, we add an arrow.

47
00:03:08,500 --> 00:03:12,890
Which is an equal sign and
a greater than sign.

48
00:03:12,890 --> 00:03:16,150
We've written our first arrow 
function expression.

49
00:03:16,150 --> 00:03:20,515
Let's assign this sayBye function
to the constant variable sayBye.

50
00:03:26,296 --> 00:03:29,010
Remove the function name and
function keyword.

51
00:03:30,230 --> 00:03:35,260
Finally, after the parentheses add
an arrow, which is an equal sign and

52
00:03:35,260 --> 00:03:37,280
a greater than symbol.

53
00:03:37,280 --> 00:03:41,130
In the next video,
we'll see how to work with single or

54
00:03:41,130 --> 00:03:43,600
multiple arguments with arrow functions.