1
00:00:01,120 --> 00:00:04,960
Welcome back, ladies and gentlemen, to another awesome lecture today we're going to talk about callbacks,

2
00:00:05,290 --> 00:00:09,520
asynchronous JavaScript callback hell or Pyramid of Doom.

3
00:00:09,520 --> 00:00:13,770
No callbacks are replaced in year six with promises.

4
00:00:14,200 --> 00:00:16,810
So somebody will say, OK, well, I'm learning then callbacks.

5
00:00:17,050 --> 00:00:22,180
Well, you need to have a background information how what was before promises.

6
00:00:22,330 --> 00:00:25,440
And that's why we are doing this that we are doing today.

7
00:00:25,810 --> 00:00:29,890
So the definition is of the callbacks is I will call you back later.

8
00:00:30,730 --> 00:00:32,770
Very interesting definition, right.

9
00:00:33,340 --> 00:00:37,230
So a callback is a function past as an argument to another function.

10
00:00:37,720 --> 00:00:38,290
Very good.

11
00:00:38,450 --> 00:00:41,500
This technique allows a function to call another function.

12
00:00:41,860 --> 00:00:45,400
A callback function can run after another function has finished.

13
00:00:46,120 --> 00:00:47,080
Nice out.

14
00:00:47,180 --> 00:00:53,410
I, I think that you probably half of you didn't understand what this definition means.

15
00:00:53,410 --> 00:00:53,770
Right.

16
00:00:54,190 --> 00:00:56,440
So let's do a couple of examples.

17
00:00:56,680 --> 00:01:04,000
But before I'm just going to create two functions and I'm going to run then to see run them to see their

18
00:01:04,030 --> 00:01:06,740
function are a sequence of execution.

19
00:01:07,080 --> 00:01:09,430
OK, so this is nothing with the callbacks.

20
00:01:09,610 --> 00:01:15,100
Still no memory, but it's function sequence.

21
00:01:17,300 --> 00:01:19,280
If I can spell it right, not sure.

22
00:01:19,400 --> 00:01:21,470
OK, so what were we having here?

23
00:01:21,560 --> 00:01:23,920
I'm going to create a function called first function.

24
00:01:25,130 --> 00:01:26,620
It's not going to take any parameters.

25
00:01:26,630 --> 00:01:27,860
And I'm going to a log.

26
00:01:28,730 --> 00:01:30,020
Hello?

27
00:01:32,360 --> 00:01:43,010
The second function will be second function, and again, another comes along, we'll say Hidir or just.

28
00:01:44,160 --> 00:01:44,580
But.

29
00:01:45,980 --> 00:01:46,750
Bye bye now.

30
00:01:48,300 --> 00:01:48,860
I got.

31
00:01:49,820 --> 00:01:50,640
That's pretty much it.

32
00:01:50,660 --> 00:01:57,700
Let's call the first function first what's happening here, frame 11, who called you this first function?

33
00:01:57,710 --> 00:01:59,570
OK, second function.

34
00:02:01,140 --> 00:02:05,980
So make sure that you re-elect your three and link it back to your index, OK?

35
00:02:06,050 --> 00:02:08,930
I hope you understand how those things are working so far.

36
00:02:09,170 --> 00:02:09,590
So I have.

37
00:02:09,590 --> 00:02:10,680
Hello and bye bye.

38
00:02:11,090 --> 00:02:11,680
Why is this?

39
00:02:11,930 --> 00:02:15,600
Well, I call the first function first and after that I call the second function.

40
00:02:16,340 --> 00:02:18,590
So these are e call function sequence.

41
00:02:18,800 --> 00:02:21,590
So what do you what will happen if I change this too?

42
00:02:21,770 --> 00:02:23,630
So if I put a second first.

43
00:02:25,040 --> 00:02:33,770
In first as a second, now I have bye bye and hello, nice, so javascript functions are executed in

44
00:02:34,040 --> 00:02:36,980
a sequence in the sequence they're called.

45
00:02:37,070 --> 00:02:37,430
Right.

46
00:02:37,730 --> 00:02:40,700
They're called here and they're executed in that sequence.

