1
00:00:00,180 --> 00:00:05,910
In this video we're gonna take some time to explore callback functions in detail in this section.

2
00:00:05,910 --> 00:00:11,810
Already I've probably said the word callback or callback function upwards of 20 times.

3
00:00:11,880 --> 00:00:17,580
And now it's time for a dedicated video where we really dive deep into the callback pattern to see how

4
00:00:17,580 --> 00:00:21,630
it works and how we can take advantage of it by creating our own.

5
00:00:21,630 --> 00:00:23,300
Now why is this so important.

6
00:00:23,340 --> 00:00:27,320
Because it's at the core of asynchronous no J.S. development.

7
00:00:27,420 --> 00:00:32,150
It is something that's going to come up over and over again throughout the class.

8
00:00:32,250 --> 00:00:36,500
And it's something that's worth investing in early on in our education.

9
00:00:36,570 --> 00:00:39,930
So we're more comfortable with it as we continue to use it.

10
00:00:40,320 --> 00:00:45,720
Let's go ahead and kick things off by moving into the playground directory for just this video.

11
00:00:45,720 --> 00:00:48,560
I'm going to create a brand new file inside of here.

12
00:00:48,570 --> 00:00:55,710
I already have one through three so I'll call this four hyphen callbacks dot J S and in here we're going

13
00:00:55,710 --> 00:00:58,260
to explore callbacks in isolation.

14
00:00:58,260 --> 00:01:02,280
Let's go ahead and start with an example we're already very comfortable with.

15
00:01:02,310 --> 00:01:07,320
I'm going to call set time out like we've done plenty of times before passing in these two arguments

16
00:01:07,380 --> 00:01:08,530
it requires.

17
00:01:08,540 --> 00:01:15,120
The first is a function and the second is the amount of time to wait in milliseconds before that function

18
00:01:15,120 --> 00:01:15,960
gets called.

19
00:01:16,050 --> 00:01:20,560
And we're just going to wait two seconds and we'll print a message console dot log.

20
00:01:20,640 --> 00:01:23,550
Two seconds are up.

21
00:01:23,580 --> 00:01:24,270
Excellent.

22
00:01:24,330 --> 00:01:30,510
In this three line example there is a single callback function and that is the function we define and

23
00:01:30,510 --> 00:01:33,720
pass in as an argument to set time out.

24
00:01:33,720 --> 00:01:40,380
So this is a callback function a callback function is nothing more than a function we provide as an

25
00:01:40,410 --> 00:01:45,300
argument to another function with the intention of having it called later on.

26
00:01:45,300 --> 00:01:50,940
So in this case we are providing a function as an argument to set time out with the intention that set

27
00:01:50,940 --> 00:01:55,190
time out is going to call this function at some point in the future.

28
00:01:55,230 --> 00:01:57,950
That is all a callback function.

29
00:01:58,020 --> 00:02:04,770
It's now in this case we are using the callback pattern in an asynchronous way as we saw set time out

30
00:02:04,800 --> 00:02:09,350
is a node provided API and it is indeed a synchronous.

31
00:02:09,420 --> 00:02:14,850
Now that does not mean every time we use the callback pattern it's actually a synchronous.

32
00:02:14,850 --> 00:02:17,850
This is a point of confusion for a lot of people.

33
00:02:17,910 --> 00:02:19,990
We've actually already proven this.

34
00:02:20,040 --> 00:02:25,350
We know that set time out uses the callback pattern and it's asynchronous and we know that our array

35
00:02:25,350 --> 00:02:30,780
methods like for each and filter use the callback pattern but they are indeed synchronous.

36
00:02:30,780 --> 00:02:34,500
So right here let's create a concept called short names.

37
00:02:34,590 --> 00:02:39,270
Actually let's just call this one names will create short names in a second.

38
00:02:39,270 --> 00:02:44,040
And I'm going to toss my name in there along with Jen and Jess.

39
00:02:44,220 --> 00:02:48,270
And the goal is to use callbacks with filter something we've done before.

