1
00:00:01,270 --> 00:00:01,960
Welcome back.

2
00:00:02,710 --> 00:00:07,810
Now, why you'll learn in the next few videos is quite advanced.

3
00:00:08,200 --> 00:00:15,250
It does take some time to really grasp the concepts and understand them, and the best way to do that

4
00:00:15,250 --> 00:00:17,100
is to do these yourselves.

5
00:00:17,590 --> 00:00:22,510
So use these videos as a reference to come back to when you have questions.

6
00:00:22,720 --> 00:00:27,730
I'm going to cover the main topics that you'll see out in the wild.

7
00:00:28,060 --> 00:00:31,540
You can come back and reference these videos whenever you have questions.

8
00:00:33,000 --> 00:00:36,740
And in this video, we're going to tackle advanced functions.

9
00:00:38,190 --> 00:00:44,370
Now, I have a simple function for you here, but knowing what we learned about the new JavaScript syntax,

10
00:00:44,610 --> 00:00:50,040
we're going to convert this first to how we should write JavaScript function.

11
00:00:50,040 --> 00:00:53,400
Word is gone now, we can just say.

12
00:00:54,790 --> 00:00:57,400
Consent first equals.

13
00:01:00,790 --> 00:01:01,570
Arrow function.

14
00:01:03,220 --> 00:01:09,250
And this error function has a great which can be a constant and a function.

15
00:01:10,500 --> 00:01:13,410
Which again, can be Konst second.

16
00:01:17,680 --> 00:01:19,900
And finally, this.

17
00:01:21,310 --> 00:01:23,290
Can be a cost as well.

18
00:01:23,620 --> 00:01:31,030
We also learned about scope, an important property of function is that the variables create inside

19
00:01:31,030 --> 00:01:31,420
of them.

20
00:01:32,540 --> 00:01:36,650
Including the parameters are local to the function.

21
00:01:37,190 --> 00:01:45,950
So that means that every time we run the first function, this block of code gets executed and the great

22
00:01:46,160 --> 00:01:49,160
variable gets created every time.

23
00:01:49,610 --> 00:01:56,990
Now this is actually good for us because we make sure that if our program, every time we run first,

24
00:01:57,170 --> 00:02:04,010
remember degreed well, it'll have conflicts because it's a constant and we constantly reassign the

25
00:02:04,010 --> 00:02:06,650
same thing to a variable that already exists.

26
00:02:07,340 --> 00:02:13,280
So this way, within a function, we make sure that every time we run it, it's a clean slate.

27
00:02:14,030 --> 00:02:19,940
You can name the variables however you like because there's nothing else that will collide with it.

28
00:02:20,480 --> 00:02:25,970
Like I said, this behavior helps prevent accidental interferences between functions.

29
00:02:26,390 --> 00:02:31,430
And as developers, we want to minimize the number of bugs or errors in our code.

30
00:02:31,910 --> 00:02:38,240
If all variables were shared by the whole program, it'd take a lot of effort to make sure no name is

31
00:02:38,240 --> 00:02:41,150
ever used for two different purposes.

32
00:02:41,360 --> 00:02:46,460
Imagine if Grete was in another function, and we had no idea.

33
00:02:46,670 --> 00:02:47,700
And we can't use it.

34
00:02:47,720 --> 00:02:55,880
Well, luckily, by having our own separate scope, we're able to make sure that we can use Grete without

35
00:02:55,880 --> 00:02:57,680
having to check the entire code base.

36
00:02:59,100 --> 00:03:05,310
Now, by treating function, local variables as existing, all within the function, the language makes

37
00:03:05,310 --> 00:03:13,770
it possible to read and understand functions as small universes, where whatever happens in that universe

38
00:03:13,770 --> 00:03:15,570
only matters to itself.

39
00:03:17,220 --> 00:03:24,210
But I also wanted to demonstrate an interesting concept with JavaScript, and that is closures.

40
00:03:25,260 --> 00:03:29,850
You can think of it as this a function runs the function executed.

41
00:03:30,750 --> 00:03:32,670
Now it's never going to execute again.

