1
00:00:00,300 --> 00:00:01,500
Welcome back.

2
00:00:01,530 --> 00:00:09,900
In this particular video, let's see how asynchronous programming or async code works behind the scene.

3
00:00:10,080 --> 00:00:15,630
Like I told you that we are going to revisit the event loop, course tag and the web API.

4
00:00:15,660 --> 00:00:17,520
So this is a time.

5
00:00:20,830 --> 00:00:25,960
So we are going to use a to call left hand flip dotcom.

6
00:00:25,960 --> 00:00:31,840
So if you visit latent flip dot com, you're going to have the beautiful website.

7
00:00:31,840 --> 00:00:36,300
And so I'll provide a link to this particular website.

8
00:00:36,310 --> 00:00:37,510
So let me click on.

9
00:00:37,510 --> 00:00:40,300
Okay, now here we go.

10
00:00:40,300 --> 00:00:48,160
So this too is going to help us to visualize what goes behind the scene when we run async code.

11
00:00:48,400 --> 00:00:55,450
So remember, before we get into that, let me take you through the interface for this particular tool.

12
00:00:55,870 --> 00:01:03,460
It will see that here is our text editor where we are going to write our own code and we have a section

13
00:01:03,460 --> 00:01:05,980
which is the cost tag.

14
00:01:05,980 --> 00:01:10,660
So the cost tag is part of the JavaScript V8 engine.

15
00:01:10,660 --> 00:01:13,020
We have course tag and we have the heap.

16
00:01:13,030 --> 00:01:16,750
And for the meantime we are going to stick to the course tag.

17
00:01:16,870 --> 00:01:22,450
So the course tag manages what the execution or function course.

18
00:01:22,450 --> 00:01:30,430
So it's kind of the structure that is used to track the execution of function calls and is used to keep

19
00:01:30,430 --> 00:01:38,560
track the order in which functions are caused or are made that the course tag meaning it manages which

20
00:01:38,560 --> 00:01:42,390
function is ready to be called that is it about the cost?

21
00:01:42,880 --> 00:01:46,050
And you remember you talk about the Web APIs.

22
00:01:46,480 --> 00:01:52,990
Now this is a time for me to explain to you in details what actually is the Web APIs?

23
00:01:53,320 --> 00:02:02,770
Again, Web APIs are not part of the core JavaScript language, but instead it is being built in into

24
00:02:02,770 --> 00:02:03,880
our browsers.

25
00:02:03,880 --> 00:02:12,790
So the browsers also have some methods that we can use in conjunction with JavaScript to run code successfully.

26
00:02:13,000 --> 00:02:21,040
Example of this web API is what you call the set timeout as we discussed and set interval for the mean

27
00:02:21,040 --> 00:02:23,710
time, we are going to stick to the set timeout.

28
00:02:23,710 --> 00:02:24,610
All right.

29
00:02:24,730 --> 00:02:31,750
And after that, we also have what is called callback queue as we discussed before.

30
00:02:31,750 --> 00:02:32,410
Right.

31
00:02:32,410 --> 00:02:38,410
So callback queue contains all the callbacks that are waiting to be executed.

32
00:02:38,530 --> 00:02:46,510
Remember that web API takes in callback functions so that callback will be put inside our callback queue.

33
00:02:47,110 --> 00:02:49,090
And what about the event loop?

34
00:02:49,090 --> 00:02:49,750
Right.

35
00:02:49,750 --> 00:02:51,880
The event loop is like a looker.

36
00:02:51,940 --> 00:02:57,970
Okay, so the event loop, this happens to implement non blocking code, right.

37
00:02:57,970 --> 00:03:05,650
So always the event loop takes callbacks from the callback queue and put them into the code stack.

38
00:03:06,220 --> 00:03:10,630
So always the event loop, always look inside the callback queue.

39
00:03:10,660 --> 00:03:15,790
If there is a function to be called, then to put it inside a code queue to be rendered.

40
00:03:15,820 --> 00:03:21,310
That is it about the cost tag, the web APIs and the callback queue.

41
00:03:21,520 --> 00:03:27,820
So let's write some code and see how all this component happens to write async code.

42
00:03:28,030 --> 00:03:34,030
So let's remove everything from this file and let's start from our clean sheet.

43
00:03:34,060 --> 00:03:40,810
Remember, we are going to use the exact code console.log and then let's say go to park and set timeout

44
00:03:40,810 --> 00:03:42,280
as simple function here.

45
00:03:42,550 --> 00:03:47,520
But one cool thing about this too is that we can use yes.

46
00:03:47,530 --> 00:03:49,030
Features like a real function.

47
00:03:49,030 --> 00:03:51,340
So I'm going to use normal function creation.

48
00:03:51,340 --> 00:03:52,590
This could work.

49
00:03:52,600 --> 00:03:55,270
So let's say that we have a function.

50
00:03:56,450 --> 00:03:57,530
A function.

51
00:03:58,720 --> 00:03:59,680
As.

