JavaScript concepts I want to understand (JS event loop)

One of the most frustrating things about learning how to code is the feeling that everyone is moving at a much faster pace than you are. With that in mind, I thought it would be fun to add a twist to my JavaScript core concept series.

I will share my current understanding of topics I've struggled to grasp and then incorporate everyone's feedback and/or criticisms into the post.

Disclaimer: my understanding of these concepts may be incomplete; so please refer back to this post for continuous updates. Also, don't hesitate to chime in with your own questions and feedback!

1. JavaScript engine:

   • Powers your JavaScript code and translates your code into machine code that can be executed by your browser.
   • Each modern browser ships with its own JavaScript engine. For example, Chrome has its V8 Engine and Mozilla has SpiderMonkey.

2. JavaScript runtime:

   • Runtime refers to when your JavaScript code is being compiled or executed.
   • It used to throw me off when people referred to the JavaScript runtime and the JavaScript engine separately. But these two work together-- the JavaScript engine runs your code at runtime.

3. Call stack:

   • Like the name implies, the call stack is a stack (first in, last out) that lines up your code (functions, logs) to be executed at runtime.
   • When a function is called, that function gets added to the call stack. Because JavaScript is single threaded, each function must wait for the prior function to finish running.

4. Event queue: The event queue holds any callback functions that have been triggered by a browser event. This can be from a mouse click or a form submission.

5. Event loop:

   • The event loop sits between the call stack and the event queue. When an event is triggered, the event loop moves the function from the event queue (where it was waiting) to the call stack (to be executed).
   • Unlike the call stack, goes one by one, the event loop only jumps into action when the call stack is empty. This means it must wait until the call stack is cleared before moving an event call back from the event queue to the call stack.

6. Web APIs:

   • Web APIs are tools and libraries your browser makes available to you at runtime to help your code execute smoothly or communicate with your browser. Some common web APIs include (DOM) event listeners, Web Storage and timer functions like setTimeout().

Summary:

If asked in an interview, my response would be:

These 5 things exist within the JavaScript Runtime Environment.

• The JavaScript runtime environment holds the JavaScript engine which translates your JavaScript code into machine code at runtime. This happens in order starting with the function at the top of the call stack.
• Web APIs give your JavaScript code additional superpowers by providing tools to interact with the browser itself, as well as access third party libraries.
• Because JavaScript is single threaded, it relies on the event queue to line up event-triggered callback functions. Whenever the call stack is empty, the event loop moves any waiting event callbacks from the event queue to the call stack to be run.

I hope this blog post was helpful. And if you have a more refined way of answering this question, please let me know in the comments!

Similar concepts I want to tackle next:

1. the Heap
2. Microtasks vs macrotasks
3. Message queue
4. JavaScript engine threads
5. Garbage collection

NOTE: Writing these blogs is always fun because I start off knowing what to write only to find myself waning in confidence with additional word. By the end of the post, I find myself doubting my own existence. In fact, the title of this post quickly went from JS Concepts I think I understand to JS Concepts I want to understand.