42
00:03:33,000 --> 00:03:34,920
Kind of like the first function.

43
00:03:34,920 --> 00:03:36,630
We just executed it here.

44
00:03:37,020 --> 00:03:39,330
And the result we put into new function.

45
00:03:40,780 --> 00:03:47,020
It's going to remember that there are references to those variables alive in a memory first.

46
00:03:47,830 --> 00:03:50,110
However, we see a problem here.

47
00:03:51,040 --> 00:03:58,060
You see that when we load up this program on our website, the JavaScript engine will see this.

48
00:03:58,480 --> 00:04:01,030
I'll say, OK, we have a variable first.

49
00:04:01,150 --> 00:04:02,140
That's a function.

50
00:04:02,440 --> 00:04:02,800
Great.

51
00:04:03,550 --> 00:04:10,900
And then in the next line, we see, Oh, we want to assign variable new function and we want to get

52
00:04:10,900 --> 00:04:12,160
the result of first.

53
00:04:12,400 --> 00:04:17,829
So the program runs first sees that we want to create a constant great high.

54
00:04:18,430 --> 00:04:25,360
And then we also see that we have another function called second, and we're returning that function.

55
00:04:25,900 --> 00:04:27,340
But there's a problem here, right?

56
00:04:28,400 --> 00:04:31,280
Second, needs to remember what grit is.

57
00:04:31,700 --> 00:04:36,710
Although first runs and returns second.

58
00:04:37,940 --> 00:04:44,090
So you can think of this as once we do this, we will only have the second function.

59
00:04:47,350 --> 00:04:50,890
Now, and I know this is this looks confusing, but just look at the highlighted here.

60
00:04:51,550 --> 00:04:54,040
That's what calling first meets.

61
00:04:54,730 --> 00:04:58,890
But you see over here that the greet variable second doesn't.

62
00:04:58,930 --> 00:05:01,930
Well, it's not within the scope of second rate.

63
00:05:02,620 --> 00:05:12,490
What closures does and this is a rule in JavaScript is that the child scope always has access to the

64
00:05:12,490 --> 00:05:13,450
parent's scope.

65
00:05:13,840 --> 00:05:15,550
So it's almost as if it remembers.

66
00:05:16,150 --> 00:05:20,470
They always remember that there's a reference to those variables alive.

67
00:05:20,650 --> 00:05:28,180
So inside the web browser, the web browser says, Ah, this second function needs greet, so I'm going

68
00:05:28,180 --> 00:05:28,810
to remember it.

69
00:05:29,320 --> 00:05:30,400
Let me demonstrate that for you.

70
00:05:30,880 --> 00:05:32,110
So if I do, first here?

71
00:05:34,120 --> 00:05:36,910
And I'm going to copy this into the console.

72
00:05:38,520 --> 00:05:41,130
And now we have new function.

73
00:05:41,700 --> 00:05:43,710
If I run new function.

74
00:05:46,070 --> 00:05:47,420
I get high.

75
00:05:48,080 --> 00:05:50,690
Even though first is never going to be a run again.

76
00:05:51,950 --> 00:05:57,500
The only thing that we have left is the second function the Web browser remembers Greet.

77
00:05:58,730 --> 00:06:02,870
Again, this is a confusing concept when you hear for the first time.

78
00:06:03,230 --> 00:06:06,770
But like I said, just remember closures.

79
00:06:07,760 --> 00:06:12,980
Is just saying a function ran the function.

80
00:06:15,070 --> 00:06:15,820
Executed.

81
00:06:18,620 --> 00:06:20,330
It's never going to execute again.

82
00:06:25,470 --> 00:06:37,020
But it's going to remember that there are references to those variables, so the child scope.

83
00:06:38,780 --> 00:06:40,750
Always has access.

84
00:06:42,260 --> 00:06:52,100
To the parents go now, you may be wondering if I did hear Konst name because Bobby.

85
00:06:53,900 --> 00:06:58,400
Will the first function have access to who, Bobby?

86
00:06:59,520 --> 00:07:00,360
No, it wouldn't.

