what i learned last week: under the hood of javascript

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.

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

A 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.

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 based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks.

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.

Once the request completes, the promise is either resolved or rejected. If it is resolved it will do so with a response object. 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.