40
00:02:48,270 --> 00:02:56,340
So const right here short names equals I'll access names dot filter to use the filter function and once

41
00:02:56,340 --> 00:02:59,670
again we're going to provide a callback function.

42
00:02:59,670 --> 00:03:04,940
I'm passing a function to another function with the intention of having it get called later.

43
00:03:04,950 --> 00:03:10,770
So right here this callback function as we know will actually get called one time for each item in the

44
00:03:10,770 --> 00:03:12,720
array with the individual item.

45
00:03:12,720 --> 00:03:17,820
In this case we could call it something like name and all I'm going to do is return true if the name

46
00:03:17,820 --> 00:03:20,290
has a length less than or equal to four.

47
00:03:20,310 --> 00:03:22,040
Those are the short names we'll keep.

48
00:03:22,440 --> 00:03:27,090
So return name dot length less than or equal to four.

49
00:03:27,330 --> 00:03:32,880
In this case we are indeed using the callback pattern as well but there's nothing asynchronous about

50
00:03:32,880 --> 00:03:41,170
filter it's not interacting with a native node API it is just standard javascript code completely synchronous.

51
00:03:41,280 --> 00:03:46,860
So far the only time we've used the callback pattern is when we're working with a function that we never

52
00:03:46,860 --> 00:03:47,670
defined.

53
00:03:47,670 --> 00:03:50,040
So we pass a callback to set time out.

54
00:03:50,100 --> 00:03:56,380
That is a node j s API and we passed a callback to filter also not defined by us.

55
00:03:56,400 --> 00:03:58,250
That comes from javascript.

56
00:03:58,260 --> 00:04:03,900
Now this is not to say it's never useful to define your own function that takes a callback because it

57
00:04:03,900 --> 00:04:08,910
actually is and it's something that we're going to use in the very next video.

58
00:04:08,920 --> 00:04:10,860
So let's take a quick look at app dot J.

59
00:04:10,910 --> 00:04:17,550
Let's imagine in my program there are four different places where I want to be able to take a location

60
00:04:17,850 --> 00:04:19,770
and get the coordinates back.

61
00:04:19,770 --> 00:04:21,970
So I want to be able to geo code.

62
00:04:22,080 --> 00:04:23,550
Now what is that going to look like.

63
00:04:23,550 --> 00:04:27,550
Well if I have four or five different locations I need to do this.

64
00:04:27,660 --> 00:04:31,590
I have to take this code and I have to put it in four or five different places.

65
00:04:31,590 --> 00:04:33,630
And obviously that's not ideal.

66
00:04:33,630 --> 00:04:39,060
So what we would do is we would create a function called GEO code or something like it and all of this

67
00:04:39,060 --> 00:04:41,050
code would go inside of there.

68
00:04:41,070 --> 00:04:46,020
Now in order to get that done we're gonna have to be pretty familiar with the callback pattern.

69
00:04:46,080 --> 00:04:51,690
So let's go ahead and see what this would look like over inside of the callbacks playground file.

70
00:04:51,780 --> 00:04:53,000
Let's create a constant.

71
00:04:53,130 --> 00:04:55,960
And I'm going to call this constant geo code.

72
00:04:55,980 --> 00:05:01,590
Now this is indeed going to be a function we define and we're going to set this function up to take

73
00:05:01,590 --> 00:05:08,460
in a callback function much like set time out takes in a callback and much like filter takes in a callback.

74
00:05:08,460 --> 00:05:14,190
Now you can take in as many arguments as you need along with the callback for example set time out takes

75
00:05:14,190 --> 00:05:19,010
in the function as well as the amount of time to wait for geo code.

76
00:05:19,050 --> 00:05:21,460
We could say that you need to provide the address.

77
00:05:21,480 --> 00:05:27,810
Otherwise we don't know what address to geo code and we can say that you also need to provide a callback

78
00:05:28,020 --> 00:05:31,830
which is the function that will end up calling once we have the data.