87
00:07:00,660 --> 00:07:01,650
So think of it this way.

88
00:07:01,920 --> 00:07:06,870
Children always have access to their parents scope, but parents go.

89
00:07:07,840 --> 00:07:09,820
They don't have access to their children.

90
00:07:11,500 --> 00:07:11,890
All right.

91
00:07:12,100 --> 00:07:14,380
Let's get into a few more things.

92
00:07:15,610 --> 00:07:17,440
Next, we're going to talk about currying.

93
00:07:19,040 --> 00:07:26,450
And caring is the process of converting a function that takes multiple arguments into a function that

94
00:07:26,450 --> 00:07:28,640
takes them one at a time.

95
00:07:29,180 --> 00:07:29,870
Let's see what I mean.

96
00:07:30,530 --> 00:07:32,510
We have a function here.

97
00:07:32,510 --> 00:07:37,670
We'll call it multiply and multiply accepts.

98
00:07:39,020 --> 00:07:40,550
Two parameters.

99
00:07:42,850 --> 00:07:47,980
And again, we're using our new functions index will say A Multiplies B.

100
00:07:50,680 --> 00:07:56,560
Now, currying means we're changing this function to only accept one parameter at a time.

101
00:07:57,370 --> 00:07:58,900
So that means we do.

102
00:08:00,610 --> 00:08:03,070
Curried multiply.

103
00:08:04,340 --> 00:08:04,910
Equals.

104
00:08:05,960 --> 00:08:07,670
A B.

105
00:08:11,150 --> 00:08:12,860
A times B.

106
00:08:14,460 --> 00:08:15,330
Whoa, whoa, whoa, whoa.

107
00:08:15,720 --> 00:08:16,950
What did we just do?

108
00:08:18,780 --> 00:08:23,910
And again, this looks very confusing, but think of these arrows as functions.

109
00:08:24,480 --> 00:08:27,480
So right now, if I do carried.

110
00:08:29,110 --> 00:08:29,820
Multiply.

111
00:08:30,550 --> 00:08:33,130
And I'll just say three.

112
00:08:33,580 --> 00:08:35,440
But let's see this in action, what happens?

113
00:08:38,429 --> 00:08:41,179
I get a function that accepts be multiplied by.

114
00:08:41,400 --> 00:08:46,200
So by running, this is saying that a is three.

115
00:08:48,810 --> 00:08:53,100
And now we'll know that when we multiply a history.

116
00:08:53,340 --> 00:09:02,280
But because this has a function and another function, so a function inside of a function, this just

117
00:09:02,280 --> 00:09:06,300
returns this part, so it returns a function.

118
00:09:07,340 --> 00:09:08,240
As you can see here.

119
00:09:09,430 --> 00:09:12,670
So now, in order to make this work, let me put this back.

120
00:09:14,190 --> 00:09:18,150
In order to make it work, we have to say curried.

121
00:09:19,850 --> 00:09:20,570
Multiply.

122
00:09:21,840 --> 00:09:25,740
We'll say three and then another bracket for.

123
00:09:27,560 --> 00:09:28,490
And I get 12.

124
00:09:30,850 --> 00:09:35,380
If we look at this function compared to here, we see exactly what we did.

125
00:09:35,860 --> 00:09:46,150
We created a variable COVID multiplier that accepts a parameter, so it's a function that accepts a.

126
00:09:46,210 --> 00:09:47,680
In this case, it's three.

127
00:09:48,990 --> 00:09:58,680
And once you call that function, once you've run it, it returns another function that accepts B and

128
00:09:58,680 --> 00:10:00,720
that function multiplies A and B.

129
00:10:01,470 --> 00:10:04,620
So what I'm doing here is saying create a multiplier.

130
00:10:04,650 --> 00:10:05,610
A is three.

131
00:10:06,770 --> 00:10:10,520
B is for and now multiply a times B.

132
00:10:12,250 --> 00:10:18,190
And as you can see, as I said about currying, it's the process of converting a function that takes