52
00:04:00,540 --> 00:04:01,710
Go to.

53
00:04:03,650 --> 00:04:05,210
Go to park.

54
00:04:05,980 --> 00:04:16,269
And this function we're not taking anything but instead going to console.log console.log here as.

55
00:04:17,120 --> 00:04:18,589
Go to.

56
00:04:19,470 --> 00:04:20,279
Park.

57
00:04:20,399 --> 00:04:24,570
So our copy this one three times a two times one and two.

58
00:04:24,960 --> 00:04:27,840
And this one going to be go to.

59
00:04:28,770 --> 00:04:29,610
Bank.

60
00:04:30,390 --> 00:04:31,710
Go to bar.

61
00:04:32,870 --> 00:04:33,410
As that.

62
00:04:33,410 --> 00:04:36,200
So let's change this one to go to park.

63
00:04:36,350 --> 00:04:36,850
Okay.

64
00:04:36,860 --> 00:04:40,670
And then go to bank and then go to bar.

65
00:04:41,480 --> 00:04:42,260
Perfect.

66
00:04:42,290 --> 00:04:47,530
Now, when I call these functions, they are going to be executed in order.

67
00:04:47,540 --> 00:04:49,040
So here we go.

68
00:04:49,370 --> 00:04:51,560
Go to park over here.

69
00:04:52,350 --> 00:04:53,760
Go to park.

70
00:04:54,750 --> 00:04:55,830
As that.

71
00:04:56,220 --> 00:04:57,750
And next one I'm going to be.

72
00:04:57,750 --> 00:05:00,330
So let me copy this one and paste three times.

73
00:05:01,420 --> 00:05:03,190
As that go to park.

74
00:05:03,220 --> 00:05:05,920
That's why I'm going to be go to bank.

75
00:05:09,430 --> 00:05:11,890
And then that's why I'm going to be go to bar.

76
00:05:13,270 --> 00:05:14,320
Okay for this one.

77
00:05:14,320 --> 00:05:17,200
If you run it, you see the order for that one.

78
00:05:17,200 --> 00:05:19,810
I believe you know when to run in order.

79
00:05:19,870 --> 00:05:27,030
Go to park first and then go to bank second and then go to park and go to bar third.

80
00:05:27,040 --> 00:05:35,260
But let's try to call the go to bank after 5 seconds as we did so for this one, I want to put this

81
00:05:35,260 --> 00:05:36,760
one inside set.

82
00:05:36,760 --> 00:05:37,480
Timeout.

83
00:05:37,480 --> 00:05:38,620
So set.

84
00:05:39,950 --> 00:05:40,790
Time.

85
00:05:41,600 --> 00:05:47,960
Out my function, then I'm going to pass in my callback function this time around or remove the function

86
00:05:47,960 --> 00:05:55,970
call because I want this one to call it and I want to call this function, let's say after 5 seconds

87
00:05:56,390 --> 00:05:57,200
as that.

88
00:05:57,910 --> 00:06:03,700
Before we run this code, let's analyze it and see how it's going to be executed.

89
00:06:04,180 --> 00:06:04,930
All right.

90
00:06:04,930 --> 00:06:09,450
So we see that the first one will be called that is go to park.

91
00:06:09,460 --> 00:06:17,140
Then it will check that this function has a callback or nor is it a web API function or no.

92
00:06:17,170 --> 00:06:19,330
Then to put it on the code stack here.

93
00:06:20,440 --> 00:06:25,000
And the second function is what first we see is what's a timeout?

94
00:06:25,000 --> 00:06:26,980
And this function takes time to run.

95
00:06:26,980 --> 00:06:36,190
So JavaScript says that please web API, I cannot wait until this function is ready, otherwise it will

96
00:06:36,190 --> 00:06:37,450
block this function to code.

97
00:06:37,450 --> 00:06:41,740
So I'm going to give you this function to you when it is ready.

98
00:06:41,740 --> 00:06:45,880
Please put it back on the callback queue and then let event loop.

99
00:06:45,910 --> 00:06:48,310
Give me that callback to run.

100
00:06:49,360 --> 00:06:52,360
All right, so let's run this and see it visually.

101
00:06:52,360 --> 00:06:54,820
I think I make some typing mistake here.

102
00:06:54,920 --> 00:06:56,500
Supposed to be one K.

103
00:06:56,860 --> 00:06:58,240
All right, so have a look.

104
00:06:58,540 --> 00:07:01,480
When I click on Run, then let me pause.

105
00:07:02,100 --> 00:07:04,440
So let's see what is going on here.

106
00:07:04,560 --> 00:07:11,460
The first step is this is a function that's going to be called first because the first in the execution

107
00:07:11,840 --> 00:07:15,720
to see that it quickly put it on the cost tag.

108
00:07:15,960 --> 00:07:23,220
But it didn't put it inside a web API because this function call is not from web API or it has no callback.

109
00:07:23,490 --> 00:07:24,150
Perfect.

