Skip to content

Commit c83f450

Browse files
atapasatapas
committed
(feat) Day 27 Event Loop
1 parent 9ec5fa2 commit c83f450

File tree

6 files changed

+299
-0
lines changed

6 files changed

+299
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,4 @@ I am an independent educator and open-source enthusiast who creates meaningful p
6060
- **`Day 24: Master JavaScript async/await & Simplify Promises Like a PRO`** - [Watch Video](https://youtu.be/WQdCffdPPKI) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-24/README.md)
6161
- **`Day 25: JavaScript fetch() Explained Like Never Before`** - [Watch Video](https://www.youtube.com/watch?v=G3oPZSvrO9w) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-25/README.md)
6262
- **`Day 26: 6 Common Mistakes with JavaScript Promises & Async Code`** - [Watch Video](https://youtu.be/c_zcXUz1neo) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-26/README.md)
63+
- **`Day 27: How Your Async Code Works | JavaScript Event Loop Simplified!`** - [Watch Video](https://youtu.be/4IYcwOfW3BM) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-27/README.md)

‎day-27/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Day 27 - 40 Days of JavaScript - Event Loop
2+
3+
## **🎯 Goal of This Lesson**
4+
5+
- ✅ The Chef’s Story
6+
- ✅ Functions and Call Stack
7+
- ✅ Async Code
8+
- ✅ Event Loop
9+
- ✅ Callback Queue
10+
- ✅ Job Queue
11+
- ✅ Tasks and What’s Next?
12+
13+
## 🫶 Support
14+
15+
Your support means a lot.
16+
17+
- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
18+
- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
19+
20+
> Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
21+
22+
### 🤝 Sponsor My Work
23+
24+
I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
25+
26+
## Video
27+
28+
Here is the video for you to go through and learn:
29+
30+
[![day-27](./banner.png)](https://youtu.be/4IYcwOfW3BM "Video")

‎day-27/banner.png

904 KB
Loading

‎day-27/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Event Loop</title>
7+
<script defer src="./index.js"></script>
8+
</head>
9+
<body>
10+
<h1>40 Days of JavaScript - Event Loop</h1>
11+
</body>
12+
</html>

‎day-27/index.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// JavaScript is Synchronous
2+
// There can be async behaviours
3+
// - With Browser APIs/Web APIs - setTimeout, setInterval
4+
// - With Promises
5+
// - With Event Handlers
6+
7+
// Event Loop
8+
// - Call Stack
9+
// - Web APIs
10+
// - Callback Queue:
11+
// - MicroTask Queue/Job Queue:
12+
// - Event Loop:
13+
14+
function f1() {
15+
console.log("f1");
16+
}
17+
18+
function f2() {
19+
console.log("f2");
20+
}
21+
22+
function main() {
23+
console.log("main");
24+
setTimeout(f1, 0);
25+
new Promise((resolve, reject) => {
26+
resolve("I am a promise!");
27+
}).then((resolve) => console.log(resolve));
28+
f2();
29+
}
30+
main();
31+
32+

‎day-27/task.md

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
# Tasks
2+
3+
Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript".
4+
5+
> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console.
6+
7+
## 1. What's the output of the code below?
8+
9+
```js
10+
function f1() {
11+
console.log('f1');
12+
}
13+
14+
function f2() {
15+
console.log('f2');
16+
}
17+
18+
function f3() {
19+
console.log('f3');
20+
}
21+
22+
function f4() {
23+
console.log('f4');
24+
}
25+
26+
console.log("Let's do it!");
27+
28+
setTimeout(function() {f1();}, 0);
29+
30+
f4();
31+
32+
setTimeout(function() {f2();}, 5000);
33+
34+
setTimeout(function() {f3();}, 3000);
35+
```
36+
37+
Options are,
38+
39+
- Let's do it!, f4, f1, f3, f2
40+
- Let's do it!, f1, f3, f2, f4
41+
- Let's do it!, f1, f2, f3, f4
42+
- Let's do it!, f1, f4, f2, f3
43+
44+
## Example Answer: Let's do it!, f4, f1, f3, f2
45+
46+
Explanation:
47+
48+
- "Let's do it!" is executed by Execution Stack
49+
- f1() calls browser API, so gets added to Callback Queue
50+
- f4() gets added to Execution Stack and is executed
51+
- Event loop finds a callback function f1() in callback queue & executes it
52+
- f2() calls browser API and gets added to Callback Queue. Similarly f3() is added to callback queue
53+
- Now there is nothing in Execution Stack, so event loop checks & finds f2() & - f3() callback functions in callback queue
54+
- f3() goes back into the stack after timeout, and gets executed
55+
- f2() too goes back into the stack after timeout, and gets executed
56+
57+
## 2. What's the output of the code below?
58+
59+
```js
60+
function f1() {
61+
console.log('f1');
62+
}
63+
64+
console.log("Let's do it!");
65+
66+
setTimeout(function() {console.log('in settimeout');}, 0);
67+
68+
f1();
69+
f1();
70+
f1();
71+
f1();
72+
```
73+
74+
Options are,
75+
76+
- Let's do it!, in settimeout, f1, f1, f1, f1
77+
- Let's do it!, f1, f1, f1, f1, in settimeout
78+
- Let's do it!, f1, , in settimeout, f1, f1, f1
79+
80+
## 3. Which statements are `true`? Select multiple
81+
82+
- [ ] JavaScript is single-threaded
83+
- [ ] By default, JavaScript is synchronous
84+
- [ ] Only promises make JavaScript asynchronous
85+
- [ ] All function callbacks are asynchronous
86+
87+
## 4. Which statement is `true`? Select Only one
88+
89+
- (_) JavaScript Function Execution Stack(Call Stack) never gets empty.
90+
- (_) The job queue gets higher priority than the callback queue.
91+
- (_) The only job of Event Loop is to manage the Call Stack
92+
- (_) The StackOverflow exception is random.
93+
94+
### 5. Guess the output
95+
96+
```js
97+
const tom = () => console.log('Tom');
98+
99+
const jerry = () => console.log('Jerry');
100+
101+
const cartoon = () => {
102+
console.log('Cartoon');
103+
104+
setTimeout(tom, 5000);
105+
106+
new Promise((resolve, reject) =>
107+
resolve('should it be right after Tom, before Jerry?')
108+
).then(resolve => console.log(resolve))
109+
110+
jerry();
111+
}
112+
113+
cartoon();
114+
```
115+
116+
Options are,
117+
118+
- Cartoon, Jerry, should it be right after Tom, before Jerry?, tom
119+
- Cartoon, Tom, Jerry, should it be right after Tom, before Jerry?,
120+
- Cartoon, Tom, should it be right after Tom, before Jerry?, Jerry
121+
- Error
122+
123+
### 6. Guess the output
124+
125+
```js
126+
const tom = () => console.log('Tom');
127+
const jerry = () => console.log('Jerry');
128+
const doggy = () => console.log('Doggy');
129+
130+
const cartoon = () => {
131+
console.log('Cartoon');
132+
133+
setTimeout(tom, 50);
134+
setTimeout(doggy, 30);
135+
136+
new Promise((resolve, reject) =>
137+
resolve('I am a Promise, right after tom and doggy! Really?')
138+
).then(resolve => console.log(resolve));
139+
new Promise((resolve, reject) =>
140+
resolve('I am a Promise after Promise!')
141+
).then(resolve => console.log(resolve));
142+
143+
jerry();
144+
}
145+
146+
cartoon();
147+
```
148+
149+
Options are,
150+
151+
- Cartoon, Jerry, I am a Promise, right after tom and doggy! Really?, I am a Promise after Promise!, , Tom, Doggy
152+
- Cartoon, Jerry, I am a Promise after Promise!, I am a Promise, right after tom and doggy! Really?, Doggy, Tom
153+
- Cartoon, Jerry, I am a Promise, right after tom and doggy! Really?, I am a Promise after Promise!, Doggy, Tom
154+
- Cartoon, Tom, Doggy, I am a Promise, right after tom and doggy! Really?, I am a Promise after Promise!, Jerry
155+
- None of the above.
156+
157+
### 7. Guess the output
158+
159+
```js
160+
const f1 = () => console.log('f1');
161+
const f2 = () => console.log('f2');
162+
const f3 = () => console.log('f3');
163+
const f4 = () => console.log('f4');
164+
165+
f4();
166+
167+
setTimeout(f1, 0);
168+
169+
new Promise((resolve, reject) => {
170+
resolve('Boom');
171+
}).then(result => console.log(result));
172+
173+
setTimeout(f2, 2000);
174+
175+
new Promise((resolve, reject) => {
176+
resolve('Sonic');
177+
}).then(result => console.log(result));
178+
179+
setTimeout(f3, 0);
180+
181+
new Promise((resolve, reject) => {
182+
resolve('Albert');
183+
}).then(result => console.log(result));
184+
```
185+
186+
Options are,
187+
188+
- f4, Boom, Sonic, Albert, f1, f3, f2
189+
- f4, f1, Boom, f2, Sonic, f3, Albert
190+
- f4, Boom, Sonic, Albert, f3, f1, f2
191+
- f4, Boom, Sonic, Albert, f1, f2, f3
192+
193+
### 8. Guess the output
194+
195+
```js
196+
const f1 = () => {
197+
console.log('f1');
198+
f2();
199+
}
200+
const f2 = () => console.log('f2');
201+
const f3 = () => console.log('f3');
202+
const f4 = () => console.log('f4');
203+
204+
f4();
205+
206+
setTimeout(f1, 0);
207+
208+
new Promise((resolve, reject) => {
209+
resolve('Sonic');
210+
}).then(result => console.log(result));
211+
212+
setTimeout(f3, 0);
213+
214+
new Promise((resolve, reject) => {
215+
resolve('Albert');
216+
}).then(result => console.log(result));
217+
```
218+
219+
Options are,
220+
221+
- f4, f1, f2, Sonic, f3, Albert
222+
- f4, Sonic, Albert, f3, f1, f2
223+
- f4, Sonic, Albert, f1, f2, f3
224+
- f4, Albert, Sonic, f1, f2, f3

0 commit comments

Comments
 (0)