Call Stack, Event Loops, micro task, and macro task | Pro JavaScript tips

In this video, we will take a look at Call Stack and Event Loop in Javascript. Also, we will work with Microtasks and Macrotasks and see what is behind these concepts. This can be a good JavaScript Tutorial For Beginners.


As you know, JavaScript is a single-thread language. So, It is really important to know how our codes will be running in JavaScript when we have some complicated codes and time-consuming functions. What will happen when a part of our codes may take a long time to complete? Should it block the thread and the entire process of our codes?

Of course No!!!!!!

We need to process them asynchronously. Therefore, the other codes will be processing and nothing will be blocked. And this is the goal of this video

In this video, we will take a look at some key concepts of JavaScript language such as:
• Call Stack
• Event Loop
• Micro-tasks
• Macro-tasks

Call Stack
The call stack is a mechanism that is responsible for keeping tracking off calling different functions. When a function is called, the JavaScript interpreter will add it to the call stack and run it. If this function calls another function (which happens a lot), Interpreter will add the called function to the call stack. We know that a stack is a LIFO Data Structure. LIFO stands for Last in, First out. So, the called function will be processed and after finishing the process, the interpreter takes it off the stack and resumes the execution of the previous function. This cycle will be repeated until the entire function gets processed.


Event Loop

We know that JavaScript is a single-thread language. In the background, it handles a lot of requests using an event loop.
The JavaScript event loop is a mechanism that allows the execution of JavaScript code to be non-blocking. It works by continuously executing tasks one by one from the task queue and allowing other codes to run between them. This means that a code can continue to run even if there is a long-running task being executed.

Micro-tasks and Macro-tasks

On the other hand, Macrotasks are larger, lower-priority tasks that are executed after all microtasks have been completed. Examples of macrotasks include setTimeout, setInterval, and UI rendering. Macrotasks are executed only after all microtasks have been completed.

Difference between Micro-tasks and Macro-tasks
Now that we understand the basic differences between microtasks and macrotasks, let's take a closer look at the key differences between them:
• Microtasks are executed before any other tasks, which means that they have a higher priority.
• Macrotasks are executed only after all microtasks have been completed, which means that they have a lower priority.
• Microtasks are typically used for short, quick tasks that need to be executed immediately.
• Macrotasks are typically used for longer, more complex tasks that can wait until all microtasks have been completed.


Conclusion
In conclusion, the difference between microtasks and macrotasks in the JavaScript event loop is crucial for optimizing your JavaScript code.
By understanding the priorities and use cases of each type of task, you can make the most of the JavaScript event loop and ensure that your code is running efficiently.
Thank you for watching, and I hope you found this video helpful.

- (00:00) Introduction
- (00:35) Video Structure
- (00:45) Call Stack definition
- (01:27) Call Stack Examples
- (08:14) Event Loop
- (09:35) Microtasks and Macrotasks
- (11:09) Examples of Event Loop, Microtasks and Macrotasks
- (20:04) Conclusion

🌎 Me:

💖 Hope you enjoy it 💖
💖 If you loved this JavaScript Call Stack, Event Loops, micro task, and macro task tutorial, leave comments, like, and subscribe 💖