1
00:00:01,610 --> 00:00:07,490
Welcome back to learn to code in JavaScript in this lecture, we're going to be talking about functions

2
00:00:09,370 --> 00:00:17,660
so as a function of function allows you to break down complex systems and decompose them into smaller

3
00:00:17,660 --> 00:00:18,140
parts.

4
00:00:20,060 --> 00:00:23,360
So functions are defined and they receive parameters.

5
00:00:24,470 --> 00:00:30,200
So you can send information to a function and functions can return a single value.

6
00:00:33,950 --> 00:00:40,490
So folks are called in order to invoke their functionality and then the parameters are sent into the

7
00:00:40,490 --> 00:00:41,010
function.

8
00:00:41,750 --> 00:00:45,980
So think of a function to calculate your salary.

9
00:00:45,990 --> 00:00:53,930
You send in how many hours you work and what your hourly wages, and then the function itself returns

10
00:00:54,320 --> 00:00:55,360
the actual result.

11
00:00:57,920 --> 00:01:05,060
Functions can call other functions, so if your function had to find out whether you were working overtime

12
00:01:05,060 --> 00:01:08,530
or not, maybe it calls another function to find that out.

13
00:01:11,660 --> 00:01:13,730
In a function itself can be stored in a variable.

14
00:01:13,980 --> 00:01:15,590
We'll find out more about that later.

15
00:01:16,850 --> 00:01:19,980
So here are some examples of defining a function and calling it.

16
00:01:21,380 --> 00:01:22,670
So here's a function.

17
00:01:22,670 --> 00:01:26,540
We use the word key word function to define it and give it a name.

18
00:01:26,570 --> 00:01:31,780
My function open parentheses and close parentheses in another.

19
00:01:31,790 --> 00:01:33,350
We're just saying consider log.

20
00:01:33,350 --> 00:01:33,920
Here I am.

21
00:01:34,610 --> 00:01:41,090
And then to invoke it, we just say the word my function with parentheses and a semicolon.

22
00:01:44,150 --> 00:01:52,910
Now this one has parameters and B coming into it and the function itself returns the addition of A and

23
00:01:52,910 --> 00:02:01,010
B and so you could say let total equals Adir 10 to 20 and then total can have the value of 30.

24
00:02:04,280 --> 00:02:11,000
You can have default values for parameters, so if something is not provided, you get the default.

25
00:02:11,720 --> 00:02:17,090
So in this case, we're going to have the ability to add three numbers together, A, B and C, but

26
00:02:17,090 --> 00:02:18,920
if she's not provided, we're just going to use her.

27
00:02:20,000 --> 00:02:25,370
So the total equals that are 10 come 20 is kind of like the same here is going to be 30.

28
00:02:27,480 --> 00:02:33,180
Another way you can define a function is using what's called an anonymous function.

29
00:02:33,750 --> 00:02:37,280
And in this case, the function itself gets assigned to a variable.

30
00:02:38,070 --> 00:02:45,420
So we say let F, which is a variable, equals the function A come a, B, return eight times B, and

31
00:02:45,420 --> 00:02:49,680
then you invoke the function using the variable F 10, comma five.

32
00:02:51,420 --> 00:02:51,810
All right.

33
00:02:51,810 --> 00:02:55,940
Let's use this arithmetic idea that we used in the the slides.

34
00:02:56,880 --> 00:03:01,890
So let's say we had this function atter and it takes parameters.

35
00:03:03,270 --> 00:03:09,720
A comma, B, not only give parameters along the name like a variable, but adding two things together.

36
00:03:09,870 --> 00:03:21,360
It makes sense to call them A and B, return A plus B, and then I'm going to prompt for the the values

37
00:03:21,360 --> 00:03:21,870
to add.

38
00:03:22,680 --> 00:03:28,380
And what I'm going to do is put them into a string and then split the string into numbers.

39
00:03:29,490 --> 00:03:30,450
So I can say

40
00:03:33,500 --> 00:03:37,350
of what I want to call these

41
00:03:40,200 --> 00:03:42,360
abs equals prompt

42
00:03:45,480 --> 00:03:53,790
enter numbers separated by commas.

43
00:03:58,740 --> 00:04:02,530
And then I'm going to say let

44
00:04:05,220 --> 00:04:07,710
AAPS equals,

45
00:04:12,030 --> 00:04:18,120
let's say array it out that split.

46
00:04:22,830 --> 00:04:28,440
On the comma, and then because these come in strings, we're going to want to change them in the numbers,

