JavaScript Deep Dive — Module 3: Asynchronous JavaScript & The Event Loop

console.log('1: sync');

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

Promise.resolve().then(() => console.log('3: microtask (promise)'));

queueMicrotask(() => console.log('4: microtask (explicit)'));

console.log('5: sync');

// Output order: 1, 5, 3, 4, 2
// WHY: synchronous code (1, 5) runs first because it's already on the Call Stack.
// Once the stack empties, ALL queued microtasks (3, 4) drain BEFORE the engine
// even looks at the macrotask queue -- this is true even though setTimeout(..., 0)
// requests zero delay. Only after the microtask queue is fully empty does the
// single macrotask (2) get pulled onto the stack.

// A barebones, functionally correct Promise/A+-style implementation, to expose
// the exact mechanics .then() and the microtask queue provide for free.
class MiniPromise {
  #state = 'pending';
  #value;
  #callbacks = []; // { onFulfilled, onRejected, resolveNext, rejectNext } pairs waiting for settlement

  constructor(executor) {
    const resolve = (value) => this.#settle('fulfilled', value);
    const reject = (reason) => this.#settle('rejected', reason);
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  #settle(state, value) {
    if (this.#state !== 'pending') return; // settle exactly once -- ignore all further calls
    this.#state = state;
    this.#value = value;
    // Flush every callback registered while we were pending. queueMicrotask
    // is what gives Promises their microtask-queue scheduling semantics.
    this.#callbacks.forEach((cb) => queueMicrotask(() => this.#run(cb)));
    this.#callbacks = [];
  }

  #run({ onFulfilled, onRejected, resolveNext, rejectNext }) {
    const handler = this.#state === 'fulfilled' ? onFulfilled : onRejected;
    if (typeof handler !== 'function') {
      // No handler for this branch -- propagate the current state to the next promise
      this.#state === 'fulfilled' ? resolveNext(this.#value) : rejectNext(this.#value);
      return;
    }
    try {
      const result = handler(this.#value);
      // Adoption: if the handler returned a thenable, chain onto ITS eventual state
      if (result && typeof result.then === 'function') {
        result.then(resolveNext, rejectNext);
      } else {
        resolveNext(result);
      }
    } catch (err) {
      rejectNext(err); // a thrown error becomes the next promise's rejection
    }
  }

  then(onFulfilled, onRejected) {
    return new MiniPromise((resolveNext, rejectNext) => {
      const callback = { onFulfilled, onRejected, resolveNext, rejectNext };
      if (this.#state === 'pending') {
        this.#callbacks.push(callback);
      } else {
        queueMicrotask(() => this.#run(callback)); // already settled -- still async, per spec
      }
    });
  }
}

new MiniPromise((resolve) => resolve(1))
  .then((v) => v + 1)
  .then((v) => { throw new Error(`failed at ${v}`); })
  .then(null, (err) => console.log('caught:', err.message)); // 'caught: failed at 2'

// What you write:
async function fetchUserAge(id) {
  const user = await fetchUser(id);   // pauses here without blocking the thread
  const age = await fetchAge(user);   // pauses here too
  return age;
}

// The conceptual desugaring using a generator + a runner function:
function fetchUserAgeGenerator(id) {
  return function* () {
    const user = yield fetchUser(id); // `yield` hands control back to the runner
    const age = yield fetchAge(user);
    return age;
  };
}

// A minimal generator runner -- this loop is what `async` effectively compiles to.
function run(generatorFn) {
  const iterator = generatorFn();
  return new Promise((resolve, reject) => {
    function step(input) {
      let result;
      try {
        result = iterator.next(input); // resume the generator, injecting the resolved value
      } catch (err) {
        return reject(err); // a thrown error inside the generator maps to Promise rejection
      }
      if (result.done) return resolve(result.value);
      // result.value is the promise the generator yielded -- wait for it, then step again
      Promise.resolve(result.value).then(step, (err) => iterator.throw(err));
    }
    step();
  });
}

// BAD WAY (Don't Do This): the try/catch can't see this rejection --
// processPayment() is called but never awaited, so its rejection becomes
// an UNHANDLED PROMISE REJECTION, invisible to the surrounding try/catch.
async function checkoutBad(cart) {
  try {
    processPayment(cart); // missing `await` -- fires, catch block never sees the failure
    return 'success';
  } catch (err) {
    return 'failed'; // never reached even if processPayment ultimately rejects
  }
}

// ARCHITECT WAY (Do This): await it, so its rejection is routed into the catch block.
async function checkoutGood(cart) {
  try {
    await processPayment(cart);
    return 'success';
  } catch (err) {
    return 'failed';
  }
}

// Sequential -- each request waits for the previous one. Use ONLY when request N+1
// genuinely depends on the result of request N.
async function sequential(ids) {
  const results = [];
  for (const id of ids) {
    results.push(await fetchUser(id)); // total time = sum of all request latencies
  }
  return results;
}

// Parallel -- all requests fire immediately, independent of each other.
// Use whenever requests do NOT depend on each other's results.
async function parallel(ids) {
  const promises = ids.map((id) => fetchUser(id)); // fired eagerly, before any await
  return Promise.all(promises); // total time = the SLOWEST single request latency
}

// Parallel, fault-tolerant -- get partial results even if some requests fail.
async function parallelResilient(ids) {
  const outcomes = await Promise.allSettled(ids.map((id) => fetchUser(id)));
  return outcomes
    .filter((o) => o.status === 'fulfilled')
    .map((o) => o.value);
}