How asynchronous JavaScript works under the hood

Hi, Today, I watched an amazing tutorial video about JavaScript asynchronous feature and learned how it works under the hood.

Exercise 1

What is the order of 3 function executions?

function printHello () {
    console.log('Hello');
}

function blockFor1Sec () {
    //assume looping on huge array and it takes approximately 1 second to complete
}

setTimeout(printHello, 0);

blockFor1Sec();

console.log('Me first!');

What happens under the hood

Answer for exercise 1

• blockFor1Sec (1ms - 1001ms)
• 'Me first!' (1002ms)
• 'Hello' (1003ms)

Explanation for exercise 1

When setTimout (Web browser feature) is used, the function in callback parameter position, in this case printHello, is pushed to Callback Queue and it won't be pushed to Call Stack until all global functions executed. So in this case, blockFor1Sec() and console.log('Me first!') are executed before printHello even setTimeout's timer was expired long ago.

Exercise 2

What is the order of those functions executions?

function display (data) {
    console.log(data);
}

function printHello () {
    console.log('Hello');
}

function blockFor300ms () {
    //blocks js thread for 300ms with long lasting loop
}

setTimeout(printHello, 0);

const futureData = fetch('https://twitter.com/kdaisho/tweets/1'); //'Hi'
futureData.then(display);

blockFor300ms();

console.log('Me first!');

What happens under the hood