47
00:04:29,010 --> 00:04:39,510
but centering it right here will create another function and we'll call it function array, string to

48
00:04:39,600 --> 00:04:40,110
number.

49
00:04:41,460 --> 00:04:44,580
And we'll say it's called array.

50
00:04:45,180 --> 00:04:46,020
They are.

51
00:04:47,130 --> 00:04:52,920
And all we're going to do is look through this array and create another array that has numbers instead

52
00:04:52,920 --> 00:04:53,590
of strings.

53
00:04:56,310 --> 00:04:59,250
So we'll say we'll just do this.

54
00:04:59,250 --> 00:05:14,150
New array say no array equals an empty array and then we'll do the four of we'll say, that's OK.

55
00:05:14,350 --> 00:05:18,600
I said, what else of array?

56
00:05:20,880 --> 00:05:23,760
And then we'll say, no array.

57
00:05:24,000 --> 00:05:29,430
That push will say no, that percent.

58
00:05:31,590 --> 00:05:32,080
Yes.

59
00:05:33,600 --> 00:05:39,720
So take each one, pass it into an integer and put it into this number array and then we'll just return

60
00:05:39,720 --> 00:05:39,840
it.

61
00:05:43,980 --> 00:05:47,620
So that will convert our array into an array of numbers.

62
00:05:48,930 --> 00:05:49,650
So.

63
00:05:54,100 --> 00:06:01,750
We can combine this if we wanted to, we could say we're getting an array, so just call a raised string

64
00:06:02,050 --> 00:06:03,280
to number.

65
00:06:07,250 --> 00:06:14,840
So we're calling a function in that we're calling another function, but let's make it a little simpler

66
00:06:15,650 --> 00:06:16,940
just to make it more understandable.

67
00:06:16,950 --> 00:06:18,380
So that's just one way we can do it.

68
00:06:19,100 --> 00:06:25,490
Let's do what we're doing before we got our observer one call, ESOPs Ray Star.

69
00:06:30,400 --> 00:06:40,210
And then we will say, but aaps array equals array, string to number

70
00:06:43,150 --> 00:06:56,980
after a star search can do that conversion for us and then we will logout or atter to that log atter

71
00:06:58,960 --> 00:07:07,080
of array Sub-Zero Array, someone

72
00:07:11,020 --> 00:07:14,650
is going to log that result up.

73
00:07:15,070 --> 00:07:16,200
So let's see what happens.

74
00:07:19,100 --> 00:07:25,540
When are 10, comma, 20 and 30?

75
00:07:26,180 --> 00:07:34,010
Now we're going to debug and see how this works on the inside, so go to our sources.

76
00:07:34,980 --> 00:07:42,420
Let's maximize this and give us a little bit more room so we can see here we have our function.

77
00:07:42,440 --> 00:07:42,830
Hello.

78
00:07:42,830 --> 00:07:45,670
And I didn't mention this, but we've been using functions all along.

79
00:07:45,680 --> 00:07:47,080
We had this function called Hello.

80
00:07:47,750 --> 00:07:49,580
So at the break there, right at the beginning.

81
00:07:50,690 --> 00:07:51,620
So let's run it.

82
00:07:53,000 --> 00:08:02,180
We do the Castlebar clear, we get our ops and we'll say 12 at 13 this time.

83
00:08:03,500 --> 00:08:10,010
And if we examine this or if we look over here, we can see we have our ops and there are a string of

84
00:08:10,010 --> 00:08:11,270
12 of 13.

85
00:08:11,270 --> 00:08:12,620
So this is one string.

86
00:08:15,290 --> 00:08:21,080
And then when we do the split, we have our observer Greystar.

87
00:08:21,080 --> 00:08:26,510
And you can see it's an array of two strings, 12 and 13, but there's strings separated or they're

88
00:08:26,510 --> 00:08:27,740
surrounded by quotes.

89
00:08:29,240 --> 00:08:32,780
And then to step into this function, that was one of these things here.

90
00:08:32,780 --> 00:08:41,180
Step into next function, call this F 11 or control, plus some F 11, and those could jump down inside

91
00:08:41,180 --> 00:08:41,900
that function.

92
00:08:42,920 --> 00:08:48,110
So we declare a new array and.

93
00:08:50,200 --> 00:08:58,720
So the number we have, our HRR that got passed in this is the the I got passed in, which is this array

94
00:08:58,720 --> 00:08:59,790
of strings.

