1
00:00:00,880 --> 00:00:04,880
So far, you've written functions that
look like this, the function keyword,

2
00:00:04,880 --> 00:00:07,330
followed by the name of the function.

3
00:00:07,330 --> 00:00:10,260
This is what's called
a function declaration.

4
00:00:10,260 --> 00:00:11,400
There's another syntax for

5
00:00:11,400 --> 00:00:14,730
creating a function,
that's called a function expression.

6
00:00:14,730 --> 00:00:19,160
Open the file, expressions.js,
and in index.html,

7
00:00:19,160 --> 00:00:26,900
update the source attribute in
the script tag to js/expressions.js.

8
00:00:26,900 --> 00:00:30,350
A function expression lets you
assign a function to a variable.

9
00:00:30,350 --> 00:00:31,091
For example,

10
00:00:31,091 --> 00:00:34,619
you could rewrite the getRandomNumber
function to look like this.

11
00:00:41,301 --> 00:00:45,140
Notice that there's no name
after the function keyword.

12
00:00:45,140 --> 00:00:47,680
A function without a name after
the function keyword is called

13
00:00:47,680 --> 00:00:49,410
an anonymous function.

14
00:00:49,410 --> 00:00:51,910
Instead, the name comes from the variable.

15
00:00:51,910 --> 00:00:54,850
In other words,
I'm storing a function as a value

16
00:00:54,850 --> 00:00:57,270
in a variable named getRandomNumber.

17
00:00:57,270 --> 00:00:58,060
Also in this case,

18
00:00:58,060 --> 00:01:01,670
you're creating a statement by
assigning a value to a variable.

19
00:01:01,670 --> 00:01:05,810
Because of this, you add a semicolon
after the closing curly brace.

20
00:01:05,810 --> 00:01:09,050
You call this type of function the same
as you would have function with a name or

21
00:01:09,050 --> 00:01:10,900
a function declaration.

22
00:01:10,900 --> 00:01:13,370
Use the name of the variable,
followed by parenthesis.

23
00:01:14,440 --> 00:01:18,395
So now any time you come across
a function that's assigned to a variable,

24
00:01:18,395 --> 00:01:20,015
you'll know that it's
a function expression.

25
00:01:20,015 --> 00:01:22,710
You're also going to explore
function expressions

26
00:01:22,710 --> 00:01:25,350
further in the next stage
on arrow functions.

27
00:01:25,350 --> 00:01:29,930
Finally, function decorations and function
expressions work in much the same way,

28
00:01:29,930 --> 00:01:32,700
except for one subtle but
important difference.

29
00:01:32,700 --> 00:01:36,720
You can call a function
declaration before it's defined.

30
00:01:36,720 --> 00:01:40,432
For example, I'll convert this function
back to a function declaration.

31
00:01:45,980 --> 00:01:49,135
Then call getRandomNumber
above the function and

32
00:01:49,135 --> 00:01:52,825
print its return value to
the console with console.log.

33
00:01:58,634 --> 00:02:02,850
Notice how the function still works
as expected, we get a random number.

34
00:02:02,850 --> 00:02:07,460
That's because function declarations
load before any code is executed.

35
00:02:07,460 --> 00:02:11,680
When the JavaScript file loads, the
JavaScript engine behind the scenes moves

36
00:02:11,680 --> 00:02:15,195
all function declarations to
the top of their current scope,

37
00:02:15,195 --> 00:02:16,880
in this case the global scope.

38
00:02:16,880 --> 00:02:20,820
Since the JavaScript engine immediately
knows about any function declarations,

39
00:02:20,820 --> 00:02:24,240
you're able to call a function
before it's declared in the file.

40
00:02:24,240 --> 00:02:26,340
This behavior is called hoisting.

41
00:02:26,340 --> 00:02:29,290
Function expressions,
on the other hand, are not hoisted or

42
00:02:29,290 --> 00:02:31,220
lifted up to the top of their scope.

43
00:02:31,220 --> 00:02:35,310
A function expression loads only when
the JavaScript engine reaches the line of

44
00:02:35,310 --> 00:02:36,340
code it's on.

45
00:02:36,340 --> 00:02:37,120
For instance,

46
00:02:37,120 --> 00:02:41,445
I'll, again, convert the getRandomNumber
function into a function expression.

47
00:02:47,614 --> 00:02:50,120
Now the console outputs an error.

48
00:02:50,120 --> 00:02:52,320
It says, uncaught ReferenceError,

49
00:02:52,320 --> 00:02:55,910
cannot access GetRandomNumber
before initialization.

50
00:02:55,910 --> 00:03:00,037
So remember, if you call a function
expression before it's defined,

51
00:03:00,037 --> 00:03:01,217
you'll get an error

52
00:03:09,358 --> 00:03:12,940
The approach you use to writing functions
is a matter of personal preference.

53
00:03:12,940 --> 00:03:16,300
Choose one style and try to stick
with it throughout your script.

54
00:03:16,300 --> 00:03:20,611
If your program at some point might need
to call a function before it's declared,

55
00:03:20,611 --> 00:03:22,433
then use function declarations.

56
00:03:22,433 --> 00:03:25,922
Now, some developers also prefer
the structure that function expressions

57
00:03:25,922 --> 00:03:27,370
provide to their code.

58
00:03:27,370 --> 00:03:31,460
Since you're not able to call a function
expression before it's declared,

59
00:03:31,460 --> 00:03:35,800
it requires that you write your functions
up top, in a specific order, otherwise,

60
00:03:35,800 --> 00:03:36,910
they won't work.

61
00:03:36,910 --> 00:03:40,910
And any code that calls and runs
functions get placed toward the bottom

62
00:03:40,910 --> 00:03:45,390
of the program or file, which can make
your code more readable and predictable.

63
00:03:45,390 --> 00:03:48,616
But, again, the style is mostly
up to you and your team.

64
00:03:50,217 --> 00:03:53,210
Understanding the basics
of functions is a big deal.

65
00:03:53,210 --> 00:03:57,650
Just about every program you'll write
will use one or several functions.

66
00:03:57,650 --> 00:04:01,060
As you become more experienced with
JavaScript, you'll start to notice that

67
00:04:01,060 --> 00:04:04,910
parts of your code are repetitive,
and do the same thing over and over.

68
00:04:04,910 --> 00:04:08,190
So, if you find yourself writing
the same exact code more than once,

69
00:04:08,190 --> 00:04:10,536
it's a symptom that
something is likely wrong.

70
00:04:10,536 --> 00:04:14,180
That's where a function can help you avoid
duplicating code, and provide a way to

71
00:04:14,180 --> 00:04:19,260
group reusable code together to use, or
call later at any point in the program.

72
00:04:20,310 --> 00:04:24,130
In the next stage, you'll build on your
knowledge of functions by learning about

73
00:04:24,130 --> 00:04:27,860
arrow functions, which offer a more
concise syntax for writing functions.

74
00:04:27,860 --> 00:04:28,360
See you soon.