47
00:02:41,570 --> 00:02:43,130
Not then.

48
00:02:43,160 --> 00:02:44,510
I want to do something else.

49
00:02:45,230 --> 00:02:49,070
I want to see the sequence control.

50
00:02:50,150 --> 00:02:53,050
Let's do sequence control.

51
00:02:53,810 --> 00:02:58,680
Now, sometimes you would like to have a better control over what function you want to execute.

52
00:02:58,700 --> 00:03:05,030
OK, so let's create a function called message and the message will take a result.

53
00:03:06,710 --> 00:03:07,580
One parameter.

54
00:03:07,950 --> 00:03:09,190
Don't worry about this result.

55
00:03:09,200 --> 00:03:10,460
You just cancel it.

56
00:03:10,460 --> 00:03:14,780
Log now do this with template literals.

57
00:03:15,260 --> 00:03:21,710
The sum is because it's very easy to use template literals result.

58
00:03:22,100 --> 00:03:22,820
Very good.

59
00:03:24,120 --> 00:03:29,370
Says, you guessed it, probably now we're going to have a function that will create this result, so

60
00:03:29,490 --> 00:03:42,750
function some and some will take two parameters, A and B and let some B, A plus B bear with me, type

61
00:03:42,750 --> 00:03:43,920
the the content.

62
00:03:43,930 --> 00:03:46,200
Don't worry about it too much at this stage.

63
00:03:47,160 --> 00:03:53,460
Now, from here, I want to call the message function and pass to some.

64
00:03:54,420 --> 00:03:55,020
What some.

65
00:03:56,280 --> 00:04:02,100
Here, the result of this some some calling the message function from here, so you can call the message

66
00:04:02,100 --> 00:04:03,750
function from inside another function.

67
00:04:03,760 --> 00:04:04,010
Right.

68
00:04:04,560 --> 00:04:07,620
And the last word that we need is to some.

69
00:04:08,780 --> 00:04:14,850
Five and six, that should give us back a result of 11.

70
00:04:15,230 --> 00:04:17,190
So the sum is actually 11.

71
00:04:17,780 --> 00:04:18,290
Very good.

72
00:04:19,190 --> 00:04:21,580
Now, one problem here is happening.

73
00:04:21,950 --> 00:04:27,860
So the problem with this example is that you cannot prevent the same function to call this function.

74
00:04:27,890 --> 00:04:32,840
You cannot prevent for example, this result is not already there, but we are just calling the function.

75
00:04:33,810 --> 00:04:42,230
And there and then that's why, dear, and then I just mixed it up, so that's why we use callbacks

76
00:04:42,270 --> 00:04:48,900
now let's use callbacks for first time, I know it will be a little bit tricky callbacks.

77
00:04:49,380 --> 00:04:49,920
So.

78
00:04:52,110 --> 00:04:59,070
I call back again is a function passed as an argument to another function using the callback you could

79
00:04:59,070 --> 00:05:00,430
call a sum function.

80
00:05:01,050 --> 00:05:02,310
This right.

81
00:05:03,530 --> 00:05:04,460
With a callback.

82
00:05:05,450 --> 00:05:11,060
Now, this is interesting and let the sum function run the callback after the function is finished,

83
00:05:11,360 --> 00:05:12,980
the calculations are finished.

84
00:05:13,450 --> 00:05:16,740
Now, we're going to redo this part a little bit.

85
00:05:17,270 --> 00:05:24,230
So what I want you to do is just to comment out this part first copy and then coming out and paste it

86
00:05:24,230 --> 00:05:24,590
here.

87
00:05:27,300 --> 00:05:36,390
Now, now the definition will start making sense and let's put it here, not here, sorry, just let's

88
00:05:36,390 --> 00:05:42,270
put here the same is before the some would say callback, callback.

89
00:05:42,270 --> 00:05:45,090
Some is very good now.

90
00:05:45,990 --> 00:05:52,140
As I told you, that callback function passed as an argument to another function, so using a callback

91
00:05:52,140 --> 00:05:54,790
issue, you could call the same function with a callback.

