1
00:00:00,525 --> 00:00:04,811
we are ready to move on. Functions are the

2
00:00:04,811 --> 00:00:07,192
very heart of JavaScript. They are a

3
00:00:07,192 --> 00:00:08,525
powerful tool that lets you create

4
00:00:08,525 --> 00:00:11,859
reusable chunks of code. They make coding

5
00:00:11,859 --> 00:00:14,859
faster, easier, and less error prone. So

6
00:00:14,859 --> 00:00:17,525
let's look at a simple definition of what

7
00:00:17,525 --> 00:00:19,859
a function is. A function is a block of

8
00:00:19,859 --> 00:00:22,303
organized, reusable code that is used to

9
00:00:22,303 --> 00:00:25,025
perform a single, related action. In other

10
00:00:25,025 --> 00:00:26,775
words, it's a set of statements that

11
00:00:26,775 --> 00:00:28,970
perform a task or calculates a value. To

12
00:00:28,970 --> 00:00:32,525
use a function, you must first define it.

13
00:00:32,525 --> 00:00:35,275
Here's a simple example. A function

14
00:00:35,275 --> 00:00:37,150
declaration consists of the function

15
00:00:37,150 --> 00:00:39,240
keyword followed by the name of the

16
00:00:39,240 --> 00:00:41,400
function, a list of optional parameters

17
00:00:41,400 --> 00:00:43,192
enclosed in parentheses separated by

18
00:00:43,192 --> 00:00:45,707
commas, one or more statements that define

19
00:00:45,707 --> 00:00:48,414
the body of the function. These are

20
00:00:48,414 --> 00:00:51,525
enclosed in curly brackets as shown here.

21
00:00:51,525 --> 00:00:53,240
Note that the function definition by

22
00:00:53,240 --> 00:00:55,889
itself doesn't really do anything. In

23
00:00:55,889 --> 00:00:58,798
order to run a function, you have to

24
00:00:58,798 --> 00:01:01,240
invoke it. This is done by calling the

25
00:01:01,240 --> 00:01:03,525
function as shown in the statement here.

26
00:01:03,525 --> 00:01:06,859
You include the function name, followed by

27
00:01:06,859 --> 00:01:10,668
parentheses and a semicolon. The output

28
00:01:10,668 --> 00:01:14,125
here would be Hello John. Another thing to

29
00:01:14,125 --> 00:01:16,125
note here is that by default, all

30
00:01:16,125 --> 00:01:20,025
functions return a value. In our example,

31
00:01:20,025 --> 00:01:23,525
the return value is undefined. So how do

32
00:01:23,525 --> 00:01:26,650
we go about returning a value? We do this

33
00:01:26,650 --> 00:01:29,097
by including the return statement at the

34
00:01:29,097 --> 00:01:31,811
end of our function body. This is similar

35
00:01:31,811 --> 00:01:34,097
to our previous example. Instead of

36
00:01:34,097 --> 00:01:35,811
printing the Hello John! string through

37
00:01:35,811 --> 00:01:37,525
the console inside the greeting function,

38
00:01:37,525 --> 00:01:40,859
we return it. This return value is

39
00:01:40,859 --> 00:01:43,668
collected in the message variable by the

40
00:01:43,668 --> 00:01:46,525
greetings function that's being invoked.

41
00:01:46,525 --> 00:01:50,081
We then print the message variable to the

42
00:01:50,081 --> 00:01:51,359
console. Before we look at another

43
00:01:51,359 --> 00:01:53,525
example, let's clarify the difference

44
00:01:53,525 --> 00:01:56,798
between an argument and a parameter. An

45
00:01:56,798 --> 00:01:59,253
argument is a value that we pass to the

46
00:01:59,253 --> 00:02:01,859
function when we invoke it. A parameter,

47
00:02:01,859 --> 00:02:04,609
on the other hand, is a variable that we

48
00:02:04,609 --> 00:02:07,859
list as part of a function definition. In

49
00:02:07,859 --> 00:02:10,192
this example, we define a function called

50
00:02:10,192 --> 00:02:12,954
sum that takes in two parameters. We

51
00:02:12,954 --> 00:02:15,925
invoke the sum function with arguments of

52
00:02:15,925 --> 00:02:19,748
values 2 and 3 and assign the return value

53
00:02:19,748 --> 00:02:22,650
to the result variable. Finally, we output

54
00:02:22,650 --> 00:02:26,525
the value of result variable to the

55
00:02:26,525 --> 00:02:29,525
console. In this example, we have a

56
00:02:29,525 --> 00:02:32,025
function name greetings with one parameter

57
00:02:32,025 --> 00:02:33,925
name. In the function body, we can

58
00:02:33,925 --> 00:02:36,925
reference this parameter just like any

