1
00:00:00,700 --> 00:00:05,290
In the previous video, we saw how callback works.

2
00:00:05,410 --> 00:00:13,400
So in this particular video, let's see how we can make use of callback to write a sync code.

3
00:00:13,420 --> 00:00:15,110
Before we get into that.

4
00:00:15,130 --> 00:00:18,670
Let's see how callback can be used in a function.

5
00:00:18,670 --> 00:00:20,230
So here we go.

6
00:00:20,260 --> 00:00:24,700
Let's go through this particular function, step by step.

7
00:00:25,000 --> 00:00:33,040
You can see that we have a function keyword and a function name, which is say hello and I pass in one

8
00:00:33,040 --> 00:00:40,020
element which is called callback, and then inside a function is just console.log and hello to the console

9
00:00:40,030 --> 00:00:44,140
and on line number three we call the function as that.

10
00:00:44,140 --> 00:00:50,710
So what is the difference between any argument we passing to the function and the callback function?

11
00:00:51,840 --> 00:00:58,260
This agreement can be anything but this one is a callback simply because we are calling it down here.

12
00:00:58,260 --> 00:01:00,240
Meaning it's a callback function.

13
00:01:00,420 --> 00:01:01,280
Perfect.

14
00:01:01,290 --> 00:01:06,750
So the name of this one can be anything, but not always as callback as we see.

15
00:01:06,930 --> 00:01:10,710
So why do we need this callback inside this particular function?

16
00:01:10,710 --> 00:01:14,910
So let's assume that getting hello is going to take some time.

17
00:01:14,940 --> 00:01:18,870
So we don't know when the response of hello will be back.

18
00:01:19,260 --> 00:01:24,000
So by the time you call this function, say hello, there'll be no value.

19
00:01:24,240 --> 00:01:28,620
But let's say that after some scans we get the response, which is Hello.

20
00:01:28,680 --> 00:01:35,100
Then the callback will take the response or the value and then call the function again.

21
00:01:35,100 --> 00:01:40,590
In that case, you're going to see the response coming from this particular function.

22
00:01:40,590 --> 00:01:42,750
That is all what callback is doing.

23
00:01:42,750 --> 00:01:49,560
So in short, callback is a function that is passed in as an argument to a function.

24
00:01:49,560 --> 00:01:53,310
As you see here, we pass in an argument to this function.

25
00:01:53,310 --> 00:01:57,450
So when calling it, it means that we are going to pass in a function.

26
00:01:57,450 --> 00:02:00,900
So let's see how we're going to write this with read code.

27
00:02:01,780 --> 00:02:04,150
To better understand, go back.

28
00:02:04,150 --> 00:02:06,820
Let's see what we want to achieve.

29
00:02:07,300 --> 00:02:12,220
Let's say that we want to create posts and save it into database.

30
00:02:12,220 --> 00:02:18,300
And then after creating, we also want to fetch all the posts that we have created.

31
00:02:18,310 --> 00:02:20,660
So let's have the outline here.

32
00:02:20,680 --> 00:02:22,090
That is our logic.

33
00:02:22,360 --> 00:02:27,160
Step number one is we want to create a post.

34
00:02:27,310 --> 00:02:34,060
And then secondly, we want to fetch, fetch or post.

35
00:02:34,420 --> 00:02:41,890
So for this particular logic, we are assuming that we are going to save the post that we want to create

36
00:02:41,890 --> 00:02:44,260
into a database sitting somewhere.

37
00:02:44,620 --> 00:02:46,980
So for us, we have database in the maze.

38
00:02:46,990 --> 00:02:54,760
It means that we need to write a sync code because we don't know when, after creating whether it should

39
00:02:54,760 --> 00:02:58,270
be saved within as part or going to take some time.

40
00:02:58,390 --> 00:03:01,690
That is why we need async code in this context.

