I’m trying to understand the execution order of promise handlers and I’ve made a kind of complicated example as below:

code:

const a = Promise.resolve(34);
const b = Promise.resolve(23);
const c = Promise.resolve(455);

const b1 = b.then(() => console.log("hi1"));
const a1 = a.then(() => console.log("hi2"));
const c1 = c.then(() => console.log("hi3"));

const a2 = a1.then(() => a.then(() => console.log("hi4")));
const c2 = c1.then(() => console.log("hi5"));
const b2 = b1.then(() => console.log("hi6"));

const a3 = a2.then(() => console.log("hi7"));
const b3 = b2.then(() => console.log("hi8"));
const c3 = c2.then(() => console.log("hi9"));

const a4 = a3.then(() => console.log("hi10"));
const b4 = b3.then(() => console.log("hi11"));
const c4 = c3.then(() => console.log("hi12"));

output:
//hi1
//hi2
//hi3
//hi6
//hi5
//hi8
//hi4
//hi9
//hi11
//hi12
//hi7
//hi10

so I’m wondering, why hi4, hi7, hi10 are located in those locations?

p.n: there is no specific application for this code and it’s a dummy code.

p.n2: other examples are related to nested promises not nested promise handlers.