Asynchronous Vs Synchronous Code In JavaScript

Question

I have been trying to understand in depth how Asynchronous Vs Synchronous code works in JavaScript. Read quite few articles. Understood the concept of Call Stack, Event loop and Function Queue and how each of these three come into action differemtly in case of Async code and Sync code.(https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop https://medium.com/@siddharthac6/javascript-execution-of-synchronous-and-asynchronous-codes-40f3a199e687 ). But still it does not clear all my doubts.

1. JavaScript is single threaded and to handle Async code it uses callback functions, a callback function is function that gets called when a action is completed. How we get to know when that action was completed. Is the action listener a separate process or tread in JavaScript engine?

2. If our Node JS server gets 10 concurrent request to download a file, and we use Async code to take care of each download request, in this case we will have 10 callback functions that will be triggered when the down load completes. Being single threaded will the download for each client will start after the download for the client ahead of it gets completed or for all the 10 clients it gets started as soon as request is received.

3. All the articles that I have read on Async code handeling in JavaScript always pick the example of setInterval(), to differentiate between Async and Sync code. I am more interested as how xmlhttprequest works Async.

   4. Understanding the execution of Async code execution for Javascript is good enough to for Node JS Async code execution also?

Thanks.

Answer 1

Long answer short, JavaScript is not completely single threaded. While execution, internal threads are created to handle Async functionality like xmlhttprequest.

Now coming to your doubts,

1. Yes if the request is Async like an I/O operation, depending on the JavaScript Engine it creates separate thread for it and executes in background while the main process still runs, once the Call Stack is empty the Event Loop pushes the tasks available in Callback Queue ( having your callback function that gets called when a action is completed) to the Call Stack and runs it.

2. Again this depends on Engine on which the program is getting executed. The Node.js uses V8 Engine which has access to Thread pool provided by libuv which creates limited no. of threads and assign tasks to each one of them. For example 10 requests to download a file may be handled by first creating 4 threads to download file for first 4 requests, after downloaded again download other 4, then finally the rest 2 files get downloaded. Callback functions get called in the same order.

3. setInterval, setTimeout, xmlhttprequest are functionalities which are provided additionally and is not part of native JavaScript. So whenever such function is called, external packages work on it while still the main JavaScript program continues to run, when the Async function gets finished it simply calls the Callback function with the result data. As you are familiar with Event Loop, it is the one which handles calling the Callback function from Callback Queue.

4. As I said each browser has different JavaScript Engine and has different ways to handle things. NodeJS uses Google's V8 Engine and has a package called libuv which handles Async stuff. I would suggest you to refer below link:

Overview of Blocking vs Non-Blocking in NodeJS

Answer 2

Notice how you can’t write an async function which doesn’t depend on something built-in - you couldn’t re-implement setTimeout yourself in JS, for example. The functions which really do the async work (xmlhttprequest, readFile, exec) are all part of the environment (Node/browser) and call out to other code, usually C++, which can be multi-threaded.