Event Loop in JavaScript

/* 
 * Package: io.thecodeforge.js.core
 */
function multiply(a, b) {
  return a * b;  // [3] pushed then popped
}

function square(n) {
  return multiply(n, n);  // [2] pushed, calls multiply
}

function printSquare(n) {
  const result = square(n);  // [1] pushed, calls square
  console.log(result);
}

printSquare(4);  

// Trace:
// 1. printSquare(4) is pushed
// 2. square(4) is pushed
// 3. multiply(4, 4) is pushed
// 4. multiply returns 16, popped
// 5. square returns 16, popped
// 6. printSquare logs 16, popped

/* 
 * Package: io.thecodeforge.js.async
 */
console.log('1 — start');  

// Handed to Web API timer thread
setTimeout(() => {
  console.log('2 — setTimeout callback'); 
}, 0);

console.log('3 — end');  

// The Event Loop Check:
// 1. Is Stack empty? No (running '3 - end').
// 2. '3 - end' finishes. Stack is empty.
// 3. Event Loop moves callback from Macrotask Queue to Stack.

/* 
 * Package: io.thecodeforge.js.concurrency
 */
console.log('1 — sync start');

setTimeout(() => console.log('2 — setTimeout'), 0);

Promise.resolve()
  .then(() => console.log('3 — Promise .then'));

queueMicrotask(() => console.log('4 — queueMicrotask'));

console.log('5 — sync end');

// Execution Logic:
// [Sync] 1 and 5 log first.
// [Stack Empty] Check Microtasks.
// [Micro] 3 and 4 log.
// [Micro Empty] Check Macrotasks.
// [Macro] 2 logs.

/* 
 * Package: io.thecodeforge.js.performance
 */

// BLOCKING VERSION
function block() {
  let i = 0;
  while (i < 1e9) i++; // Heavy sync work
  console.log('Done blocking');
}

// NON-BLOCKING (Chunked) VERSION
function chunkedTask(iterations) {
  let i = 0;
  function doWork() {
    let start = Date.now();
    // Work for only 16ms to maintain 60fps
    while (Date.now() - start < 16 && i < iterations) {
      i++;
    }
    if (i < iterations) {
      setTimeout(doWork, 0); // Yield control back to loop
    } else {
      console.log('Done chunking');
    }
  }
  doWork();
}

chunkedTask(1e9);
console.log('UI stays responsive!');