92
00:05:55,200 --> 00:05:56,970
So let's put the call back here.

93
00:05:57,920 --> 00:06:01,680
You can put any name I'm just stating that should be Carmac.

94
00:06:02,180 --> 00:06:04,730
Now let's some we will finish this.

95
00:06:05,390 --> 00:06:09,440
But here, instead of calling the message, we can say call back.

96
00:06:10,340 --> 00:06:14,230
So callbacks allow us to call the message function.

97
00:06:14,420 --> 00:06:16,220
We're going to call the message function to this.

98
00:06:16,370 --> 00:06:19,320
And this, by the way, is going to working now.

99
00:06:19,520 --> 00:06:23,780
Now, the definition again, if we read the definition, then you will get it.

100
00:06:24,020 --> 00:06:29,720
A callback function is a function passed as an argument to another function, a very good.

101
00:06:30,770 --> 00:06:37,010
Using a callback, you can call the some function with a callback, right, this function with inside

102
00:06:37,010 --> 00:06:43,130
a callback and let the same function run the callback after the calculation is done.

103
00:06:43,310 --> 00:06:47,720
So we're going to run this callback after the calculation, this calculation is done.

104
00:06:47,720 --> 00:06:49,480
So let's save it and see if it's going to work.

105
00:06:49,970 --> 00:06:51,920
Callback is not a function.

106
00:06:52,310 --> 00:06:53,020
Very good.

107
00:06:53,030 --> 00:06:54,230
So what's happening here?

108
00:06:54,710 --> 00:06:56,300
We have a problem.

109
00:06:58,020 --> 00:06:59,010
Callback some.

110
00:07:00,550 --> 00:07:11,560
Message, yeah, one more thing we just forget here to pass the message, that's why callback sum is

111
00:07:11,560 --> 00:07:12,090
11.

112
00:07:13,210 --> 00:07:17,170
So in the example above, the message is the name of the function.

113
00:07:17,170 --> 00:07:17,430
Right.

114
00:07:18,820 --> 00:07:21,690
So I'm going to get through all of these steps now.

115
00:07:22,420 --> 00:07:24,790
It is best to sum as an argument.

116
00:07:25,840 --> 00:07:28,300
So it is passed here in a some as an argument.

117
00:07:28,720 --> 00:07:32,840
When you pass a function as an argument, you're not going to use parentheses here.

118
00:07:33,820 --> 00:07:34,830
So this is wrong.

119
00:07:35,110 --> 00:07:36,340
So I'm just going to copy it.

120
00:07:39,580 --> 00:07:48,690
I'm going to say you're wrong, so you when you pass a function as an argument, remember not to include

121
00:07:48,690 --> 00:07:54,140
what the parentheses cuz actually is not going to work now.

122
00:07:54,150 --> 00:07:56,210
C callback is not function again.

123
00:07:56,790 --> 00:07:57,370
Save it.

124
00:07:57,390 --> 00:07:57,690
Oops.

125
00:07:59,440 --> 00:08:01,510
Now it's working very good.

126
00:08:02,850 --> 00:08:04,420
So that is pretty much it.

127
00:08:05,190 --> 00:08:10,860
Now, maybe this is a little bit confusing at this stage, but you don't worry, we're going to go through

128
00:08:10,860 --> 00:08:11,610
this again.

129
00:08:12,630 --> 00:08:14,650
So why do you need callback functions?

130
00:08:15,360 --> 00:08:19,800
Well, JavaScript runs code sequentially from top to down.

131
00:08:19,800 --> 00:08:21,810
So JavaScript how it runs.

132
00:08:21,810 --> 00:08:23,520
The code is started from here.

133
00:08:24,350 --> 00:08:26,490
Ignore the comments.

134
00:08:26,640 --> 00:08:27,660
So it's going to start from here.

135
00:08:27,660 --> 00:08:28,970
Is going to go down, down, down.

136
00:08:28,980 --> 00:08:29,280
Right.

137
00:08:29,640 --> 00:08:33,770
That is called sequentially in top down order.