79
00:05:31,890 --> 00:05:35,820
Now for the moment we're not actually going to do any geo coding inside of here.

80
00:05:35,820 --> 00:05:38,640
We're just going to make up the results to keep things simple.

81
00:05:38,910 --> 00:05:45,030
So for the moment let's create a concept called data and we'll just set up latitude and longitude properties

82
00:05:45,150 --> 00:05:47,300
setting up random values for each.

83
00:05:47,340 --> 00:05:52,970
So on data I'm gonna set up latitude as a property and I'll just set the value to zero.

84
00:05:53,010 --> 00:05:58,010
Then we're also going to have our longitude and I'll set that to zero as well.

85
00:05:58,010 --> 00:06:03,330
So let's say that at some point in the future yes we get this data back by calling request.

86
00:06:03,380 --> 00:06:04,730
Now what do we do with it.

87
00:06:04,730 --> 00:06:08,180
The goal is to give it back to the caller of geo code.

88
00:06:08,180 --> 00:06:15,390
So if I call geo code and pass in an address like Philadelphia I want to get access to those coordinates.

89
00:06:15,410 --> 00:06:18,040
Now we know there are two ways I could get this done.

90
00:06:18,050 --> 00:06:21,410
One it could be the return value from the geo code.

91
00:06:21,410 --> 00:06:25,310
Function like we've seen with pretty much every function so far.

92
00:06:25,310 --> 00:06:28,690
Or we could provide a callback and get the data there.

93
00:06:28,700 --> 00:06:32,030
Now if this was our actual function the choice would be easy.

94
00:06:32,240 --> 00:06:37,700
I would ignore and remove that callback argument and I would just return the data then down below I

95
00:06:37,700 --> 00:06:44,660
could access that data const data equals whatever comes back from Geo code and I could use it down below

96
00:06:44,990 --> 00:06:47,240
console log data.

97
00:06:47,240 --> 00:06:48,290
Perfect.

98
00:06:48,290 --> 00:06:53,570
Let's go ahead and save the file in its current state and move over to the playground folder to run

99
00:06:53,570 --> 00:06:54,260
things.

100
00:06:54,260 --> 00:07:00,650
So that's gonna be C D dot dot forward slash playground to get over there once we're there I will clear

101
00:07:00,650 --> 00:07:07,370
the terminal output and from here I'm gonna run the file so node 4 hyphen callbacks dot J.

102
00:07:07,390 --> 00:07:08,210
S.

103
00:07:08,220 --> 00:07:13,730
Now when I run it I'm going to expect to see my data showing up and it is and then two seconds later

104
00:07:13,760 --> 00:07:16,850
I get my little message from the example up above.

105
00:07:16,910 --> 00:07:21,180
The problem here is that there's nothing asynchronous happening inside of here.

106
00:07:21,260 --> 00:07:26,690
Later on we're actually going to use request inside of here and we know that's a synchronous for the

107
00:07:26,690 --> 00:07:29,360
moment as we explore the callback pattern.

108
00:07:29,390 --> 00:07:32,550
Let's just use set time out to simulate this delay.

109
00:07:32,660 --> 00:07:36,270
So I'm gonna take all of the code inside of the GEO code function.

110
00:07:36,440 --> 00:07:42,170
I'm going to use command X or control X to cut it out copying it to the clipboard because we'll paste

111
00:07:42,170 --> 00:07:44,510
it in in just a second from here.

112
00:07:44,600 --> 00:07:50,270
I'm gonna use set time out to simulate a delay and let's go ahead and provide the function to run when

113
00:07:50,270 --> 00:07:55,490
we're done and we'll provide the time to wait to keep things easy to see in the terminal.

114
00:07:55,490 --> 00:07:57,760
I'm gonna pick a longer than average time.

115
00:07:57,800 --> 00:08:03,350
I'm going to stick with two seconds though in reality this process would take just a fraction of a second.

116
00:08:03,410 --> 00:08:11,120
Then I'm going to paste the old code exactly like we had it inside of these set timeout callback.

