what i learned last week: under the hood of javascript 
Tags: javascript
Published: 2021-06-28 22:53:25

Lets get to it! 

JavaScript is a single threaded programming language which means it contains the execution of instructions in a single sequence. In other words, one command is processed at a time. 

In a post-pandemic world where everything has gone virtual, JavaScript many not seem impressive or useful, right? Wrong, in this article I'm going to dive *under the hood* and attempt to show you why this programming language is dynamic and powerful. 

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9d0l23xm4fd891oe9i9.png)

As previously stated, JavaScript, is a single threaded programming language. So what does that mean? It means that it has a single call stack. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhjueycar7mavqjq0ntw.jpg)

A [call stack](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack) is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.

A more palatable way to think of the call stack is a data structure that records where in the program we are.

Example:

We have declared the `reyBear` function which has one
console.log command logging ‘hello from the reybear function’ to the console. Below the newly created function there are two separate console.log commands and the `reyBear` function has been called. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ky7zqt129jrad6vkqxg.jpg)

Note, the function does not log it's message until line five has completed. Why is that? Well, because of the fact that JavaScript, again, has a single call stack. This is where the issues start popping up. 

As technology continues rapidly evolving the demand for a seamless U/I experience continues growing. Alone, JavaScript's inability to work in an asynchronous manner is a huge drawback that can make slow and buggy websites but with modern problems come modern solutions! 

The browser isn't just a runtime environment it also provides web API's. These threads, which you can only make calls too, utilize a [concurrency model](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop) based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhqw700yaisfs54d4neq.gif)

To be more specific, once a task has been completed in the web API thread it will be pushed to the task queue. The task will than wait in that thread until the (event loop)[https://www.educative.io/edpresso/what-is-an-event-loop-in-javascript] pushes it to the call stack and voila! Welcome to asynchronous programming in JavaScript!

NOTE: the event loop only pushes a task from the task queue to the call stack **if** the call stack is empty. 

Example:

`const response = await fetch(resource, options);`

First, we create a variable and inside of it call `fetch()` which starts a request and returns a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).

![https://medium.com/@pravngaur/javascript-promises-66685250d657](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9vev4npqdp4nyntdpkl.png)

Once the request completes, the promise is either resolved or rejected. If it is resolved it will do so with a [response object](https://developer.mozilla.org/en-US/docs/Web/API/Response). If rejected, a warning will be displayed. 

Example: 
 
Lets add to the previous example and make a new request to fetch dogs. 

```
async function fetchDogs() {
  const response = await fetch('/dogs');
  console.log(response);
}
```
NOTE: we know this is an asynchronous function due to the `async` keyword.