title: Do I get right how asynchrony works behind the scene in JS?
body: <p>I have a question about asynchrony in JS. How it actually works.
  I'm not sure if I got it right, I hope you can help me figure it out.</p>
  <p>So, I have a code:</p>
  <pre><code>console.log('start');
  setTimeout(() =&gt; console.log('one'), 0);
  console.log('two');
  setTimeout(() =&gt; console.log('three'), 3000);
  console.log('finish');
  </code></pre>
  <ol>
  <li>So <code>console.log('start')</code> gets into the CallStack, executes and ride out of it. In the console, I get the output <strong>'start'</strong>.</li>
  <li>Next, <code>setTimeout(() =&gt; console.log('one'), 0)</code> gets into <strong>CallStack</strong>, but since this is an asynchronous function from CallStack, it goes to the Web API and works there in the background. As soon as it completes, its callback function will ‘move’ to the <strong>Callback queue</strong>.</li>
  <li>Then <code>console.log('two')</code> also gets into the CallStack, is executed and removed. In the output now we have (<strong>‘start’, ‘two’</strong>)</li>
  <li>Exactly the same story happens with <code>setTimeout(() =&gt; console.log('three'), 3000);</code></li>
  <li>Again we repeat the same actions with <code>console.log('finish')</code> and in the output we have <strong>(‘start’, ’two’,’finish’)</strong></li>
  <li>It turns out that the Callback queue contains <strong>(‘one’, ’three’)</strong>.</li>
  <li>From the Callback queue <code>console.log('one')</code> gets into the Call Stack, is executed and deleted. The output is <strong>(‘start’,’two’, ’finish’, ’one')</strong>, etc.</li>
  </ol>
  <p>It turns out that event loop checks if the CallStack is empty, if it is empty and the Callback queue contains a callback function, then it pushes them into the CallStack and does it until the Callback queue is empty?</p>