Async JavaScript: The Single Thread

…and gratuitous Bachelor/Bachelorette gifs…

Photo by amirali mirhashemian on Unsplash

In computer science, a thread of execution is the smallest sequence of programmed instructions that can be managed independently…

— Wikipedia

JavaScript is a single-threaded programming language, which means that JS can only run one process, or instruction (thread), at a time, unlike C# or Java, which are both multi-threaded. Basically, JavaScript does not multitask.

Thinking about this idea, you might assume that this can create some timing issues. What if a large file takes a long time to load? What if you search a movie database for every movie that contains ‘west’ in the title? Furthermore, if a request or large file has to be loaded, does that mean everything else stops and waits for this process to complete!?

Let me put your mind at ease and inform you that this isn’t what happens. Although JS can only work on one thing at a time, we have different asynchronous methods to help us work around this.

But, if JS is single-threaded and can only do one thing at a time, how does it know to go back and finish an asynchronous task, for instance, like setTimeout?

Let’s create an example:

console.log('Hello, from JavaScript');
setTimeout(() => {
    console.log('Haha! You thought I was forgotten!? NEVER!');
}, 5000);
console.log('Goodbye, from JavaScript');

Our code above will print three messages to the console. Hello, from JavaScript will fire first. Followed by Goodbye, from JavaScript. Then, after five seconds, we should see the message Haha! You thought I was forgotten!? NEVER!. Simple, albeit lame, notes that we will print to the console. Again though, how does JavaScript know to print the message within setTimeout after five seconds? Why doesn’t JS wait five seconds to print the message within setTimeout and then continue to print the Goodbye, from JavaScript message?

You might be surprised to know that the browser is the one doing the work of counting for setTimeout! That’s because browsers come with Web APIs that give JavaScript the ability to hand off specific tasks to it. This is extremely handy when your program is making async requests or, in our case, using the setTimeout feature. JavaScript’s call stack sees these Web API functions and passes them to the browser, which handles completing the task, allowing JS to continue with other tasks down the line. (That’s why the messages print in the order that they do.) Once the job is complete, the browser then pushes the task into the callback queue, which JS then takes and puts into the call stack and completes the function.

Is this information pertinent to know to increase those coding skills? Probably not. BUT, if you’re like me, I find my skills increase as my understanding of what is happening under the hood increases.

Happy Coding 🤓

Thanks to Colt Steele for the blog inspiration.