133
00:10:18,310 --> 00:10:24,700
multiple arguments, like I said, into a function that takes them one at a time.

134
00:10:25,780 --> 00:10:28,420
Now, why do we even need to do this?

135
00:10:29,380 --> 00:10:37,210
Because now it's more extensive, all I can do something like cost multiply by five equals.

136
00:10:39,070 --> 00:10:40,180
And now I have this.

137
00:10:40,720 --> 00:10:47,950
So any time I want to multiply by five, I could just say, let me copy this.

138
00:10:49,120 --> 00:10:51,640
Now, any time I want to multiply a number by five.

139
00:10:53,170 --> 00:10:53,860
Five.

140
00:10:57,580 --> 00:10:58,180
Ten.

141
00:11:00,770 --> 00:11:05,630
And now I have this function that was created that always multiply things by five.

142
00:11:06,860 --> 00:11:07,670
Which is very cool.

143
00:11:08,360 --> 00:11:08,630
All right.

144
00:11:08,890 --> 00:11:14,030
We're going to get into one more thing and then I promise I'll make your head stop hurting.

145
00:11:15,140 --> 00:11:16,520
It's called compose.

146
00:11:17,890 --> 00:11:25,930
And compose is the act of putting two functions together to form a third function, where the output

147
00:11:25,930 --> 00:11:28,420
of one function is the input of the other.

148
00:11:29,380 --> 00:11:32,440
Even me saying that, I'm like, What did I just say?

149
00:11:32,680 --> 00:11:35,860
So let's write this down a compose.

150
00:11:37,770 --> 00:11:38,420
Looks like this.

151
00:11:40,010 --> 00:11:45,620
Let's say F and G parameters, FMG return a function.

152
00:11:47,310 --> 00:11:53,400
That takes parameter A. That returns a function that has.

153
00:11:54,550 --> 00:11:55,030
This.

154
00:11:56,510 --> 00:11:57,260
Holy Moly.

155
00:11:57,560 --> 00:12:02,750
And if you look at this and you have no idea what's going on, this is something that takes years for

156
00:12:02,750 --> 00:12:03,380
some to get.

157
00:12:03,680 --> 00:12:05,390
It is really, really advanced stuff.

158
00:12:05,630 --> 00:12:06,050
But.

159
00:12:06,990 --> 00:12:11,580
If you're able to understand the inner workings of this, you can pretty much do anything.

160
00:12:12,090 --> 00:12:14,070
Let's let's give it a go.

161
00:12:16,110 --> 00:12:17,160
What is happening here?

162
00:12:17,790 --> 00:12:18,180
Well.

163
00:12:19,680 --> 00:12:26,400
It looks like looking at F and G, it looks like F is a function because while we have the brackets,

164
00:12:26,400 --> 00:12:30,630
it even highlighted in blue for you and G is also a function.

165
00:12:32,440 --> 00:12:40,480
If I had a sum function that that, let's say, takes a number.

166
00:12:43,140 --> 00:12:43,830
And just.

167
00:12:46,200 --> 00:12:46,830
Adds one.

168
00:12:48,960 --> 00:12:54,130
What we can do with compose is, I can say compose again.

169
00:12:54,150 --> 00:12:57,640
We have the function here, some some.

170
00:12:57,780 --> 00:13:00,630
So both FMG are some.

171
00:13:02,700 --> 00:13:05,820
And now, because it takes another bracket, I can say.

172
00:13:10,130 --> 00:13:10,420
All right.

173
00:13:10,460 --> 00:13:14,780
So let's run this and then we can go step by step to show you what it does.

174
00:13:16,740 --> 00:13:17,820
I get seven.

175
00:13:18,450 --> 00:13:19,320
So why is that?

176
00:13:19,740 --> 00:13:21,050
Well, let's take it one by one.

177
00:13:22,620 --> 00:13:27,600
If both F and G are some and A is five.

178
00:13:28,640 --> 00:13:35,420
We look at what the function returns, and because again, we have two brackets, we're executing the

179
00:13:35,420 --> 00:13:42,470
first part of the function, which returns us another function, which is this and within it, we give

