Execution order question when processing JavaScript asynchronous functions (promise)

I'd like to know the order in which the JavaScript code below is executed and why. In particular, I would like to learn more about the contents of the code that goes into the microtask queue, focusing on step-by-step

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var promise = Promise.resolve();

promise = promise.then(function(rtnVal) {
  console.log('1');
  var promise2 = Promise.resolve();
  promise2 = promise2.then(function(rtnVal) {
    console.log('2');
  });
  promise2 = promise2.then(function(rtnVal) {
    console.log('3');
  });
  console.log('4');
});

promise = promise.then(function(rtnVal) {
  console.log('5');
  var promise2 = Promise.resolve();
  promise2 = promise2.then(function(rtnVal) {
    console.log('6');
  });
  promise2 = promise2.then(function(rtnVal) {
    console.log('7');
  });
  console.log('8');
});

console.log('9');

<!-- end snippet -->

Here's what I did: 9,1,4,2,5,8,3,6,7 ->I'm wondering why it runs in this order`

Some things to be aware of:

• When a promise is resolved, any then callbacks (if any) are put on the PromiseJob queue
• When then() is called (not its callback), the returned promise is always pending, even if that then() call is made on a resolved promise. This is because the returned promise can only be resolved by executing the callback that is given to the then method since it determines how the promise will resolve, but which can only execute asynchronously.

To ease the analysis, I modified your script to give a name to each promise (a to i) and to each callback function (a_then, ...), but the logic and output remains the same:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var a = Promise.resolve();

var b = a.then(function a_then() {
  console.log(1);
  var c = Promise.resolve();
  var d = c.then(function c_then() {
    console.log(2);
  });
  var e = d.then(function d_then() {
    console.log(3);
  });
  console.log(4);
});

var f = b.then(function b_then() {
  console.log(5);
  var g = Promise.resolve();
  var h = g.then(function g_then() {
    console.log(6);
  });
  var i = h.then(function h_then() {
    console.log(7);
  });
  console.log(8);
});

console.log(9); 

<!-- end snippet -->

Here is a sequence of events that happen during the execution of that code.

• The first column represents what is executing (the main script, a function initiated from the event loop, or the host that dequeues an item from the PromiseJob queue)
• The second column has the current expression/statement being evaluated
• The columns a to i represent the state of the promise with that name: ? for pending, F for fulfilled.
• The last column pictures what is present in the PromiseJob queue, managed by the host

Here we go: