JavaScript concepts I want to understand (JS event loop)
Tags: javascript, codenewbie, discuss, beginners
Published: 2020-01-30 03:04:41

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.

3. **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.

4. **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.

5. **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
2. JavaScript engine threads
3. 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*.