1
00:00:02,050 --> 00:00:05,580
Functions are a key feature of programming,

2
00:00:05,580 --> 00:00:07,510
not just of JavaScript,

3
00:00:07,510 --> 00:00:10,380
and functions are basically our own commands,

4
00:00:10,380 --> 00:00:12,820
which we can define as a developer

5
00:00:12,820 --> 00:00:15,683
to then execute them anywhere in our code.

6
00:00:16,700 --> 00:00:20,580
And now it's time for our own custom functioner.

7
00:00:20,580 --> 00:00:23,260
For this anywhere in your code,

8
00:00:23,260 --> 00:00:28,260
you can add a new function by typing the function keyword.

9
00:00:29,470 --> 00:00:32,970
So we saw the let keyword for defining variables,

10
00:00:32,970 --> 00:00:37,490
now we have to function keyword for defining functions.

11
00:00:37,490 --> 00:00:41,910
Why is it let and not variable? Well, it is what it is.

12
00:00:41,910 --> 00:00:44,920
So here, we have the function keyword,

13
00:00:44,920 --> 00:00:48,470
and as I said, with that, we can create our own command,

14
00:00:48,470 --> 00:00:52,250
hence the next step is to give our own command a name,

15
00:00:52,250 --> 00:00:54,730
and that name is totally up to you,

16
00:00:54,730 --> 00:00:57,450
it's just, again, has to follow certain rules

17
00:00:57,450 --> 00:01:00,390
and conventions, and these rules and conventions

18
00:01:00,390 --> 00:01:03,690
are the same as for variable names.

19
00:01:03,690 --> 00:01:06,270
However, there is an additional convention

20
00:01:06,270 --> 00:01:10,890
that function names should not describe what's in them,

21
00:01:10,890 --> 00:01:13,920
but instead, what this operation does.

22
00:01:13,920 --> 00:01:17,080
Since a function is a command that you can later reuse

23
00:01:17,080 --> 00:01:19,010
to perform a certain operation,

24
00:01:19,010 --> 00:01:23,010
hence function names should describe as operation.

25
00:01:23,010 --> 00:01:26,510
So here, I wanna calculate my adult years

26
00:01:26,510 --> 00:01:29,857
and hence I'll name this function calculateAdulYears.

27
00:01:33,580 --> 00:01:36,430
Now this naming might still be a bit strange

28
00:01:36,430 --> 00:01:40,140
if you have never worked in programming before,

29
00:01:40,140 --> 00:01:43,270
but it is something you will get used to.

30
00:01:43,270 --> 00:01:47,620
Now, that's the name of our own function, our own command.

31
00:01:47,620 --> 00:01:49,440
Now, things change a bit though.

32
00:01:49,440 --> 00:01:53,190
We don't use the equal sign as we did it for a variables,

33
00:01:53,190 --> 00:01:56,540
instead, for functions, we now add opening

34
00:01:56,540 --> 00:02:01,540
and closing parentheses, and then, curly braces,

35
00:02:02,270 --> 00:02:04,713
opening and closing curly braces.

36
00:02:05,600 --> 00:02:08,180
And now, between those curly braces,

37
00:02:08,180 --> 00:02:11,110
we put our operation code,

38
00:02:11,110 --> 00:02:13,583
so the code that makes up this operation.

39
00:02:14,480 --> 00:02:15,940
And we can also put something

40
00:02:15,940 --> 00:02:17,700
between those parentheses here,

41
00:02:17,700 --> 00:02:19,350
but I'll come back to that later.

42
00:02:20,690 --> 00:02:23,940
Now, typically, you do now add a new line,

43
00:02:23,940 --> 00:02:25,260
so you add a line break

44
00:02:25,260 --> 00:02:30,100
and you indent this year a little bit for readability sake.

45
00:02:30,100 --> 00:02:33,230
You don't have to, you can write it all in one line,

46
00:02:33,230 --> 00:02:35,000
you also don't have to indent,

47
00:02:35,000 --> 00:02:38,840
but it's the common notation to use multiple lines

48
00:02:38,840 --> 00:02:42,313
and to indent because that will make it more readable.

49
00:02:43,522 --> 00:02:47,240
And in here, you can now perform the operation,

50
00:02:47,240 --> 00:02:49,160
which you wanna outsource.

51
00:02:49,160 --> 00:02:52,030
In my case, that's this calculation

52
00:02:52,030 --> 00:02:54,843
where I deduct 18 from age.

53
00:02:56,150 --> 00:02:58,600
Now, for this, we can copy this code

54
00:02:58,600 --> 00:03:00,480
and add in this function.

55
00:03:00,480 --> 00:03:04,120
And now, we need to do something with it here.

56
00:03:04,120 --> 00:03:07,550
Because like this, we performed this operation,

57
00:03:07,550 --> 00:03:11,650
but out of the box, this just produces a new value,

58
00:03:11,650 --> 00:03:14,663
which at the moment, would go into the white.

59
00:03:15,600 --> 00:03:18,730
Now, one thing we could do here

60
00:03:18,730 --> 00:03:23,730
is we could store this in adult years,

61
00:03:24,290 --> 00:03:28,540
however, not by using let here, but without let,

62
00:03:28,540 --> 00:03:33,080
and actually define this adult years variable

63
00:03:33,080 --> 00:03:35,253
before we define this function.

64
00:03:36,200 --> 00:03:39,340
Maybe like this, without an initial value,

