tapascript · atapas · May 25, 2025 · May 22, 2025
diff --git a/README.md b/README.md
@@ -60,3 +60,4 @@ I am an independent educator and open-source enthusiast who creates meaningful p
 - **`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)
 - **`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)
 - **`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)
+- **`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)
diff --git a/day-27/README.md b/day-27/README.md
@@ -0,0 +1,30 @@
+# Day 27 - 40 Days of JavaScript - Event Loop
+
+## **🎯 Goal of This Lesson**
+
+- ✅ The Chef’s Story
+- ✅ Functions and Call Stack
+- ✅ Async Code
+- ✅ Event Loop
+- ✅ Callback Queue
+- ✅ Job Queue
+- ✅ Tasks and What’s Next?
+
+## 🫶 Support
+
+Your support means a lot.
+
+- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
+- 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.
+
+    > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
+
+### 🤝 Sponsor My Work
+
+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)**.
+
+## Video
+
+Here is the video for you to go through and learn:
+
+[![day-27](./banner.png)](https://youtu.be/4IYcwOfW3BM "Video")
diff --git a/day-27/banner.png b/day-27/banner.png
diff --git a/day-27/index.html b/day-27/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Event Loop</title>
+    <script defer src="./index.js"></script>
+</head>
+<body>
+    <h1>40 Days of JavaScript - Event Loop</h1>
+</body>
+</html>
diff --git a/day-27/index.js b/day-27/index.js
@@ -0,0 +1,32 @@
+// JavaScript is Synchronous
+// There can be async behaviours
+// - With Browser APIs/Web APIs - setTimeout, setInterval
+// - With Promises
+// - With Event Handlers
+
+// Event Loop
+// - Call Stack
+// - Web APIs
+// - Callback Queue:
+// - MicroTask Queue/Job Queue:
+// - Event Loop:
+
+function f1() {
+    console.log("f1");
+}
+
+function f2() {
+    console.log("f2");
+}
+
+function main() {
+    console.log("main");
+    setTimeout(f1, 0);
+    new Promise((resolve, reject) => {
+        resolve("I am a promise!");
+    }).then((resolve) => console.log(resolve));
+    f2();
+}
+main();
+
+
diff --git a/day-27/task.md b/day-27/task.md
@@ -0,0 +1,224 @@
+# Tasks
+
+Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript".
+
+> **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.
+
+## 1. What's the output of the code below?
+
+```js
+function f1() {
+    console.log('f1');
+}
+
+function f2() {
+    console.log('f2');
+}
+
+function f3() {
+    console.log('f3');
+}
+
+function f4() {
+    console.log('f4');
+}
+
+console.log("Let's do it!");
+
+setTimeout(function() {f1();}, 0);
+
+f4();
+
+setTimeout(function() {f2();}, 5000);
+
+setTimeout(function() {f3();}, 3000);
+```
+
+Options are,
+
+- Let's do it!, f4, f1, f3, f2
+- Let's do it!, f1, f3, f2, f4
+- Let's do it!, f1, f2, f3, f4
+- Let's do it!, f1, f4, f2, f3
+
+## Example Answer: Let's do it!, f4, f1, f3, f2
+
+Explanation:
+
+- "Let's do it!" is executed by Execution Stack
+- f1() calls browser API, so gets added to Callback Queue
+- f4() gets added to Execution Stack and is executed
+- Event loop finds a callback function f1() in callback queue & executes it
+- f2() calls browser API and gets added to Callback Queue. Similarly f3() is added to callback queue
+- Now there is nothing in Execution Stack, so event loop checks & finds f2() & - f3() callback functions in callback queue
+- f3() goes back into the stack after timeout, and gets executed
+- f2() too goes back into the stack after timeout, and gets executed
+
+## 2. What's the output of the code below?
+
+```js
+function f1() {
+    console.log('f1');
+}
+
+console.log("Let's do it!");
+
+setTimeout(function() {console.log('in settimeout');}, 0);
+
+f1();
+f1();
+f1();
+f1();
+```
+
+Options are,
+
+- Let's do it!, in settimeout, f1, f1, f1, f1
+- Let's do it!, f1, f1, f1, f1, in settimeout
+- Let's do it!, f1, , in settimeout, f1, f1, f1
+
+## 3. Which statements are `true`? Select multiple
+
+- [ ] JavaScript is single-threaded
+- [ ] By default, JavaScript is synchronous
+- [ ] Only promises make JavaScript asynchronous
+- [ ] All function callbacks are asynchronous
+
+## 4. Which statement is `true`? Select Only one
+
+- (_) JavaScript Function Execution Stack(Call Stack) never gets empty.
+- (_) The job queue gets higher priority than the callback queue.
+- (_) The only job of Event Loop is to manage the Call Stack
+- (_) The StackOverflow exception is random.
+
+### 5. Guess the output
+
+```js
+const tom = () => console.log('Tom');
+
+const jerry = () => console.log('Jerry');
+
+const cartoon = () => {
+  console.log('Cartoon');
+
+  setTimeout(tom, 5000);
+
+  new Promise((resolve, reject) =>
+    resolve('should it be right after Tom, before Jerry?')
+  ).then(resolve => console.log(resolve))
+
+  jerry();
+}
+
+cartoon();
+```
+
+Options are,
+
+- Cartoon, Jerry, should it be right after Tom, before Jerry?, tom
+- Cartoon, Tom, Jerry, should it be right after Tom, before Jerry?,
+- Cartoon, Tom, should it be right after Tom, before Jerry?, Jerry
+- Error
+
+### 6. Guess the output
+
+```js
+const tom = () => console.log('Tom');
+const jerry = () => console.log('Jerry');
+const doggy = () => console.log('Doggy');
+
+const cartoon = () => {
+  console.log('Cartoon');
+
+  setTimeout(tom, 50);
+  setTimeout(doggy, 30);
+
+  new Promise((resolve, reject) =>
+    resolve('I am a Promise, right after tom and doggy! Really?')
+  ).then(resolve => console.log(resolve));
+  new Promise((resolve, reject) =>
+    resolve('I am a Promise after Promise!')
+  ).then(resolve => console.log(resolve));
+
+  jerry();
+}
+
+cartoon();
+```
+
+Options are,
+
+- Cartoon, Jerry, I am a Promise, right after tom and doggy! Really?, I am a Promise after Promise!, , Tom, Doggy
+- Cartoon, Jerry, I am a Promise after Promise!, I am a Promise, right after tom and doggy! Really?, Doggy, Tom
+- Cartoon, Jerry, I am a Promise, right after tom and doggy! Really?, I am a Promise after Promise!, Doggy, Tom
+- Cartoon, Tom, Doggy, I am a Promise, right after tom and doggy! Really?, I am a Promise after Promise!, Jerry
+- None of the above.
+
+### 7. Guess the output
+
+```js
+const f1 = () => console.log('f1');
+const f2 = () => console.log('f2');
+const f3 = () => console.log('f3');
+const f4 = () => console.log('f4');
+
+f4();
+
+setTimeout(f1, 0);
+
+new Promise((resolve, reject) => {
+    resolve('Boom');
+}).then(result => console.log(result));
+
+setTimeout(f2, 2000);
+
+new Promise((resolve, reject) => {
+    resolve('Sonic');
+}).then(result => console.log(result));
+
+setTimeout(f3, 0);
+
+new Promise((resolve, reject) => {
+    resolve('Albert');
+}).then(result => console.log(result));
+```
+
+Options are,
+
+- f4, Boom, Sonic, Albert, f1, f3, f2
+- f4, f1, Boom, f2, Sonic, f3, Albert
+- f4, Boom, Sonic, Albert, f3, f1, f2
+- f4, Boom, Sonic, Albert, f1, f2, f3
+
+### 8. Guess the output
+
+```js
+const f1 = () => {
+    console.log('f1');
+    f2();
+}
+const f2 = () => console.log('f2');
+const f3 = () => console.log('f3');
+const f4 = () => console.log('f4');
+
+f4();
+
+setTimeout(f1, 0);
+
+new Promise((resolve, reject) => {
+    resolve('Sonic');
+}).then(result => console.log(result));
+
+setTimeout(f3, 0);
+
+new Promise((resolve, reject) => {
+    resolve('Albert');
+}).then(result => console.log(result));
+```
+
+Options are,
+
+- f4, f1, f2, Sonic, f3, Albert
+- f4, Sonic, Albert, f3, f1, f2
+- f4, Sonic, Albert, f1, f2, f3
+- f4, Albert, Sonic, f1, f2, f3