138
00:08:34,110 --> 00:08:42,120
However, there are some cases that codes run or must run after something else happens and also not

139
00:08:42,120 --> 00:08:42,870
sequentially.

140
00:08:43,170 --> 00:08:45,360
So this is called asynchronously.

141
00:08:46,600 --> 00:08:50,530
Sometimes we don't want that to happen from top to bottom, right?

142
00:08:50,860 --> 00:08:57,730
We want code to run after something else happens that because that is our logic and that is called asynchronous

143
00:08:57,730 --> 00:08:58,350
programming.

144
00:08:58,960 --> 00:09:04,690
Now, callbacks, make sure that the function is not going to run before a task is complete.

145
00:09:05,170 --> 00:09:09,910
So this function will not be called here until this one is complete.

146
00:09:11,080 --> 00:09:15,910
That's why they call backs and they make sure that a function is not going to run before a task is completed,

147
00:09:16,150 --> 00:09:19,270
but will run after the task has completed.

148
00:09:19,270 --> 00:09:21,080
So it will run, right.

149
00:09:22,090 --> 00:09:30,210
That helps us developer to create asynchronous JavaScript code that keeps us from problems in error.

150
00:09:31,240 --> 00:09:35,820
So, Ehsani, asynchronous JavaScript code is also known as non blocking code.

151
00:09:36,280 --> 00:09:36,620
Right.

152
00:09:36,760 --> 00:09:40,090
So do you think finished with this then?

153
00:09:40,090 --> 00:09:41,860
I'm going to call it so it's not going to stop here.

154
00:09:41,870 --> 00:09:43,090
It's not going to block anything.

155
00:09:43,210 --> 00:09:49,840
It lets in the background to run now in JavaScript, the way we create callback function is to pass.

156
00:09:49,840 --> 00:09:55,330
That is a parameter to another function and then call it back right after something else has happened.

157
00:09:55,810 --> 00:10:05,140
Right now, one scenario where we use asynchronous callbacks is with setup out function.

158
00:10:05,650 --> 00:10:10,500
So callbacks are most use used with asynchronous function.

159
00:10:10,720 --> 00:10:18,070
So the typical example here is timeout function, time out.

160
00:10:19,480 --> 00:10:20,110
Function.

161
00:10:21,220 --> 00:10:23,780
And it's called Said Time out, by the way.

162
00:10:26,590 --> 00:10:31,810
Yeah, so this function is typical example of JavaScript callback.

163
00:10:32,470 --> 00:10:35,100
Now let me just write it down for you.

164
00:10:35,830 --> 00:10:37,480
So I'm going to create a function again.

165
00:10:40,520 --> 00:10:46,870
And we do have the message here, just make sure that you comment this one function message.

166
00:10:46,910 --> 00:10:50,370
I don't want to invent names because I'm going to confuse confuse them later.

167
00:10:50,390 --> 00:10:50,880
That's why.

168
00:10:51,320 --> 00:10:53,080
So here I'm going to say Konza lot.

169
00:10:53,220 --> 00:10:55,460
OK, let's copy some of this here.

170
00:10:57,390 --> 00:10:59,820
Comes a lock, this is this tax.

171
00:11:03,140 --> 00:11:06,920
Will be seen after.

172
00:11:07,870 --> 00:11:09,310
Three seconds.

173
00:11:10,270 --> 00:11:10,970
Very good.

174
00:11:11,200 --> 00:11:15,380
So this function going to display, this text will be seen after three seconds.

175
00:11:15,760 --> 00:11:18,050
Now set them up function.

176
00:11:18,700 --> 00:11:19,290
Here it is.

177
00:11:19,960 --> 00:11:22,030
It takes two parameters.

178
00:11:22,780 --> 00:11:24,490
The function in.

179
00:11:25,680 --> 00:11:33,120
The milliseconds, so these three thousands are actually three seconds, one thousand milliseconds is

180
00:11:33,120 --> 00:11:34,240
equal to one second.

181
00:11:34,880 --> 00:11:38,010
OK, now let me just show you this.