95
00:09:01,240 --> 00:09:02,740
So we do it at 10:00.

96
00:09:03,940 --> 00:09:10,850
So our S is 12, string 12, and we're going to push it into that number.

97
00:09:12,040 --> 00:09:12,920
So now No.

98
00:09:12,920 --> 00:09:15,750
Three has a string of 12.

99
00:09:18,340 --> 00:09:22,000
So then we'll get the next value.

100
00:09:25,260 --> 00:09:34,020
So now, as is the string of 13 and we push it into the number right now, the number has 12 and 13

101
00:09:34,890 --> 00:09:43,200
and we return the number and that once we get out of this function, our local takes on what it had

102
00:09:43,200 --> 00:09:43,860
originally.

103
00:09:45,080 --> 00:09:52,790
So now we have our observer that has 12 and 13, so then I'll step in again with that 11 and we'll go

104
00:09:52,790 --> 00:09:57,260
into our outer function and see A is 12, B is 13.

105
00:09:58,160 --> 00:10:06,770
And so then we just return that summation and that's what we get, our twenty five.

106
00:10:07,970 --> 00:10:15,910
OK, let's add some more functionality so we can add another method called subtract the

107
00:10:21,360 --> 00:10:22,190
Pavilion B.

108
00:10:39,090 --> 00:10:40,140
So let's see the result.

109
00:10:42,760 --> 00:10:43,990
Somewhere in that.

110
00:10:48,000 --> 00:10:51,000
And we'll say four or five.

111
00:10:55,920 --> 00:10:59,220
And we've got nine and negative one four months, five plus negative one.

112
00:11:02,880 --> 00:11:05,820
OK, let's take a look at what's called the rest Syntex.

113
00:11:10,580 --> 00:11:16,490
So with the rest, Syntex does is allows functions to accept an unlimited number of parameters, and

114
00:11:16,490 --> 00:11:20,660
you can think of this as the best parameter because it accepts the rest of what is offered.

115
00:11:21,450 --> 00:11:22,370
And I'll show you what I mean.

116
00:11:23,780 --> 00:11:29,930
So in this example, we have the the what looks like the spread operator, dot, dot, dot, args as

117
00:11:29,930 --> 00:11:30,970
the input to our function.

118
00:11:31,340 --> 00:11:33,230
But this is actually the rest operator.

119
00:11:33,730 --> 00:11:40,070
What it says is take all the arguments coming in and put them into an array called ARGs and then we'll

120
00:11:40,070 --> 00:11:41,810
use that as an array.

121
00:11:42,620 --> 00:11:47,540
So for let a of args console Loga is going to output everything in the array.

122
00:11:53,800 --> 00:11:55,410
So let's take a look at an example.

123
00:11:58,220 --> 00:12:04,840
So we'll start we'll change our outer function to use this rest operator, so we'll say that I thought

124
00:12:04,900 --> 00:12:14,270
it doesn't have to be called hard to be called anything ad operators, and then we don't have to be

125
00:12:14,270 --> 00:12:14,830
here anymore.

126
00:12:14,880 --> 00:12:16,720
We have this array called ad operator.

127
00:12:16,740 --> 00:12:19,730
So we're just going to go through the array and add everything up.

128
00:12:20,690 --> 00:12:26,060
So we'll say let turtle equals zero and then we'll use the four of them.

129
00:12:26,060 --> 00:12:33,110
We'll say for a group of ad operators,

130
00:12:36,890 --> 00:12:42,710
Total Plus equals up and now we'll return the total.

131
00:12:46,340 --> 00:12:47,570
All right, let's let this run.

132
00:12:50,160 --> 00:12:51,750
I need to go back and say, let up.

133
00:13:02,530 --> 00:13:03,910
Four of five.

134
00:13:05,400 --> 00:13:07,890
And we got our first result is nine, like we expect.

135
00:13:09,270 --> 00:13:15,270
Now, let's see what's going on on the inside of this, so we will go into the debug mode.

136
00:13:17,310 --> 00:13:25,090
One of our sources and we are going to be starting right here where we call at source, set a break

137
00:13:25,090 --> 00:13:30,880
on line eight or run or type in six to seven.

138
00:13:33,220 --> 00:13:37,330
So we have our values and the observations of six and seven.

139
00:13:38,080 --> 00:13:39,810
So I'll use that for someone to step in.

140
00:13:41,050 --> 00:13:47,530
And then once for him, we had this array called ad operators, and it has zero index six and there's