180
00:13:42,470 --> 00:13:43,280
the a five.

181
00:13:43,730 --> 00:13:48,230
So when this function runs, it says A is five.

182
00:13:48,560 --> 00:13:51,920
OK, and then let's run the inner function G.

183
00:13:52,220 --> 00:13:53,570
In this case, it's some.

184
00:13:54,230 --> 00:14:00,590
So if you remember, some is just saying, give me five and then five plus one.

185
00:14:01,100 --> 00:14:04,490
So now this changes to six.

186
00:14:05,210 --> 00:14:09,800
And then finally, the F function runs, which is again, some.

187
00:14:10,580 --> 00:14:13,850
And this, says some, is giving me six.

188
00:14:14,150 --> 00:14:15,350
So six plus one.

189
00:14:16,730 --> 00:14:17,300
Is seven.

190
00:14:18,180 --> 00:14:21,450
And this whole thing returns seven.

191
00:14:25,510 --> 00:14:26,470
Well, all right.

192
00:14:26,620 --> 00:14:30,040
There was a whole ton of stuff.

193
00:14:30,730 --> 00:14:40,060
But I want you to remember these three key words, because when you get to advanced JavaScript functions

194
00:14:40,060 --> 00:14:42,310
are really, really important.

195
00:14:42,340 --> 00:14:51,040
You'll hear words like closures and currying and compose a lot and you'll find tools and libraries that

196
00:14:51,040 --> 00:14:52,450
use these heavily.

197
00:14:53,170 --> 00:14:56,350
Now you don't need to know the definition of them.

198
00:14:56,360 --> 00:15:00,610
You just need to be able to read a piece of code and understand what's going on.

199
00:15:00,820 --> 00:15:09,400
And this is why I like showing you this, although it's really advanced and very hard to to grasp by

200
00:15:09,400 --> 00:15:13,540
understanding the step by step process of how a function works.

201
00:15:14,230 --> 00:15:20,380
This is really useful because now when you encounter this in the wild, you'll understand how everything

202
00:15:20,680 --> 00:15:21,190
works.

203
00:15:22,230 --> 00:15:28,350
Now, to finish off this function section, I want to tell you the most important thing that you can

204
00:15:28,350 --> 00:15:30,600
do as a web developer when creating code.

205
00:15:32,000 --> 00:15:37,160
And that is the idea of avoiding side effects.

206
00:15:39,350 --> 00:15:41,240
And functional purity.

207
00:15:42,750 --> 00:15:43,470
What does that mean?

208
00:15:43,590 --> 00:15:47,070
Well, let's go back to my diagram here.

209
00:15:47,370 --> 00:15:54,540
You might remember this from the first part where we said a input is what we give a function input of

210
00:15:54,540 --> 00:15:54,990
some sort.

211
00:15:55,230 --> 00:15:59,280
It could be an empty input or it could have parameters like five or 10.

212
00:15:59,640 --> 00:16:03,040
A function does something that we define.

213
00:16:03,450 --> 00:16:04,560
It has its own scope.

214
00:16:04,650 --> 00:16:06,420
Remember, it's its own universe.

215
00:16:06,960 --> 00:16:08,340
It could have console.log.

216
00:16:08,340 --> 00:16:09,450
It could do a bunch of stuff.

217
00:16:09,780 --> 00:16:14,490
And then it asks, Am I returning anything you can?

218
00:16:15,360 --> 00:16:16,920
This should be undefined.

219
00:16:18,460 --> 00:16:23,380
So you can return a value or if it doesn't return anything, it just does.

220
00:16:23,560 --> 00:16:24,100
Undefined.

221
00:16:25,600 --> 00:16:30,010
Now, the two words that I just said side effects and functional purity.

222
00:16:31,230 --> 00:16:38,990
Well, side effects are any of these things, any of actions that happen?

223
00:16:40,310 --> 00:16:47,690
Inside of the function that we don't really know anything about, if it interacts or reads or writes

224
00:16:48,050 --> 00:16:52,610
to an external variable, for example, or console logs.