182
00:11:40,350 --> 00:11:44,190
Go back here, let's make this working.

183
00:11:46,140 --> 00:11:46,650
Nice.

184
00:11:46,890 --> 00:11:47,860
So what's happening?

185
00:11:47,880 --> 00:11:48,330
Very good.

186
00:11:48,600 --> 00:11:49,750
Now I'm going to save it again.

187
00:11:50,430 --> 00:11:50,900
Bye bye.

188
00:11:50,910 --> 00:11:52,380
Hello from a previous.

189
00:11:53,320 --> 00:11:59,940
This tax will be seen, not seem seen after three seconds, very good.

190
00:12:00,130 --> 00:12:12,090
So one, two, three days ago, so said Time Out is inbuilt method in JavaScript, which calls up functions

191
00:12:12,100 --> 00:12:17,190
or evaluates an expression after a given period of time.

192
00:12:17,920 --> 00:12:19,570
So this time is in milliseconds.

193
00:12:19,570 --> 00:12:19,870
Right.

194
00:12:20,350 --> 00:12:22,150
So here the message function.

195
00:12:23,310 --> 00:12:30,480
Will be called three seconds after three seconds have passed, because these three thousand milliseconds

196
00:12:30,720 --> 00:12:34,730
is actually three seconds, one second equals one thousand milliseconds.

197
00:12:35,040 --> 00:12:38,910
In other words, the message function is being called after something happened.

198
00:12:39,030 --> 00:12:39,390
Right.

199
00:12:39,720 --> 00:12:44,540
So the message function is example of a callback function.

200
00:12:44,550 --> 00:12:44,880
Right.

201
00:12:47,320 --> 00:12:53,140
We can do this a little bit differently so we can define a function directly inside another function

202
00:12:53,140 --> 00:12:54,820
instead of calling it like here.

203
00:12:55,420 --> 00:13:01,690
So I'm just going to copy this entire thing, just going to comment out and.

204
00:13:03,020 --> 00:13:05,690
So this is called anonymous function.

205
00:13:11,520 --> 00:13:12,840
And why it's anonymous.

206
00:13:12,870 --> 00:13:14,560
Well, we will see in a second.

207
00:13:15,000 --> 00:13:22,010
So instead of creating this message function on top here, what I can do, I can say here function oops

208
00:13:22,350 --> 00:13:25,020
without caps, lock function call.

209
00:13:25,500 --> 00:13:26,610
And now.

210
00:13:28,610 --> 00:13:35,450
I can just grab this console lock here, and I don't need this function, so this is called anonymous

211
00:13:35,450 --> 00:13:37,590
function because there is no name associated.

212
00:13:37,940 --> 00:13:40,440
So one, two, three.

213
00:13:40,760 --> 00:13:41,450
There you go.

214
00:13:41,460 --> 00:13:45,110
The text will be seen after three seconds, right.

215
00:13:45,290 --> 00:13:51,170
So this is alternative way we can define function directly inside another function because Satima is

216
00:13:51,170 --> 00:13:54,040
a function and we are defining another function inside.

217
00:13:54,260 --> 00:13:57,830
But make sure that you have a comma here to separate that with the milliseconds.

218
00:13:58,010 --> 00:13:58,460
OK.

219
00:14:00,280 --> 00:14:02,780
So the callback function, there is no name.

220
00:14:02,800 --> 00:14:09,270
That's why the functions without no name are known in JavaScript as anonymous functions.

221
00:14:09,850 --> 00:14:13,270
But this does exactly the same as this one.

222
00:14:13,300 --> 00:14:15,140
The result is exactly the same.

223
00:14:16,030 --> 00:14:16,450
Now.

224
00:14:18,120 --> 00:14:22,320
What we can do is we can just use callback as a narrative function.

225
00:14:27,770 --> 00:14:28,900
Function, right?

226
00:14:29,270 --> 00:14:33,860
So how we can do this, so let me just comment about this one again.

227
00:14:34,340 --> 00:14:36,470
Oops, let uncommented save it first.

228
00:14:36,470 --> 00:14:40,570
Coming back now set time out here.