141
00:13:47,530 --> 00:13:47,770
one.

142
00:13:47,770 --> 00:13:48,580
Index seven.

143
00:13:51,130 --> 00:13:55,930
So I'm just going to go through this loop twice total becomes.

144
00:13:57,760 --> 00:13:59,530
You see down here, six.

145
00:14:01,550 --> 00:14:06,530
And then it becomes 13 and then we return the total to exactly what we would probably expect.

146
00:14:08,570 --> 00:14:14,840
Click continue on back to console and we see the 13 what's.

147
00:14:15,850 --> 00:14:22,300
Take out a full screen now, let's do something a little bit more with this, we want to be able to

148
00:14:22,300 --> 00:14:23,700
accept many operators so far.

149
00:14:23,710 --> 00:14:27,850
Right now, let's ignore the prompt and just type in some operators.

150
00:14:28,120 --> 00:14:33,510
So say four comma, six come eight, comma, ten, comma 12.

151
00:14:34,510 --> 00:14:37,720
So it has been five operators instead of just two.

152
00:14:39,290 --> 00:14:40,850
So say

153
00:14:43,880 --> 00:14:44,900
back this.

154
00:14:46,940 --> 00:14:48,500
And we lost a friend.

155
00:14:49,110 --> 00:14:49,430
Yeah.

156
00:14:56,320 --> 00:14:57,730
OK, back to Crome.

157
00:15:00,030 --> 00:15:00,830
Messed up.

158
00:15:02,870 --> 00:15:09,050
And it doesn't matter where we are now, because we're not using that, so we're going to go into outer

159
00:15:09,050 --> 00:15:10,610
with these five numbers.

160
00:15:11,500 --> 00:15:13,030
Yeah, maximizers.

161
00:15:14,950 --> 00:15:20,260
So for him to step in, we've got an array of the five numbers right here, you can see it.

162
00:15:21,730 --> 00:15:24,760
And then we're just going to go and watch the total off to the right.

163
00:15:25,910 --> 00:15:29,840
Right here, so I'm just going to step one line at a time.

164
00:15:30,780 --> 00:15:31,320
Ten.

165
00:15:32,990 --> 00:15:41,240
Eighteen, twenty, eight, forty, and we return 40, and that's what gets printed up.

166
00:15:44,970 --> 00:15:47,190
Console, and it is 40.

167
00:15:48,090 --> 00:15:49,500
All right, let's do a little bit more.

168
00:15:51,600 --> 00:16:00,390
What we'll do is we'll go back to using the the prompt in any more numbers, so let's take our Opsware

169
00:16:00,390 --> 00:16:01,440
and put it in here.

170
00:16:04,920 --> 00:16:09,360
But here's the problem is our ops rate is an array and we don't want an array.

171
00:16:09,360 --> 00:16:10,470
We want numbers.

172
00:16:11,310 --> 00:16:14,400
If we want an array, we would just accept an array here instead.

173
00:16:15,450 --> 00:16:23,850
And we would just say, all right, so in that case, we say, hey, we're accepting an array, but

174
00:16:23,880 --> 00:16:24,470
we don't want that.

175
00:16:24,480 --> 00:16:27,740
We want to accept an unlimited number of numbers.

176
00:16:28,350 --> 00:16:31,980
So to break this in two numbers, we will use the spread operator.

177
00:16:32,470 --> 00:16:35,000
And so we want to do is take this array and break it apart.

178
00:16:36,450 --> 00:16:40,440
Now, previously, when we're doing this, we put brackets around it again and make it back into an

179
00:16:40,440 --> 00:16:41,780
array to clone the array.

180
00:16:42,270 --> 00:16:43,560
But we don't want to clone the array.

181
00:16:43,570 --> 00:16:45,360
We just want the parts of the array.

182
00:16:46,790 --> 00:16:47,850
So that's what we're going to do.

183
00:16:49,400 --> 00:16:51,230
So let's save this

184
00:16:53,750 --> 00:17:02,450
and let's expand this, I've got a brake set right there, so let's go run our world and we'll type

185
00:17:02,450 --> 00:17:08,790
in 11, 13, 15, 17, 19, five odd numbers.

186
00:17:09,860 --> 00:17:13,270
So there we have our Ray Sangma step down with up 11.

187
00:17:14,510 --> 00:17:20,840
And here we see that our ad operators gets those array values 11, 13, 15, 17 and 19.

