Javascript Event loop and call stack


Its amazing how after working so many years on Javascript, I still get some of the basic concepts wrong.

The concept in question is Event loop and Call Stack.

To get it refreshed, here is the teaser.

What is the output of the below snippet.

function printHello() {
    console.log("Hello");
}
function blockFor1Sec() {
    let arr = [];
    for (let i = 0; i < 100000; ++i) {
        arr.push(i);
    }

}

setTimeout(printHello, 0);

blockFor1Sec();

console.log("Me first!");

I thought that, since printHello is scheduled to run after 0ms, it will run as soon as event loop gets chance to execute it. I assumed the execution order to be:

Hello
Me first!

However, it turns out that answer is

Me first!
Hello

The reason for it is the documented behavior when the items in call stack are executed.

The specified amount of time (or the delay) is not the guaranteed time to execution, but rather the minimum time to execution. The callbacks you pass to these functions cannot run until the stack on the main thread is empty.

As a consequence, code like setTimeout(fn, 0) will execute as soon as the stack is empty, not immediately. If you execute code like setTimeout(fn, 0) but then immediately after run a loop that counts from 1 to 10 billion, your callback will be executed after a few seconds.