Execution order of Main Tasks and Micro Tasks with strange output

Question

I just need an explanation about the strange output, not for the order.

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

The output on Chrome

The output on Firefox and IE are same

So, why undefined appear? And why there is a difference between Chrome and IE/Firefox?

Answer 1

You are getting undefined because of console.log because it does not return anything so you get this undefined.You can observe this same situation when you write

 var a = 10
 //undefined

If you remove your console.log() from your code then you will see undefined just vanished

On other hand if you add something it will produce the sum so we will get no undefined

 10+2
 12

Take this example:

 function add(){
    return 12
 }
 //undefined
 add()
 12

In above code when we define a function it will reproduce nothing so we get undefined and when we call it so it return something and we get just answer no undefined

I have checked you code on IE and Chrome i am getting same output.if you still want to see how this program works you can go here and try to run it. It will show you event loop, call stack and full code execution.

http://latentflip.com/loupe/