188
00:17:22,310 --> 00:17:27,650
And so then we're just going to step through this again, scroll it up so you can see the total.

189
00:17:30,450 --> 00:17:39,270
So then Toga's the value of 11, 24, 39 and so on, until we get all the bodies in the file total is

190
00:17:39,270 --> 00:17:40,140
75.

191
00:17:42,030 --> 00:17:43,890
So I'm going to continue and finish this.

192
00:17:45,490 --> 00:17:47,110
And we see the result is 75.

193
00:17:47,710 --> 00:17:54,220
Now, one more thing to point out is just because I said I want the rest operator here doesn't mean

194
00:17:54,220 --> 00:17:57,630
I can accept some other operators, some other arguments.

195
00:17:57,640 --> 00:17:58,150
That is.

196
00:17:58,600 --> 00:18:07,330
So I could still say a comma and then the rest operator saying, give me one in a and everything else

197
00:18:07,330 --> 00:18:10,540
put in the the rest operator put in the add operators.

198
00:18:11,910 --> 00:18:14,910
So in that case, we want to start total out to be a.

199
00:18:17,430 --> 00:18:22,470
So you do this when you know you need, at least in this case, one argument, one parameter.

200
00:18:23,340 --> 00:18:28,170
And then you can have more than that, and it might make more sense than the case where we had a come

201
00:18:28,170 --> 00:18:34,470
up kind of see where we said C equals zero before, where you want to say, I know I need A and B to

202
00:18:34,470 --> 00:18:37,770
add two things together, but what else do I need?

203
00:18:37,800 --> 00:18:38,790
So let's let's do that.

204
00:18:38,790 --> 00:18:46,860
Let's say a B comma, the rest operator so we know we're going to need A and B, so we start out by

205
00:18:46,860 --> 00:18:53,340
adding A and B together and this requires us to have A and B. So if we had or less than two things,

206
00:18:53,340 --> 00:18:56,700
we're going to not have value for B, which is going to be a problem.

207
00:18:57,330 --> 00:18:58,680
So let's give this a try.

208
00:19:04,280 --> 00:19:05,690
So it's once.

209
00:19:07,290 --> 00:19:18,660
And I'm going to just put in two values for Karma five and let's go into debug that way we can get a

210
00:19:18,810 --> 00:19:20,340
clear idea of what's happening.

211
00:19:21,570 --> 00:19:28,740
That our outer has the account of the first time to step in and we set a has for Bihar's five and eight

212
00:19:28,740 --> 00:19:30,250
operators is an empty array.

213
00:19:30,990 --> 00:19:35,820
So add total is A plus B and C every year it's nine.

214
00:19:36,660 --> 00:19:39,710
And then we're not going to do anything in the loop because there is nothing and we're just going to

215
00:19:39,720 --> 00:19:40,270
turn the nine.

216
00:19:40,560 --> 00:19:41,610
So no problem.

217
00:19:43,630 --> 00:19:49,960
So we get our nine in the result, let's try it again and let's only enter one thing and see what happens,

218
00:19:49,970 --> 00:19:50,770
I'll say for.

219
00:19:55,750 --> 00:19:59,650
To step in, we could see the AIA's form B is undefined.

220
00:20:02,270 --> 00:20:09,170
Now, Ed. doesn't mean undefined, so we just end up with not a number, so that is not going to be

221
00:20:09,170 --> 00:20:10,590
the result we want, obviously.

222
00:20:11,390 --> 00:20:15,490
So when we get out of this and we still don't have an array, so we're just gonna to the total.

223
00:20:15,620 --> 00:20:17,150
Going to blog it out.

224
00:20:18,320 --> 00:20:21,170
And we see that our result is in a not a no.

225
00:20:25,230 --> 00:20:28,680
And then we'll do it one more time with several operators.

226
00:20:30,630 --> 00:20:36,060
One, two, three, four, five will step in and see that he got one.

227
00:20:36,100 --> 00:20:36,930
We got two.

228
00:20:36,930 --> 00:20:39,660
And the ad operators got three values.

229
00:20:42,390 --> 00:20:43,350
Three, four or five.

230
00:20:44,940 --> 00:20:48,810
And so it's just going to go ahead and add those three numbers to one plus two.

231
00:20:50,540 --> 00:20:52,250
And so our total resolve is 15.

232
00:20:57,820 --> 00:21:05,170
All right, so that's an introduction to functions where we included creating a function and then calling

233
00:21:05,170 --> 00:21:09,100
functions, passing them parameters and getting return values back.