> For the complete documentation index, see [llms.txt](https://bharat-tiwari.gitbook.io/our-tech-journal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bharat-tiwari.gitbook.io/our-tech-journal/javascript/javascript-runtime-env.md).

# Javascript Runtime Env

<mark style="color:purple;">JS</mark> <mark style="color:purple;"></mark>*<mark style="color:purple;">runtime environment</mark>* <mark style="color:purple;"></mark><mark style="color:purple;">is where our javascript code will be executed.</mark>

JS Runtime (as implemented in a browser) comprises of below modules or parts or components.

* Web APIs
* JS Engine(like Chromium's v8 engine)
* Call or Execution Context stack
* Event loop / Callback Queue
* Microtask Queue

Javascript => Single Threaded language\
&#x20;                   \=> which means it has a single call stack\
&#x20;                     \=> it can do one thing at a time

### JS Engine

\= program which compiles, parses and executes a Javascript code

as it starts executing a JS code, it will create:

&#x20;\=> a <mark style="color:orange;">Memory Heap</mark> and a <mark style="color:orange;">Call stack</mark>

<mark style="color:orange;">Memory Heap</mark> = an unstructured memory pool

&#x20;                        \= where it will store variables, objects from the code

<mark style="color:orange;">Call Stack</mark> = stack of code instructions that JS Engine finds in the code when it starts executing it from top to bottom

&#x20;                \= where JS code gets executed using execution contexts

&#x20;                \= a stack of Execution contexts = a Global Env. Context + other execution contexts as they are created and removed for each function or curly bracket pairs

| Web API                                                                                                                                                                                                                                                                                                                       |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>= an API of functions to allow javascript code to interact with browser or use browser's functionality (for e.g.  console, setTimeout, the DOM object and its various functions, fetch etc.)</p><p></p><p>= provided by browser</p><p></p><p>= therefore, Web API objects and functions can be used in javascript code</p> |

| Callback Queue                                                                            |
| ----------------------------------------------------------------------------------------- |
| = a data structure that contains all the callback functions that are ready to be executed |

| MicroTask Queue                                                                                                          |
| ------------------------------------------------------------------------------------------------------------------------ |
| It stores special callback functions which have higher priority than the callback function waiting in the callback queue |