41
00:03:01,690 --> 00:03:07,780
So we are assuming that we are going to save all the posts into database and somewhere perfect.

42
00:03:07,780 --> 00:03:11,650
So now let's remove this one and now let's get going.

43
00:03:11,680 --> 00:03:17,110
So let's assume that we have this data already in our database called Post.

44
00:03:18,520 --> 00:03:19,240
Data.

45
00:03:20,330 --> 00:03:23,710
And for this one, I'm going to take some few arrays of posts.

46
00:03:23,720 --> 00:03:26,390
Let's say we have these existing posts.

47
00:03:26,420 --> 00:03:35,630
Title is going to be as my title one and then let's say description of this is going to be as the description.

48
00:03:36,990 --> 00:03:44,670
Description one and I can copy these posts, let's say two times when I have three posts.

49
00:03:45,310 --> 00:03:53,200
So I would change this one from Title one to Title two and description to like why this I would change

50
00:03:53,200 --> 00:03:56,390
this 1 to 33 and description three.

51
00:03:56,410 --> 00:04:02,530
So this is our database we have, this is our existing post that we have.

52
00:04:02,530 --> 00:04:10,300
So our what we are going to do is we want to create a post and save any post into this particular array.

53
00:04:10,330 --> 00:04:10,840
Perfect.

54
00:04:10,870 --> 00:04:13,390
Now let's start with fetching post.

55
00:04:13,390 --> 00:04:15,460
So function goes like this.

56
00:04:15,460 --> 00:04:16,269
Fetch.

57
00:04:17,329 --> 00:04:24,410
Or post spelling mistake is not like this, but instead it's like.

58
00:04:25,480 --> 00:04:26,170
This.

59
00:04:26,200 --> 00:04:26,600
Okay.

60
00:04:26,620 --> 00:04:27,340
Fetch Opal.

61
00:04:27,360 --> 00:04:29,020
So here we go.

62
00:04:29,290 --> 00:04:30,820
So a function.

63
00:04:31,910 --> 00:04:32,630
Fetch.

64
00:04:33,570 --> 00:04:41,760
Post's going to be as that and this function just console.log, just the post we have that is inside

65
00:04:41,760 --> 00:04:42,570
our database.

66
00:04:42,570 --> 00:04:47,880
So for the meantime, let's say post is fetching.

67
00:04:49,330 --> 00:04:55,960
And then after that we can come down here and then console.log post data.

68
00:04:56,110 --> 00:04:56,650
Perfect.

69
00:04:56,650 --> 00:05:01,090
So if I call this function down here as post data here.

70
00:05:01,120 --> 00:05:02,320
Now have a look.

71
00:05:02,350 --> 00:05:07,750
If you check our terminal, you can see that where I have some error.

72
00:05:09,320 --> 00:05:09,770
Sorry.

73
00:05:09,800 --> 00:05:12,320
Called the post rather, but not the data.

74
00:05:12,350 --> 00:05:13,340
Sorry, guys.

75
00:05:13,550 --> 00:05:16,070
Now we see that we have three posts.

76
00:05:16,070 --> 00:05:19,730
So let me add some three dots to show that yes.

77
00:05:19,740 --> 00:05:26,630
Is loading or is virtual so that we have first fashion and now indeed we have fetching, which is three

78
00:05:26,630 --> 00:05:27,230
posts.

79
00:05:27,260 --> 00:05:31,300
You can see that we have three record in this particular array.

80
00:05:31,310 --> 00:05:34,410
So at this point there is no callback.

81
00:05:34,430 --> 00:05:36,830
This is normal flow how JavaScript works.

82
00:05:37,040 --> 00:05:42,770
So after fetching, then let's go ahead and also create a post.

83
00:05:42,860 --> 00:05:48,260
So down here going to be my create posts as that.

84
00:05:48,350 --> 00:05:51,350
So here we go function.

85
00:05:52,330 --> 00:05:53,200
Create.

