Web pages serve as an invaluable source of information and knowledge, plus you can watch countless cat videos, which leads us to the other side of the coin – yes, browsing the web takes up too much of our time and is the primary cause of procrastination. Most people just scratch the surface, so to say, and never look underneath, what’s behind this technological masterpiece that is the web – both in general and when referring to a single website.
Well, you may have heard of JavaScript – it makes websites run. But this is not a JavaScript introduction, here we’re looking at one of its particular features – the fact it’s single-threaded. For those unfamiliar with the term, it refers to the execution of a set of instructions in a single process. The opposite of that is a multi-threaded process.
Hold on a bit! Single thread?!
If you’ve ever seen website you would’ve noticed pages loading fast and all sorts of shenanigans, how is it even possible to run all that via a single, lone thread. Well, it’s not really a lone thread, in the sense that JavaScript isn’t doing all the work on its own. It’s simple then it sounds real.
Teaming up with the browser
JavaScript isn’t just going about running sites with no interference, or so to say, help from anyone. This programming language is single-threaded when it runs in a compiler on its own, but that doesn’t happen in the real world. It is almost never the case. In reality, the code written on the basis of JavaScript syntax is run through a browser. That might not look like too much of a difference, but it actually is. Imagine JavaScript as the engine, or the brain and the browser as the muscles or the wheels. To put it simply, the browser helps JavaScript in getting things done.
With all its APIs and operating features, the browser enables JavaScript to run smoothly and perform its tasks seamlessly. You may have heard of SetTimeout, SetInverval, or Console.log. These features only appear to be within JavaScript, but they are actually features of the browsers which allow JavaScript to perform its operations all so hassle free.
The magical system
Now, if the browser and the language are communicating and interacting the whole time (funny how a language can communicate on its own instead of just serving as a communication tool for others), they surely need a system that will track and keep that communication. And you would be absolutely right to think that, this communication is vital because JavaScript can only be executed in via a single thread. Stack is that system, i.e. data structure, which keeps track of the code that is, so to say, is pushed in and out of that one thread.
But stack isn’t the only such structure, there is another one called event queue. Its role is to gather the JavaScript code directly from the browser APIs and right after then in accordance with the structure of the stack it loads it for execution. The event loop, which is another useful function, checks if the thread is empty and if it is, it feeds this information to event queue which then moves the code into the thread. For example, when we call for a timeout [SetTimeout()] JavaScript pushes the SetTimeout() function off the thread and into the timer API of the browser. This causes the browser to wait and then return the function that was originally in the SetTimeout() in the event queue. Event loop does its work again and checks if the thread is empty and if it is, it just adds the next function of the event queue to the thread. This function then gets executed. That’s all folks.
Summary
Hopefully, the single-thread wizardry of JavaScript makes a bit more sense now. There are a lot of developers that find JavaScript and its way of dealing with problems funny. I, for one, feel that it is a breath of fresh air and unique in many ways. If you know how it works and you use it right, it can exceed all expectations. If you find this intriguing maybe you’ll engage research on your own. You’ll be able to see for yourself that JavaScript is indeed magical.
These resources might shed some additional light on the matter:
An awesome video about the event loop
An interesting tool for visualizing javascript runtime (I should warn you that it does not support ECMAScript 6)