<h2 id="heading-call-stack">Call Stack</h2>
<ol>
<li>A data structure which is a part of the JS Engine (e.g. Chrome V8)</li>
<li>Keeps track of the code which is currently being interpreted along with its origin</li>
</ol>
<h2 id="heading-external-apis">External APIs</h2>
<p>The JS Engine is single threaded meaning that it has one call stack and heap space (for object allocation). All code get executed synchronously in order. Since this is not always a good thing, the browser packages other capabilities apart from the JS Engine.</p>
<p>External APIs lets the JS Engine offload async tasks to the Browser runtime(using WebAPIs)/Node runtime(using C++ APIs) to achieve pseudo concurrency. When calling an External API a callback is to be provided. Once the execution of the External API is complete the callback code is loaded onto the callback queue.</p>
<h2 id="heading-callback-queue">Callback Queue</h2>
<ol>
<li>This is where all of the callbacks line up for execution</li>
<li>Since JS Engine is single threaded, the external APIs have to wait for the callbacks to get processed sequentially</li>
</ol>
<h2 id="heading-event-loop">Event Loop</h2>
<p>The component which monitors the call stack and loads the stack with tasks from the callback queue</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1660496404757/h5jlhgVwo.png" alt="image.png" /></p>


## Call Stack

1. A data structure which is a part of the JS Engine (e.g. Chrome V8)
2. Keeps track of the code which is currently being interpreted along with its origin

## External APIs

The JS Engine is single threaded meaning that it has one call stack and heap space (for object allocation). All code get executed synchronously in order. Since this is not always a good thing, the browser packages other capabilities apart from the JS Engine.

External APIs lets the JS Engine offload async tasks to the Browser runtime(using WebAPIs)/Node runtime(using C++ APIs) to achieve pseudo concurrency. When calling an External API a callback is to be provided. Once the execution of the External API is complete the callback code is loaded onto the callback queue.

## Callback Queue

1. This is where all of the callbacks line up for execution
2. Since JS Engine is single threaded, the external APIs have to wait for the callbacks to get processed sequentially

## Event Loop

The component which monitors the call stack and loads the stack with tasks from the callback queue

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660496404757/h5jlhgVwo.png align="left")



JS Concepts: Call Stack, Event Loop, Callback Queue, APIs