117
00:08:11,150 --> 00:08:15,260
Now let's go ahead and run the program again to see what happens in the terminal.

118
00:08:15,260 --> 00:08:18,370
I'm gonna use up and enter and we can see that right away.

119
00:08:18,380 --> 00:08:22,170
Much shorter than two seconds we saw undefined printing.

120
00:08:22,310 --> 00:08:27,460
So the problem here is that Geo code this function it's not returning anything.

121
00:08:27,500 --> 00:08:29,240
Look at what's inside of this function.

122
00:08:29,240 --> 00:08:31,570
There is a single call to set time out.

123
00:08:31,580 --> 00:08:35,510
There is no return statement directly inside of geo code.

124
00:08:35,510 --> 00:08:38,450
So geo code finishes almost immediately.

125
00:08:38,450 --> 00:08:44,120
And if you don't return something from a function we know that JavaScript will implicitly return undefined.

126
00:08:44,180 --> 00:08:46,670
So that is what we end up seeing.

127
00:08:46,670 --> 00:08:53,330
Now yes there is a return statement in geo code but it is nested in another function so that return

128
00:08:53,330 --> 00:09:00,370
statement is returning from this function not from this one which is why we're not getting a value back.

129
00:09:00,470 --> 00:09:06,560
So the return pattern is no longer going to work for us when we start to do asynchronous things inside

130
00:09:06,620 --> 00:09:07,820
of our functions.

131
00:09:07,820 --> 00:09:10,960
And that's where the callback pattern is going to come into play.

132
00:09:11,060 --> 00:09:15,760
So let's change our code to use callbacks and get it back to a working state.

133
00:09:15,800 --> 00:09:21,290
The first thing we're going to do is remove the expectation we have right here that Geo code is going

134
00:09:21,290 --> 00:09:24,800
to return some sort of useful value that's not going to happen.

135
00:09:24,800 --> 00:09:31,190
Remember that when we explored how everything works behind the scenes none of our callback functions

136
00:09:31,340 --> 00:09:35,420
the ones that go to no API then come down to the callback queue.

137
00:09:35,540 --> 00:09:38,970
They don't get executed until the call stack is empty.

138
00:09:38,990 --> 00:09:45,410
That means Maine has to finish right here we're trying to say that one of those callbacks should finish

139
00:09:45,410 --> 00:09:48,980
before main finishes and that's never going to happen.

140
00:09:49,010 --> 00:09:55,370
So we have to adjust what we're gonna do is we are going to remove data and remove our console log geo

141
00:09:55,370 --> 00:10:01,220
code is not going to have a direct return value and that's ok it's expected what we're going to do from

142
00:10:01,220 --> 00:10:03,710
here is provide that second argument.

143
00:10:03,710 --> 00:10:06,550
The first one is address currently Philadelphia.

144
00:10:06,800 --> 00:10:10,130
The other one is a callback which is just going to be a function.

145
00:10:10,130 --> 00:10:15,070
So right here I am going to provide a function as the second argument.

146
00:10:15,080 --> 00:10:20,750
Now you could have reversed the order or added as many or few arguments as you needed in this case 2

147
00:10:20,810 --> 00:10:22,890
was the perfect amount for us.

148
00:10:23,030 --> 00:10:29,210
Now this callback function is going to get fired at some point in time and the question is what things

149
00:10:29,210 --> 00:10:30,740
are we gonna have access to.

150
00:10:31,130 --> 00:10:33,080
Well that's up to us to choose.

151
00:10:33,080 --> 00:10:39,890
So right here instead of returning the data we're gonna go ahead and call the callback function passing

152
00:10:40,070 --> 00:10:42,350
the data in as that first argument.

153
00:10:42,740 --> 00:10:48,470
So if we're calling the callback with data as the first argument that means we're calling this function

154
00:10:48,560 --> 00:10:50,720
with data as the first argument.

155
00:10:50,720 --> 00:10:54,540
So right here I can name that first argument so I could access it.