59
00:02:36,925 --> 00:02:39,525
other variable. We invoke this function

60
00:02:39,525 --> 00:02:41,811
with the argument name whose value is

61
00:02:41,811 --> 00:02:44,097
initially set to John. And then we invoke

62
00:02:44,097 --> 00:02:48,525
the same function with the argument Mary.

63
00:02:48,525 --> 00:02:51,525
Can you see the flexibility arguments

64
00:02:51,525 --> 00:02:53,811
provide us? This is especially useful when

65
00:02:53,811 --> 00:02:56,425
we get to more complex examples that do a

66
00:02:56,425 --> 00:02:59,097
lot more than printing to the console. Now

67
00:02:59,097 --> 00:03:02,707
let's look at the arguments object. There

68
00:03:02,707 --> 00:03:04,344
may be times when you need to invoke a

69
00:03:04,344 --> 00:03:07,025
function with an indefinite number of

70
00:03:07,025 --> 00:03:09,400
arguments. The arguments object allows us

71
00:03:09,400 --> 00:03:12,525
to represent them as an array-like object.

72
00:03:12,525 --> 00:03:14,525
It's array-like and not exactly an array

73
00:03:14,525 --> 00:03:18,414
because it has a length property and all

74
00:03:18,414 --> 00:03:21,525
values are indexed beginning at 0 index.

75
00:03:21,525 --> 00:03:23,775
However, it doesn't have other built-in

76
00:03:23,775 --> 00:03:26,811
array methods, like foreach and Map. In

77
00:03:26,811 --> 00:03:28,925
this example, we define a function that

78
00:03:28,925 --> 00:03:31,725
prints all the arguments that are passed

79
00:03:31,725 --> 00:03:35,097
to it. First, we invoke it with five

80
00:03:35,097 --> 00:03:37,240
arguments. And then we invoke the same

81
00:03:37,240 --> 00:03:39,900
function with only two arguments. ES6

82
00:03:39,900 --> 00:03:42,859
allows us to achieve the same result using

83
00:03:42,859 --> 00:03:45,192
rest parameters. And we will revisit this

84
00:03:45,192 --> 00:03:48,900
example in other subsequent modules. Let's

85
00:03:48,900 --> 00:03:51,859
see some of these examples in action in

86
00:03:51,859 --> 00:03:55,192
our demo. To begin, let's take our first

87
00:03:55,192 --> 00:03:58,240
example from earlier. Here, we have the

88
00:03:58,240 --> 00:03:59,970
greeting function definition. And notice

89
00:03:59,970 --> 00:04:02,097
how we have to invoke the function to get

90
00:04:02,097 --> 00:04:05,025
the output in the console. Next, we have

91
00:04:05,025 --> 00:04:07,325
the same function, but we return the

92
00:04:07,325 --> 00:04:10,097
message instead of printing it to the

93
00:04:10,097 --> 00:04:11,859
console. One thing to keep in mind here is

94
00:04:11,859 --> 00:04:14,192
that when your function is returning a

95
00:04:14,192 --> 00:04:16,525
value, you should assign it to a variable

96
00:04:16,525 --> 00:04:19,025
as we are doing here with the message

97
00:04:19,025 --> 00:04:22,025
variable. If you don't, you simple lose

98
00:04:22,025 --> 00:04:24,859
the return value. In this example, we are

99
00:04:24,859 --> 00:04:27,925
calling the sum function with values 2 and

100
00:04:27,925 --> 00:04:31,150
3. The result 5 is displayed in the

101
00:04:31,150 --> 00:04:33,525
console. What happens if your number of

102
00:04:33,525 --> 00:04:36,525
arguments and parameters don't match?

103
00:04:36,525 --> 00:04:39,859
Let's try it out. We invoke the sum

104
00:04:39,859 --> 00:04:41,775
function with only one argument. The

105
00:04:41,775 --> 00:04:45,025
output is NaN, which stands for not a

106
00:04:45,025 --> 00:04:47,616
number. This is because when the sum

107
00:04:47,616 --> 00:04:50,162
function doesn't get any value for number

108
00:04:50,162 --> 00:04:51,859
2, it defaults to undefined. In

109
00:04:51,859 --> 00:04:54,192
JavaScript, a value is the addition of

110
00:04:54,192 --> 00:04:58,859
num1, and undefined is not a number. This

111
00:04:58,859 --> 00:05:01,525
is our example from earlier with the

112
00:05:01,525 --> 00:05:03,775
arguments object. We are able to invoke

113
00:05:03,775 --> 00:05:05,925
the same function, printAll, with

114
00:05:05,925 --> 00:05:09,000
different number of arguments. The output is displayed in the console.