65
00:03:39,340 --> 00:03:40,870
which is also allowed.

66
00:03:40,870 --> 00:03:42,910
And then here, down there,

67
00:03:42,910 --> 00:03:47,733
I just assign a new value and hence I remove let.

68
00:03:48,890 --> 00:03:52,100
Now, I'll come back to why I'm doing this in a second.

69
00:03:52,100 --> 00:03:54,700
But for the moment, let's change our code like this.

70
00:03:55,620 --> 00:03:59,530
Now, this function does custom command

71
00:03:59,530 --> 00:04:03,120
overwrites sets a new value to adult years,

72
00:04:03,120 --> 00:04:05,913
hence the new value is age minus 18.

73
00:04:06,750 --> 00:04:08,853
So what I'm also doing down there.

74
00:04:09,880 --> 00:04:14,880
Now, the interesting thing about functions is that,

75
00:04:15,380 --> 00:04:18,760
actually, by defining such a function here,

76
00:04:18,760 --> 00:04:22,540
as we're doing it here between lines 12 and 14,

77
00:04:22,540 --> 00:04:26,820
does not execute the code in that function yet.

78
00:04:26,820 --> 00:04:30,670
When this entire JavaScript code file is being parsed

79
00:04:30,670 --> 00:04:32,950
and executed by the browser,

80
00:04:32,950 --> 00:04:36,230
once the browser reaches this line

81
00:04:36,230 --> 00:04:38,010
and this entire code block

82
00:04:38,010 --> 00:04:42,280
therefore it will just memorize this function,

83
00:04:42,280 --> 00:04:45,910
it will learn your own custom command so to say,

84
00:04:45,910 --> 00:04:48,293
but it will not execute it yet.

85
00:04:49,290 --> 00:04:53,510
Instead, you as a developer now have to tell the browser

86
00:04:53,510 --> 00:04:56,910
when this function should be executed.

87
00:04:56,910 --> 00:04:58,690
And we could do this here.

88
00:04:58,690 --> 00:05:01,160
Instead of performing that operation

89
00:05:01,160 --> 00:05:04,440
of which I wanted to get rid of as mentioned.

90
00:05:04,440 --> 00:05:09,440
And to execute a function, you repeat its name,

91
00:05:09,530 --> 00:05:12,520
so calculate adult years in my case,

92
00:05:12,520 --> 00:05:15,320
and then you add parentheses,

93
00:05:15,320 --> 00:05:17,453
opening and closing thereafter.

94
00:05:18,470 --> 00:05:22,290
And that's some syntax which might look familiar to you

95
00:05:22,290 --> 00:05:25,820
because that's what we're basically doing for the alert.

96
00:05:25,820 --> 00:05:27,920
For this built-in command,

97
00:05:27,920 --> 00:05:30,500
which turns out to be a built-in function

98
00:05:30,500 --> 00:05:35,500
provided to you automatically by JavaScript and the browser.

99
00:05:35,930 --> 00:05:37,700
Here, we also have a variable

100
00:05:37,700 --> 00:05:40,600
between those opening and closing parentheses,

101
00:05:40,600 --> 00:05:42,750
but I'll come back to why we have it here

102
00:05:42,750 --> 00:05:44,810
and not here later.

103
00:05:44,810 --> 00:05:48,290
For the moment here, for calculate adult years,

104
00:05:48,290 --> 00:05:49,513
we don't need it.

105
00:05:51,060 --> 00:05:54,080
And now, we can also calculate adult years here

106
00:05:54,080 --> 00:05:56,523
instead of that operation, which we had before.

107
00:05:57,710 --> 00:05:59,460
And now, the advantage of this

108
00:05:59,460 --> 00:06:04,460
is that we only have this operation once in our function,

109
00:06:04,520 --> 00:06:07,320
and here, I should also add a semicolon,

110
00:06:07,320 --> 00:06:11,490
and then we just called this function into different places

111
00:06:11,490 --> 00:06:15,210
where we wanna perform this operation.

112
00:06:15,210 --> 00:06:18,480
And hence if we ever, for whatever reason,

113
00:06:18,480 --> 00:06:23,100
need to change the logic in this operation here,

114
00:06:23,100 --> 00:06:26,110
we can do it in this function instead of searching

115
00:06:26,110 --> 00:06:28,850
for all the different places in our code

116
00:06:28,850 --> 00:06:31,710
where we used this operation.

117
00:06:31,710 --> 00:06:35,290
Here, of course, I wanna stick to the deduction though.

118
00:06:35,290 --> 00:06:38,560
And with all of that, if we save this and reload,

119
00:06:38,560 --> 00:06:43,560
we still see 14 and 27 as we did it before.

120
00:06:43,750 --> 00:06:48,750
But now, we're utilizing our own function, our own command,

121
00:06:48,880 --> 00:06:52,860
for writing the code once and then using it multiple times

122
00:06:52,860 --> 00:06:54,950
in different parts of our code.

123
00:06:54,950 --> 00:06:58,280
And that's the key benefit of functions.

124
00:06:58,280 --> 00:07:01,830
I also like to call them code on demand.

125
00:07:01,830 --> 00:07:05,600
We can define code, which is not executed immediately,

126
00:07:05,600 --> 00:07:09,770
but which we instead trigger in different parts of our code

127
00:07:09,770 --> 00:07:12,163
when we need that code to run.