156
00:10:54,650 --> 00:10:55,640
I'm gonna call data.

157
00:10:55,670 --> 00:10:57,140
But I could call it anything.

158
00:10:57,170 --> 00:10:58,310
I wanted to.

159
00:10:58,310 --> 00:11:01,220
This name does not need to match up with this name.

160
00:11:01,250 --> 00:11:06,800
It is the position that matters here it's the first argument down below it's the first argument and

161
00:11:06,800 --> 00:11:07,900
now we can use it.

162
00:11:08,030 --> 00:11:14,240
So console log data and now we're using the callback pattern in our little fictitious example.

163
00:11:14,690 --> 00:11:17,650
So let's go ahead and run the program one more time.

164
00:11:17,650 --> 00:11:20,960
Now we're going to wait those full two seconds as expected.

165
00:11:21,260 --> 00:11:24,490
We then get access to the data we call the callback.

166
00:11:24,500 --> 00:11:27,360
Our message prints and what are we seeing down below.

167
00:11:27,380 --> 00:11:33,350
I am seeing my latitude and longitude showing up which is a great step in the right direction.

168
00:11:33,380 --> 00:11:39,650
So if our function is completely synchronous like geo code was before we're able to use return to get

169
00:11:39,650 --> 00:11:44,990
a value out of the function and back to the part of the code that called that function when our function

170
00:11:44,990 --> 00:11:49,090
starts to do something asynchronous though that's no longer an option.

171
00:11:49,100 --> 00:11:55,280
So instead of returning a value we take a call back in and we call the callback with the value we want

172
00:11:55,280 --> 00:11:57,320
to send back when we have it.

173
00:11:57,350 --> 00:12:01,430
This accomplishes the same goal as the return statement does.

174
00:12:01,490 --> 00:12:05,600
It still gets the value back to the code that needs it.

175
00:12:05,600 --> 00:12:10,880
Now that we have this in place it's time for a quick challenge where you're going to do something similar

176
00:12:11,090 --> 00:12:14,520
creating a little function that uses the callback pattern.

177
00:12:14,570 --> 00:12:20,390
Once we're done with that in the next video we're actually going to use the callback pattern inside

178
00:12:20,390 --> 00:12:25,740
of app dot J S with our geo coding and our weather fetching functionality.

179
00:12:25,820 --> 00:12:33,320
So to find the challenge for this one we can head over to a U R Well that's links dot Mead dot I O forward

180
00:12:33,320 --> 00:12:35,050
slash callback.

181
00:12:35,120 --> 00:12:41,570
This is going to redirect us over to another Github Gist and we're going to do is take all eleven lines

182
00:12:41,570 --> 00:12:46,790
of code and we're going to bring them over to our four callbacks file.

183
00:12:46,790 --> 00:12:52,180
Now before I paste them in I am going to highlight all other lines and comment those out.

184
00:12:52,220 --> 00:12:57,620
So nothing else is running though I'll keep them in place as a reference for the future and down below.

185
00:12:57,620 --> 00:13:03,350
I'm going to paste the challenge comments in and we'll notice that this challenge also comes with a

186
00:13:03,350 --> 00:13:05,240
little bit of JavaScript code.

187
00:13:05,240 --> 00:13:11,420
The goal here as stated is to mess around with the callback pattern like we did up above for geo code

188
00:13:11,630 --> 00:13:13,470
and like we did for geo code.

189
00:13:13,520 --> 00:13:19,790
We're gonna stick with a simple set time out call to simulate some sort of asynchronous process.

190
00:13:19,790 --> 00:13:25,490
Now you're going to define an add function that accepts the correct arguments and the usage is actually

191
00:13:25,490 --> 00:13:26,310
down below.

192
00:13:26,630 --> 00:13:30,200
So add it takes in three arguments it takes in two numbers.

193
00:13:30,290 --> 00:13:36,170
These are the numbers that get added up and it takes in a callback which is going to get called after

194
00:13:36,170 --> 00:13:38,790
a two second delay with the sum.

