Understanding the Event Loop

Question

I am thinking about it and this is what I came up with:

Let\'s see this code below:

console.clear();
console.log         


        

Answer 1

Don't think the host process to be single-threaded, they are not. What is single-threaded is the portion of the host process that execute your javascript code.

Except for background workers, but these complicate the scenario...

So, all your js code run in the same thread, and there's no possibility that you get two different portions of your js code to run concurrently (so, you get not concurrency nigthmare to manage).

The js code that is executing is the last code that the host process picked up from the event loop. In your code you can basically do two things: run synchronous instructions, and schedule functions to be executed in future, when some events happens.

Here is my mental representation (beware: it's just that, I don't know the browser implementation details!) of your example code:

console.clear();                                   //exec sync
console.log("a");                                  //exec sync
setTimeout(                //schedule inAWhile to be executed at now +1 s 
    function inAWhile(){
        console.log("b");
    },1000);    
console.log("c");                                  //exec sync
setTimeout(
    function justNow(){          //schedule justNow to be executed just now
        console.log("d");
},0);       

While your code is running, another thread in the host process keep track of all system events that are occurring (clicks on UI, files read, networks packets received etc.)

When your code completes, it is removed from the event loop, and the host process return to checking it, to see if there are more code to run. The event loop contains two event handler more: one to be executed now (the justNow function), and another within a second (the inAWhile function).

The host process now try to match all events happened to see if there handlers registered for them. It found that the event that justNow is waiting for has happened, so it start to run its code. When justNow function exit, it check the event loop another time, searhcing for handlers on events. Supposing that 1 s has passed, it run the inAWhile function, and so on....