229
00:14:40,730 --> 00:14:44,150
What I can do, I can delete this function.

230
00:14:45,520 --> 00:14:53,890
And I can just simply put, an error function here, error will indicate this is an error function.

231
00:14:53,900 --> 00:14:54,400
Save it.

232
00:14:55,090 --> 00:14:56,800
One, two, three.

233
00:14:58,060 --> 00:14:59,270
I was too fast, right?

234
00:14:59,500 --> 00:15:01,490
So it's three seconds good.

235
00:15:01,510 --> 00:15:08,310
Now, if you prefer, you can write callback functions as an as six error functions, which is a newer

236
00:15:08,320 --> 00:15:10,420
type of function in JavaScript.

237
00:15:10,570 --> 00:15:15,010
It was it was there with the S6 features.

238
00:15:16,350 --> 00:15:23,220
So let me explain it again about asynchronous JavaScript, so with asynchronous JavaScript, it's a

239
00:15:23,220 --> 00:15:29,420
JavaScript which use callbacks, promises, async, await, we will do promises and async await in future.

240
00:15:29,670 --> 00:15:32,910
So the asynchronous JavaScript is something that used callbacks.

241
00:15:32,910 --> 00:15:33,180
Right.

242
00:15:33,930 --> 00:15:41,340
And we use this because it helps the function to take time to return some value or to produce a result.

243
00:15:41,880 --> 00:15:47,940
Now we need a callback function because we want to use the result from that function and that result

244
00:15:47,940 --> 00:15:53,310
to give to pass to another function, but not before we have the actual data.

245
00:15:53,670 --> 00:15:53,980
Right.

246
00:15:54,570 --> 00:15:55,770
So that's the whole thing behind.

247
00:15:56,730 --> 00:16:03,990
So while one function is executing and waiting to get results back, and when we have that result back,

248
00:16:03,990 --> 00:16:05,610
we're going to give it to another function.

249
00:16:06,150 --> 00:16:10,770
So without this, we will have a very big problems and errors.

250
00:16:11,190 --> 00:16:13,090
Now, I'm going to give you another example.

251
00:16:13,160 --> 00:16:15,780
I hope this example will clear all of your doubts.

252
00:16:16,170 --> 00:16:19,130
And I'm super, super happy that you are still with me.

253
00:16:19,830 --> 00:16:26,280
So callbacks are not very easy to understand because, yeah, they will back us later.

254
00:16:27,750 --> 00:16:29,190
Now, another example.

255
00:16:29,730 --> 00:16:35,200
I'm just going to create const first function expression, right?

256
00:16:35,490 --> 00:16:37,940
It will be an error function here.

257
00:16:38,430 --> 00:16:40,350
So I'm going to say console log.

258
00:16:42,210 --> 00:16:48,130
The first function was called very good.

259
00:16:49,230 --> 00:16:56,400
Now, from here, I will call a second function oops, not this one second function and I'm going to

260
00:16:56,400 --> 00:16:58,850
say Conjola, just bear with me.

261
00:16:59,370 --> 00:17:02,500
The code did not stopped.

262
00:17:04,170 --> 00:17:08,010
On the second function.

263
00:17:10,980 --> 00:17:12,060
And still.

264
00:17:14,190 --> 00:17:22,470
Runs very good now after this council comes along, I will call the third function for here, just put

265
00:17:22,470 --> 00:17:26,940
it here, her now consed second function.

266
00:17:29,520 --> 00:17:37,190
Make sure it's a narrow function there so it gives us time to practice the error functions, right.

267
00:17:38,130 --> 00:17:46,350
So on the second function, I'm going to put a set time out here and I'm going to say download complete

268
00:17:47,070 --> 00:17:48,930
and I'm going to put here six.

269
00:17:50,000 --> 00:17:50,990
Six thousand.

270
00:17:51,000 --> 00:17:52,820
That is six seconds.

271
00:17:52,830 --> 00:17:53,840
Wow, that's a lot.

272
00:17:54,240 --> 00:17:56,190
But we have time right now.

273
00:17:56,610 --> 00:18:03,180
Consed third and we are done probably.