195
00:13:38,960 --> 00:13:40,800
Then the code prints the sum.

196
00:13:40,940 --> 00:13:44,070
So your job is to get this code working.

197
00:13:44,070 --> 00:13:49,060
Now what's step 1 defined the add function with the correct arguments as seen below.

198
00:13:49,070 --> 00:13:49,760
Step 2.

199
00:13:49,760 --> 00:13:55,160
Use set time out to simulate a two second delay after those two seconds are up.

200
00:13:55,160 --> 00:13:57,970
Call the callback function with the sum.

201
00:13:57,980 --> 00:14:01,590
That means you're calling this function with the correct sum.

202
00:14:01,730 --> 00:14:03,520
Then you're going to test your work.

203
00:14:03,650 --> 00:14:08,920
If your definition of the add function is correct when you run the program you should see the number

204
00:14:08,920 --> 00:14:09,450
5.

205
00:14:09,470 --> 00:14:11,930
Printing after 2 seconds.

206
00:14:12,080 --> 00:14:17,870
All right take some time to define that function right here when you're done come back and click play.

207
00:14:21,870 --> 00:14:22,730
How'd that go.

208
00:14:22,740 --> 00:14:29,070
I'm gonna kick things off by creating a brand new variable cost add I'm gonna set that equal to a new

209
00:14:29,070 --> 00:14:33,810
function and this function is gonna need to take in all three arguments.

210
00:14:33,810 --> 00:14:40,890
We have two numbers and the callback so I could use something like a and b or X and Y then the callback

211
00:14:40,890 --> 00:14:46,460
function which is typically called callback but it could be called anything you wanted to call it.

212
00:14:46,470 --> 00:14:52,710
Next up we have to simulate an asynchronous process by using set time out to cause a two second delay.

213
00:14:53,010 --> 00:14:59,670
So right here I'll pass in my callback function and two thousand milliseconds as the second argument.

214
00:14:59,670 --> 00:15:03,530
That brings us to step 3 after those two seconds are up.

215
00:15:03,570 --> 00:15:06,440
We want to call the callback function with the sum.

216
00:15:06,440 --> 00:15:12,700
Remember I can't use return here because I'm returning from this inner function not from ADD.

217
00:15:12,720 --> 00:15:16,630
So instead of using return I will call callback.

218
00:15:16,650 --> 00:15:22,430
Now what am I calling it with a single argument the sum that's going to be a plus b.

219
00:15:22,440 --> 00:15:28,160
Now maybe you created a sum variable first and past that in or maybe you added them up right inside

220
00:15:28,170 --> 00:15:29,310
of the arguments list.

221
00:15:29,340 --> 00:15:31,760
Either way would get the job done.

222
00:15:31,920 --> 00:15:34,070
Now from here we can test our work.

223
00:15:34,110 --> 00:15:36,270
I'm gonna save the callbacks file.

224
00:15:36,510 --> 00:15:38,360
I'm gonna rerun things down below.

225
00:15:38,370 --> 00:15:40,920
We wait are two seconds and what do we get.

226
00:15:40,920 --> 00:15:43,160
We get the number five printing.

227
00:15:43,260 --> 00:15:47,400
So now we have a bit of experience working with this callback pattern.

228
00:15:47,400 --> 00:15:53,310
We've seen it used with set time now to simulate the asynchronous process and then the next video we're

229
00:15:53,310 --> 00:16:00,000
actually going to use it with our request calls where we get that each TTP request data back.

230
00:16:00,420 --> 00:16:04,590
Let's go ahead and wrap this one up by removing those challenge comments.

231
00:16:04,590 --> 00:16:10,260
I'm gonna save this playground file and then the next video we're gonna move back into the weather app

232
00:16:10,290 --> 00:16:11,340
directory.

233
00:16:11,340 --> 00:16:15,200
I'm excited to integrate callbacks into our weather application.

234
00:16:15,300 --> 00:16:18,200
So let's go ahead and jump right in to the next one.