86
00:05:54,860 --> 00:06:00,200
Posts and this function going to take in the post that we want to create.

87
00:06:00,440 --> 00:06:09,590
So here we will say that push the new posts into the existing.

88
00:06:11,220 --> 00:06:14,310
Post IRA or post data.

89
00:06:15,360 --> 00:06:16,020
That is it.

90
00:06:16,020 --> 00:06:17,130
So here we go.

91
00:06:17,160 --> 00:06:20,410
You're going to take the post data because it's an array.

92
00:06:20,430 --> 00:06:24,480
We have array, method or net push on this particular array.

93
00:06:24,510 --> 00:06:26,280
So here we go.

94
00:06:26,490 --> 00:06:30,210
So come down here on the post data here.

95
00:06:30,240 --> 00:06:35,220
I'll make use of push and then I'll push the new post our pass into this function.

96
00:06:35,310 --> 00:06:40,320
Now let's come down here and invoke this particular function.

97
00:06:41,040 --> 00:06:42,180
So here we go.

98
00:06:42,180 --> 00:06:46,940
Create post and remember I need pass in the post I want to create.

99
00:06:46,950 --> 00:06:52,490
I'm going to pass in an object because this record are arrays of objects.

100
00:06:52,500 --> 00:07:00,180
So I need to map the same semantic or syntax how my object is created so it inside my create post.

101
00:07:00,180 --> 00:07:02,630
Here I'll pass in an object.

102
00:07:02,640 --> 00:07:10,410
Then the title of my post I want to create is going to be as title for.

103
00:07:10,860 --> 00:07:20,250
And then the description of this post description is going to be my description for.

104
00:07:20,310 --> 00:07:24,050
Now, when I serve this function, what is going to happen?

105
00:07:24,060 --> 00:07:29,310
Well, are we going to have the newly added post or not?

106
00:07:29,730 --> 00:07:30,980
So look at the flow here.

107
00:07:30,990 --> 00:07:32,790
Remember how JavaScript works.

108
00:07:32,790 --> 00:07:34,410
It's read from top to bottom.

109
00:07:34,680 --> 00:07:42,640
So it means that by the time the first post is being called, we haven't added the new post down here.

110
00:07:42,660 --> 00:07:43,620
So if I.

111
00:07:43,620 --> 00:07:45,840
SERVAIS Now let's check the console.

112
00:07:45,870 --> 00:07:50,370
If I refresh it, we see that I still see three posts in the mix.

113
00:07:50,400 --> 00:07:56,400
This means that by the time we add a new post, this function has been called again.

114
00:07:56,400 --> 00:07:58,650
Until this point there is no callback.

115
00:07:58,710 --> 00:08:05,170
But if we see the problem that we are facing here because after function then we also create a post.

116
00:08:05,190 --> 00:08:11,700
What we want to do is that, well, let's assume that this function is going to take some time to create.

117
00:08:11,880 --> 00:08:18,310
For the meantime, we can come here and then console.log the post that we have.

118
00:08:18,330 --> 00:08:19,710
And let me show you something.

119
00:08:20,100 --> 00:08:20,790
All right.

120
00:08:21,090 --> 00:08:24,600
So this function now, let me comment this once.

121
00:08:24,630 --> 00:08:28,230
Right now there is no fetch post, but instead inside the crate.

122
00:08:28,230 --> 00:08:30,000
That's where I'm console.log in the post.

123
00:08:30,000 --> 00:08:31,470
I want to show you something here.

124
00:08:31,590 --> 00:08:34,510
Now you see that I have for post here?

125
00:08:34,530 --> 00:08:39,440
Because right now, after creating after pushing them, you console.log.

126
00:08:39,450 --> 00:08:40,770
This is a normal flow.

127
00:08:41,039 --> 00:08:45,810
But let's assume that we are going to mimic this saving or post.

128
00:08:45,810 --> 00:08:47,910
Let's say that we're going to take some time.