274
00:18:04,710 --> 00:18:06,480
So Konza.

275
00:18:11,990 --> 00:18:21,260
Third function was called, now you will see what is the sequence of execution and finally, we need

276
00:18:21,260 --> 00:18:31,850
to say consed this, we need to define this download complete run down, load complete again.

277
00:18:31,850 --> 00:18:33,680
It will not take any parameters.

278
00:18:36,230 --> 00:18:41,720
And I will say that log is a template literals.

279
00:18:42,950 --> 00:18:46,850
I don't have enough space just like this, I should put it in teplin literals.

280
00:18:47,120 --> 00:18:57,890
The second function took six seconds to complete the file because.

281
00:19:01,850 --> 00:19:07,370
The file was big for downloading.

282
00:19:08,680 --> 00:19:10,000
If I misspell it, don't worry.

283
00:19:11,350 --> 00:19:15,310
So finally, we need to call the first.

284
00:19:19,060 --> 00:19:20,370
Function like this.

285
00:19:21,190 --> 00:19:26,500
All right, so are going to call it inside again now inside we have a console lot, then we have the

286
00:19:26,500 --> 00:19:27,280
second function.

287
00:19:27,610 --> 00:19:35,980
The second function has a set time out function right in this time out function will run after six seconds,

288
00:19:36,220 --> 00:19:39,860
which is making this a callback function right now.

289
00:19:39,880 --> 00:19:41,860
Mark, this is a callback function.

290
00:19:44,320 --> 00:19:46,930
And the third is just a simple comes a lot.

291
00:19:47,380 --> 00:19:53,020
And the message of this function here, OK, save it and see what's happening.

292
00:19:53,590 --> 00:19:55,000
The first function was called.

293
00:19:55,970 --> 00:20:00,140
The court did not stop there, the third function was called.

294
00:20:01,750 --> 00:20:04,150
The text this one was coming from.

295
00:20:04,180 --> 00:20:09,790
Let me just come out this part here, I don't want to confuse you.

296
00:20:11,680 --> 00:20:20,090
Let's come in our everything here that we do have, the first function was called the code did not stop

297
00:20:20,090 --> 00:20:27,080
in the second function and still runs third function was called and finally download complete was called.

298
00:20:27,080 --> 00:20:27,500
Right.

299
00:20:28,310 --> 00:20:33,710
So this is the power of async functions.

300
00:20:34,890 --> 00:20:41,540
So the powers of async functions are very big, so it allows other function to run in the background

301
00:20:42,330 --> 00:20:47,580
there also they are called when a function finishes its work and they're not blocking.

302
00:20:47,940 --> 00:20:51,870
So they did not block the code and let the other functions do its job.

303
00:20:52,470 --> 00:20:52,780
Right.

304
00:20:53,070 --> 00:20:59,040
So that's why I want to show you this example, because this line was there then.

305
00:21:00,070 --> 00:21:07,660
Hear it call because but there is because it's a Satima Septime function that is call back it it can

306
00:21:07,660 --> 00:21:12,450
continue working here because we say here, OK, this one should run after six seconds.

307
00:21:12,880 --> 00:21:14,560
Now it come back here.

308
00:21:15,190 --> 00:21:16,820
Deko did not stop.

309
00:21:17,320 --> 00:21:18,670
That's why you see this.

310
00:21:18,670 --> 00:21:19,790
Deko did not stop.

311
00:21:20,140 --> 00:21:24,070
Then the third function was called and it printed out immediately.

312
00:21:24,400 --> 00:21:32,410
And while doing this it waited exactly six minutes, six seconds to pass in just to call this download

313
00:21:32,410 --> 00:21:32,920
complete.

314
00:21:33,610 --> 00:21:39,730
So the async functions allow the code to run in the background smoothly without blocking.

315
00:21:39,760 --> 00:21:43,060
Without Knoblock, it will not block the other code.

316
00:21:43,070 --> 00:21:43,400
Right.

317
00:21:44,140 --> 00:21:47,320
So there you go now.

