Hello folks, in this article we'll take a look at the internal functioning of Javascript.

So, you may have often come across as the classic definition of Javascript:

Javascript is a single-threaded, synchronous language.

Today, we'll try to understand what this statement means and how Javascript performs asynchronous tasks if it is a synchronous language.

What does 'single-threaded and asynchronous' mean?

Let's first consider the first part of the above statement, which is: Javascript is a single-threaded language. This means that Javascript only has one stack. See, the execution of Javascript requires it to hold data in memory while the instructions written in code are being executed. Javascript holds data in a stack, which is a fixed space allocated to it by the Javascript engine. There are other data structures too, but for this article, we'll act as if there's only a stack to store data.

How many threads?

So, the Javascript engine allocates some space in the memory for Javascript to store data while executing. This Javascript engine is what powers the browser. You may have heard about the 'V8 engine' that powers the wildly famous Chrome browser from Google. It is that very engine that we're talking about.

Now, by Javascript is a single-threaded language, we mean that Javascript only has one stack and it can only do one thing at a time. Let's expand on this a bit more:

Imagine a stack of books. To reach a book placed 5 books below the topmost one, we can simply slide it out. But a stack in Javascript doesn't function the same way. It can only access the topmost book and to access other books, it'll have to throw away the topmost book and keep throwing them away until it reaches the desired book.

Due to this reason, Javascript has the ability to handle only one task at a time.

Code execution - step by step:

When a .js program starts, the stack is empty, since there's no data to store.

Then, the code starts executing, and for every function, we have some data pushed onto a stack and when that function exits, its data is popped off.

This is why when Javascript is executing some code, it can't handle any other background task as the stack will already have the data of the code being executed and Javascript can only see what's on top of the stack.

To be able to handle the background tasks, Javascript would have had the capability to save the current state of execution to some other memory location (another stack) and handle the background task, and once done, resume the paused task or handle both of them simultaneously.

But that's not how it works.

So, Javascript has only one stack i.e., it can do only one task and can't perform background tasks.

But Javascript does perform background tasks, doesn't it?

Yes, it does.

Well, more like it is aided to perform background or asynchronous tasks. And the provider of this aid is 'web APIs.'

So, this is what happens (and I promise I won't lie this time! 😅😅):

Javascript executes the code and while executing the code, it comes across an async request. Earlier Javascript wouldn't have been able to perform an async task but this time around it has the help of its powerful friends, the web APIs.

So, Javascript hands over the async tasks to web APIs and immediately receives what are called 'promises' from the web APIs. These promises enable Javascript to act as if the results have been received and continue its execution.

In reality, a promise almost always gets data after a few seconds.

Essentially web API 'promises' to return the result!

But Javascript doesn't know about it. To Javascript, it looks like the async request was handed over to web APIs which instantly returned the result (a promise) and Javascript was able to continue its execution.

How exactly does that happen will be discussed in part two of this series. Stay tuned for that!

This is how despite being a single-threaded and synchronous language, Javascript is able to handle asynchronous tasks.

I hope you liked the article and that I was able to explain things in a simple way! I'll be writing a lot more here on Hashnode now and as 'promised' part two of this article is right around the corner, so follow me to not miss out on that.

Also, if you have any feedback, positive or negative, please drop them in the comments box below, and don't forget to ping me on Twitter for a quick chat!

See you soon 👋,

~ Sumit