225
00:16:53,300 --> 00:16:55,130
Well, that's a side effect.

226
00:16:56,000 --> 00:17:01,240
If we change here, a variable one equals one.

227
00:17:04,170 --> 00:17:06,930
And then I have a function.

228
00:17:10,440 --> 00:17:12,930
That changes a.

229
00:17:14,369 --> 00:17:21,119
Well, that's a side effect, that's something that the fonctions doing to affect the outside world.

230
00:17:21,540 --> 00:17:28,020
Remember, we want to think of functions as its own universe and if it starts affecting the outside

231
00:17:28,020 --> 00:17:28,380
world.

232
00:17:28,710 --> 00:17:30,330
I mean, it's not the end of the world.

233
00:17:30,330 --> 00:17:32,550
We've done console.log before we've done.

234
00:17:33,820 --> 00:17:34,930
We've done this before.

235
00:17:36,000 --> 00:17:40,410
But it is good practice to avoid these side effects.

236
00:17:41,630 --> 00:17:48,500
And by avoiding these side effects, we have something called functional purity and functional purity.

237
00:17:49,610 --> 00:17:55,790
Is a concept where we say in order for us to write really, really good programs, we want to avoid.

238
00:17:56,960 --> 00:17:57,830
Side effects.

239
00:17:59,560 --> 00:18:01,060
And we always wonder.

240
00:18:02,090 --> 00:18:02,630
Return.

241
00:18:04,070 --> 00:18:06,770
So that this and this are gone.

242
00:18:07,890 --> 00:18:11,250
And we always return something.

243
00:18:12,840 --> 00:18:14,160
And what's the power in this?

244
00:18:15,740 --> 00:18:17,240
By avoiding side effects.

245
00:18:18,490 --> 00:18:29,380
And always returning, we create something that we call deterministic and deterministic is a word that

246
00:18:29,380 --> 00:18:30,190
you may have heard.

247
00:18:30,580 --> 00:18:39,430
It means that no matter what, if my inputs, let's say five and 10, go through this function, this

248
00:18:39,430 --> 00:18:44,200
little universe, the return value will be always the same.

249
00:18:45,540 --> 00:18:53,040
Let me say that again, the input, whatever we put in the parameters, whether it's empty or it has

250
00:18:53,040 --> 00:18:54,000
certain parameters.

251
00:18:54,210 --> 00:18:55,380
It always returns.

252
00:18:55,380 --> 00:18:58,770
If we run this a thousand times, it always returns the same value.

253
00:19:00,280 --> 00:19:01,570
That's determinism.

254
00:19:01,990 --> 00:19:08,620
It's a very important concept, and that's a key principle in avoiding bugs, because if this function

255
00:19:09,070 --> 00:19:15,310
always does the same thing well, then you know exactly what it does and you won't have random errors

256
00:19:15,310 --> 00:19:16,630
popping out here and there.

257
00:19:17,850 --> 00:19:19,350
That's what I want to leave you with.

258
00:19:21,640 --> 00:19:29,380
Although this is not the law and you'll find code bases that will have a lot of side effects, there's

259
00:19:29,380 --> 00:19:34,840
going to be a lot of things happening inside functions that maybe even effect variables that live outside

260
00:19:34,840 --> 00:19:35,470
of a function.

261
00:19:35,860 --> 00:19:42,880
It is a really, really good practice to be a top performing developer to have this in mind of creating

262
00:19:42,880 --> 00:19:46,500
functions that minimize side effects.

263
00:19:47,690 --> 00:19:54,530
And have functional purity, what we call determinism, where anything you put into the function, it

264
00:19:54,530 --> 00:19:56,420
always returns the same thing.

265
00:19:58,290 --> 00:19:58,650
All right.

266
00:19:58,770 --> 00:19:59,670
That's it for now.

267
00:19:59,970 --> 00:20:01,410
Go try out some exercises.

268
00:20:01,800 --> 00:20:02,700
I'll see you in the next one.

269
00:20:03,270 --> 00:20:03,630
Bye bye.