110
00:07:24,150 --> 00:07:27,270
So that's why we put it on the call stack at this port.

111
00:07:27,660 --> 00:07:34,770
So this for registration now this go to park has been registered into the core stack now is yet to be

112
00:07:34,770 --> 00:07:41,880
called so it locate the function key here is a function and now is going to register all the variables

113
00:07:41,880 --> 00:07:43,080
inside the function.

114
00:07:43,080 --> 00:07:51,210
Now it source what console.log with a function now is also put on the code stack as that now the function

115
00:07:51,210 --> 00:07:52,920
is ready to be executed.

116
00:07:52,920 --> 00:08:00,570
So when I click on when I click on resume and pause so this console.log has finished so it pop up from

117
00:08:00,570 --> 00:08:01,410
the stack.

118
00:08:01,410 --> 00:08:08,040
So now when I click on resume import, you see that now we don't have any function to be called.

119
00:08:08,040 --> 00:08:11,280
Now the next function call is this part.

120
00:08:11,310 --> 00:08:15,630
This is my set timeout and let's look at what is going to happen here before.

121
00:08:15,630 --> 00:08:20,190
If we click on it, you can see that this function is from web API.

122
00:08:20,190 --> 00:08:27,840
So it will put it inside Web API and it will wait out of 5 seconds, then put it here, then then loop

123
00:08:27,840 --> 00:08:30,150
will look through and then give you to the cost stack.

124
00:08:30,150 --> 00:08:36,330
So let's have a look when I click on resume pause.

125
00:08:36,659 --> 00:08:37,890
Great to see that.

126
00:08:37,890 --> 00:08:46,230
Now this function is ready to be called, but as soon as JavaScript sees that, this function will take

127
00:08:46,230 --> 00:08:51,150
some time and also this function is also a set timeout.

128
00:08:51,150 --> 00:08:58,590
So JavaScript will say that Please, I cannot wait 5 seconds before going to execute this.

129
00:08:58,590 --> 00:09:03,390
So Web API, I'm going to give you this function for you.

130
00:09:04,310 --> 00:09:05,000
Keep it.

131
00:09:05,150 --> 00:09:06,270
When it's ready.

132
00:09:06,290 --> 00:09:07,600
Give it to the course.

133
00:09:07,610 --> 00:09:08,090
Talk.

134
00:09:09,000 --> 00:09:12,510
Then when it's ready, the event loop will look here.

135
00:09:12,540 --> 00:09:18,720
If there is no core function to be called here that the event loop, the event loop will put it onto

136
00:09:18,720 --> 00:09:19,570
the core stack.

137
00:09:19,590 --> 00:09:26,440
So let's see when I click on resume, now we see that something is happening here.

138
00:09:26,460 --> 00:09:31,620
Now the go to bank has now been pulled inside my web API.

139
00:09:31,650 --> 00:09:33,090
Now see, that is loading.

140
00:09:33,120 --> 00:09:33,840
Have a look.

141
00:09:33,840 --> 00:09:35,160
Resume now.

142
00:09:35,190 --> 00:09:38,580
Waiting, loading, loading after 5 seconds.

143
00:09:38,610 --> 00:09:43,050
Now you see that it has been put on to the callback queue.

144
00:09:43,350 --> 00:09:46,830
So now the event loop here will look.

145
00:09:46,830 --> 00:09:52,220
If there is no function here to be called, then the event loop will now put this one on to it.

146
00:09:52,250 --> 00:09:55,030
So let's see how this function going to call.

147
00:09:55,140 --> 00:09:57,170
Have a look when I resume.

148
00:09:57,180 --> 00:09:59,280
Now go to bank.

149
00:09:59,610 --> 00:10:01,470
A go to bar resume.

150
00:10:02,430 --> 00:10:08,430
Nine say that it has put it on a course tag and now everything is yet to be run.

151
00:10:08,460 --> 00:10:13,500
When I resume it now, let's also see what is going to happen now.

152
00:10:13,500 --> 00:10:19,080
Go to park is going to run and let's see now everything pops up.

153
00:10:19,110 --> 00:10:20,280
You see, I just click again.

154
00:10:20,280 --> 00:10:21,990
That's why it's going over again.

155
00:10:21,990 --> 00:10:22,780
So that's the flow.

156
00:10:22,780 --> 00:10:24,450
Okay, let's see how nice.

157
00:10:24,450 --> 00:10:25,740
Now have we go?

158
00:10:25,770 --> 00:10:27,780
Let's go, let's go now.

159
00:10:27,780 --> 00:10:29,460
Let's see.

160
00:10:29,460 --> 00:10:31,590
It will finish up and then pop out from the coast.

161
00:10:32,100 --> 00:10:32,850
That is it.

162
00:10:32,850 --> 00:10:36,630
About the how is Cyncoed runs behind the scene?

163
00:10:36,900 --> 00:10:39,240
All right, so this one in mind.

164
00:10:39,240 --> 00:10:40,980
Let's continue from here.