129
00:08:48,030 --> 00:08:48,510
Right?

130
00:08:48,510 --> 00:08:52,890
So we're going to use set timeout to implement this particular logic.

131
00:08:53,100 --> 00:08:54,540
So here you go.

132
00:08:55,470 --> 00:08:55,890
Perfect.

133
00:08:55,890 --> 00:08:58,980
So I'm going to make use of set timeout.

134
00:08:58,980 --> 00:09:06,390
And remember, we've talked about this before and this function takes in a callback as a first element.

135
00:09:06,390 --> 00:09:11,090
And second is the time this function needed to execute.

136
00:09:11,100 --> 00:09:14,610
I'm going to use 5 seconds, which is 5000 milliseconds.

137
00:09:14,760 --> 00:09:19,320
So inside my function body of my callback, I'm going to paste that.

138
00:09:19,350 --> 00:09:19,890
Perfect.

139
00:09:19,890 --> 00:09:22,440
Now, if I save it, have a look.

140
00:09:22,770 --> 00:09:30,330
You can see that by the time create function called, it just prints out the existing post, which is

141
00:09:30,330 --> 00:09:31,830
this three posts here.

142
00:09:31,920 --> 00:09:36,000
That is why we have three posts when called the function.

143
00:09:36,090 --> 00:09:42,720
So after 5 seconds where 5 seconds has elapsed but we don't see the post that we have created.

144
00:09:42,930 --> 00:09:43,890
Do you remember?

145
00:09:43,920 --> 00:09:45,300
Have a look here.

146
00:09:45,330 --> 00:09:47,760
That is why callback comes into play.

147
00:09:47,760 --> 00:09:54,610
Because this particular function needs some time before it can achieve what it needs.

148
00:09:54,630 --> 00:09:58,890
So how are we going to do it for the meantime, let's remove this one.

149
00:09:59,100 --> 00:10:02,880
So what we want to do is that now let me refresh it.

150
00:10:02,880 --> 00:10:09,480
And now let me call my function here, which is fetch post here, up here, bring it back and that.

151
00:10:09,810 --> 00:10:12,480
So let me save it and let's check in the console.

152
00:10:12,510 --> 00:10:17,970
You can see that we have the first function call of fetch post and that is about fetching.

153
00:10:17,970 --> 00:10:21,000
Post is fetching in see three posts in that.

154
00:10:21,000 --> 00:10:21,540
Perfect.

155
00:10:21,540 --> 00:10:26,110
So how are we going to make use of callback to call the function again?

156
00:10:26,130 --> 00:10:33,900
So what we want to do is that we want to call the fetch post function again after we create a post that

157
00:10:33,900 --> 00:10:34,950
is after 5 seconds.

158
00:10:34,960 --> 00:10:36,090
So here you go.

159
00:10:36,270 --> 00:10:43,260
So if you look at the function that needs some time to execute and for this one, it is this particular

160
00:10:43,260 --> 00:10:46,020
function that needs some time to execute.

161
00:10:46,110 --> 00:10:51,480
So in that case, we are going to pass in another element called callback.

162
00:10:52,840 --> 00:10:54,240
We can name in whatever you want.

163
00:10:54,250 --> 00:10:55,990
Call back or man call back or.

164
00:10:55,990 --> 00:11:00,750
CB But conventionally we normally use what is called CB perfect.

165
00:11:00,760 --> 00:11:06,580
Now it means that this function needs to activate when we call it.

166
00:11:07,090 --> 00:11:13,140
But when invoking down here for the meantime, you see that we pass in only one argument.

167
00:11:13,150 --> 00:11:19,750
That is a post that I want to create, but this function needs to augment my post and then callback

168
00:11:19,750 --> 00:11:20,610
function here.

169
00:11:20,620 --> 00:11:27,640
So here because a function I can pass in any function, whether it was function or a function with the