318
00:21:48,250 --> 00:21:56,770
Because everyone sorry, not because the callback functions are like this, there can sometimes be a

319
00:21:56,770 --> 00:22:01,170
very huge problem in that these are these two here.

320
00:22:02,290 --> 00:22:06,370
Let me just show you a callback Hell and Pyramid of Doom.

321
00:22:06,820 --> 00:22:11,410
Now, imagine if we have multiple callbacks function inside.

322
00:22:12,560 --> 00:22:18,080
Dysfunction, so inside here, we have another callback function, another callback function, so that

323
00:22:18,130 --> 00:22:25,240
is creating the Pyramid of Doom and there is a one page called Callback Hell.

324
00:22:26,150 --> 00:22:27,110
So I want you to check.

325
00:22:27,110 --> 00:22:28,330
It's not my page.

326
00:22:29,420 --> 00:22:30,210
Look at this code.

327
00:22:30,350 --> 00:22:32,280
This is exactly what I'm talking about.

328
00:22:32,540 --> 00:22:37,070
So it creates a pyramid is going cascading one, right?

329
00:22:37,100 --> 00:22:38,390
It's creating a pyramid.

330
00:22:38,680 --> 00:22:41,660
So if you see from left to right, it's indented.

331
00:22:41,900 --> 00:22:42,770
It's a pyramid.

332
00:22:42,950 --> 00:22:44,720
So it's like an arrow here.

333
00:22:45,170 --> 00:22:47,300
So this is called callback hell.

334
00:22:47,750 --> 00:22:53,550
And there is a very big problem because the code can get very messy.

335
00:22:53,870 --> 00:22:55,430
So what's the solution to this?

336
00:22:55,730 --> 00:23:02,870
Well, the solution of this pyramid of do more callback hell is to use promises and we will talk about

337
00:23:02,870 --> 00:23:05,240
promises and how this can be.

338
00:23:06,520 --> 00:23:09,600
Don, much more readable because here it's very confusing.

339
00:23:09,650 --> 00:23:15,910
Well, what it will do and please, if you if you have time, just read it here.

340
00:23:16,210 --> 00:23:18,010
You don't need to understand the example.

341
00:23:18,010 --> 00:23:24,190
Just read it, because it will tell you that there are problems that can occur with this callback of

342
00:23:24,190 --> 00:23:24,520
how.

343
00:23:24,520 --> 00:23:24,900
Right.

344
00:23:25,570 --> 00:23:30,970
So that was the Web page I think I've included somewhere here.

345
00:23:31,000 --> 00:23:31,710
No, I don't.

346
00:23:31,960 --> 00:23:34,620
But, you know, callback hell dot com.

347
00:23:34,630 --> 00:23:35,100
That's it.

348
00:23:36,450 --> 00:23:37,150
There you go.

349
00:23:37,170 --> 00:23:39,810
Now, you know what callback functions are.

350
00:23:41,250 --> 00:23:47,880
We create a sequence, control the callbacks, you have the definition anonymous function callback as

351
00:23:47,880 --> 00:23:51,800
a narrative function, and this is the last thing we did.

352
00:23:52,140 --> 00:24:00,390
So this was the last example where we call one by one of the function just to tell you that the asynchronous

353
00:24:00,390 --> 00:24:01,970
function will not block the code.

354
00:24:02,370 --> 00:24:09,840
So it will if it was synchronous execution, it will stop here, get after six seconds.

355
00:24:10,020 --> 00:24:13,950
It will print out this, then it will go to this and to this line.

356
00:24:14,220 --> 00:24:17,970
But the asynchronous are there because they don't want to block the code.

357
00:24:17,970 --> 00:24:23,880
We they want us to continue with our lives, to continue with our work, to continue with the next line,

358
00:24:23,880 --> 00:24:26,640
what's next and when they have the result.

359
00:24:27,730 --> 00:24:31,220
They're going to call us back, and that is pretty much it.

360
00:24:31,360 --> 00:24:32,630
So I hope you understand this one.

361
00:24:32,650 --> 00:24:36,610
If not, please watch it again and I will see you in the next lecture.