How Javascript works?

There are numerous websites that would tell you about the technical aspects and working of Javascript. I believe Javascript is one of the best programming languages out there which is used both in front-end and back-end. But how does it actually work?

In programming, you must’ve heard phrases like ‘single-threaded’, or ‘non-blocking’. Well, Javascript surely works as a single-threaded language which is non-blocking. But, what does that even mean?

For that, let’s understand what a program is. Now, you would probably say, “Hey! I know what a program is. Tell me what Javascript is.” Well. you see everything is connected. Programming languages are implemented using two simple things. Memory- to store variables or allocate space for code to run, and Process- read and write (parse and execute code).

Javascript works just like that. It uses Memory Heap for memory allocation. It uses Call Stack for running functions or methods in the program. Think of it like a tray. A tray carrying plates kept on top of each plate. Each instruction/ command is put on top of that tray, and once it gets executed, it is passed out of it.

Here comes what we call Synchronous and Asynchronous programming in Javascript. You can understand synchronous programming like this : Imagine you are in a restaurant where there is only one waiter to take your orders. But, when you arrive there, you notice that there are numerous customers. And the waiter can take only one order at a time, process it and then come to take your order. Well, if one of the structures in your code takes longer time to execute than other parts, the other parts would be delayed and your website won’t load. This can cause inefficiency. This issue is called a ‘Deadlock’. The command that comes later won’t execute until the first one runs to completion.

Asynchronous comes to the rescue here. Imagine that now, the restaurant has enough number of waiters to take orders of separate tables without making them wait. So the process ca run smoothly now. This is exactly what Asynchronous programming does. It executes the remaining parts of the code without being delayed by the one that is long and takes large amount of time to work.

When I said that Javascript is a single-threaded language, I meant to say that it has only one Call-Stack. That means, that it can run only one request at a time. And it is good for the sake of the program because it lessens the amount of complexity. Most other languages are multi-threaded, which means that they have multiple call-stacks.

Synchronous, asynchronous done. Now what the heck is non-blocking? Creating a setTimeout() in Javascript allows us to convert a synchronous action to an asynchronous one. This is what is required, that a program is non-blocking, i.e., it does not block the remaining part of the program from running just because it is slow, longer.

But, this was the theory of it all. How does JS actually work? “What was all the crap that you explained above then?”, you ask. Well, that is how Javascript works. But on the background something called Call Stack, Web APIs, Callback Queues, and Event Loop.

For that, tune in for my next story.

Happy Coding!