170
00:11:27,640 --> 00:11:27,880
name.

171
00:11:27,880 --> 00:11:34,300
So here I'm going to use a normal function here and now as a second argument to my function as that.

172
00:11:34,600 --> 00:11:36,610
So here I can console.log.

173
00:11:36,610 --> 00:11:38,960
Let's say that I.

174
00:11:41,800 --> 00:11:50,530
A callback and I will be called after 5 seconds.

175
00:11:50,530 --> 00:11:53,080
So when I serve it, have a look.

176
00:11:53,080 --> 00:11:55,150
When I save this function, let's check.

177
00:11:55,150 --> 00:11:56,650
Let's count from 1 to 5.

178
00:11:56,860 --> 00:12:05,830
One, two, three, four, five, six, seven, eight.

179
00:12:05,860 --> 00:12:08,830
You can see we can count and count and count.

180
00:12:08,830 --> 00:12:11,890
This function is being called y.

181
00:12:11,980 --> 00:12:18,550
The problem is that we are not making use of the function we pass in here as an argument because it's

182
00:12:18,550 --> 00:12:21,760
a function unless you call it inside this function.

183
00:12:21,760 --> 00:12:27,430
So here we are going to call the function inside set time timeline because you want to call this function

184
00:12:27,430 --> 00:12:28,420
after 5 seconds.

185
00:12:28,420 --> 00:12:30,610
So here invoke.

186
00:12:31,390 --> 00:12:32,800
Invoke callback.

187
00:12:33,950 --> 00:12:35,050
So here we go.

188
00:12:35,150 --> 00:12:37,730
Callback as a function as that.

189
00:12:37,730 --> 00:12:45,270
So when I save it, let's count one, two, three, four and five.

190
00:12:45,290 --> 00:12:45,800
We see that.

191
00:12:45,800 --> 00:12:46,460
Yes.

192
00:12:46,460 --> 00:12:56,210
Now we have our callback being called, which means that we can call our fetch post again inside this

193
00:12:56,210 --> 00:12:57,740
particular function when called.

194
00:12:57,740 --> 00:13:04,910
And so for this one, you could see that we are not calling this function, but instead it is this particular

195
00:13:04,910 --> 00:13:08,000
function which is calling our callback here.

196
00:13:08,000 --> 00:13:14,630
So one key note about callback is that we don't need to call the function by ourself, but instead the

197
00:13:14,630 --> 00:13:19,730
main function will call the callback for you because we don't know when is going to be ready.

198
00:13:19,910 --> 00:13:26,810
So with this particular in mind now we can remove this one and then call our.

199
00:13:28,540 --> 00:13:30,220
Our fetch puts them up here.

200
00:13:30,220 --> 00:13:33,670
So here we're going to be fetch post again.

201
00:13:33,670 --> 00:13:38,620
Don't call it buy or sell, but instead let the main function call it for us.

202
00:13:38,620 --> 00:13:39,820
So when I save it.

203
00:13:39,820 --> 00:13:40,690
Now have a look.

204
00:13:41,110 --> 00:13:44,620
After 5 seconds, you're going to see four posts in the array list.

205
00:13:44,620 --> 00:13:45,910
Count one, two, three, four.

206
00:13:45,910 --> 00:13:50,620
And indeed you see that we have four posts in the midst.

207
00:13:50,650 --> 00:13:52,540
It's because of callback.

208
00:13:52,600 --> 00:13:55,510
You see how callback is really important and awesome.

209
00:13:55,510 --> 00:14:01,930
So after 5 seconds we got back our newly added post, which is This one's very good.

210
00:14:01,960 --> 00:14:04,780
So that's how callback is really important.

211
00:14:04,810 --> 00:14:11,350
In the upcoming videos, I'm going to use different logic or promise to improve this particular syntax.

212
00:14:11,350 --> 00:14:14,470
So let's see what we can do in the next video.