Nice post for beginner. Thank you!

Can you please explain this me why the event loop prioritize cartoon's setTimeouts than the then's setTimeout? Ok, I did some changes here

const tom = () => console.log('Tom');
const jerry = () => console.log('Jerry');
const doggy = () => console.log('Doggy');

const cartoon = () => {
  console.log('Cartoon');

  setTimeout(tom, 0);
  setTimeout(doggy, 0);

  new Promise((resolve, reject) =>{
      resolve('I am a Promise, right after tom and doggy! Really?');
    setTimeout(()=>{console.log('inner timeout')},0)
  }
  ).then(resolve => console.log(resolve));
  new Promise((resolve, reject) =>
    resolve('I am a Promise after Promise!')
  ).then(resolve => console.log(resolve));

  jerry();
}

cartoon();

"Cartoon"

"Jerry"

"I am a Promise, right after tom and doggy! Really?"

"I am a Promise after Promise!"

"Tom"

"Doggy"

"inner timeout"

Thank you very much. Very detailed and mind blowing explanation. Understood. )

Thanks for great Article.

Cartoon

Jerry

//These micro task has precedence over macro tasks

I am a Promise, right after tom and doggy! Really?

I am a Promise after Promise!

//Finally macro tasks

Doggy

Tom