Javascript sync and async processes priority

Question

I was researching about javascript's async behaviour despite being single-threaded and I came after a comment stating that for this code:

request(..., function (error, response, body)  
    console.log('foo);  
});  
    callAComputationallyIntensiveSynchronousFunctionThatTakesSixHoursToExecute();  
console.log('bar');  

'bar' will still come before 'foo' because Javascript always finishes the currently executing function first. An event will never interrupt a function.

I understand that a synchronous function execution has a higher priority over events, but I don't understand why 'bar' will be printed before 'foo'. From my reading, the async call should be made, and after that to fill the dead time before response is ready, it goes on and processes the other lines of code until it is ready, and then it should execute the callback function for the response and after that return to processing the code and so on.

The example above however states that even if the response would be ready long before the synchronous function finishes from executing, it still goes on and execute the next line of code. Why is that?

Answer 1

In JavaScript, everything is a function. There is no differentiation between a synchronous and an asynchronous function. The only difference is the way you call these functions. So "sync"/"async" is an abstract concept for programmers which makes it easier to communicate.

How JavaScript actually works:

JavaScript has a queue of "functions" that are waiting to be executed. Everytime you create a new "asynchronous function", you add it to this queue. This happens, for example, when you do a setTimeout(), an ajax call, or simply a DOM-event like "onClick" triggered by the browser.

If a specific function is executed in JS, it will never be interrupted - it runs until it finished (returned). Only afterwards, the runtime (browser) takes a look at the queue, decides which function should be executed next, and then calls it - waiting it to be finished.

In your example above, the browser is currently executing the function that will print "bar". This execution cannot be interrupted before it finished, therefore "bar" is printed first. During the execution, however, a new asynchronous function is created and pushed to the execution-queue. Only after "bar" has been printed, the runtime will look in the queue, find the "foo"-function and execute it.

A negative side effect of this are long-running tasks. While such a function is executed, nothing else can be done by the browser. Not even rendering/updating the page. So if you have a piece of code that runs for, say, 10 seconds, the user cannot interact with the website until the function finished. The reason for that is that all user events, like mouse movenent, clicks and scroll events are queued and cannot be handled until the thread finishes the long running Task.

Multithreading with JavaScript

With HTML5, JavaScript now has the opportunity to use multiple threads using web workers though. But this is an entirely different topic and out of scope for this question. Just remember that it is theoretically possible.