Synchronous, Asynchronous and the Event Loop

Synchronous, Asynchronous and the Event Loop

JavaScript runs your code on a single thread of execution. It does only one thing at a time: the function currently running sits at the top of the call stack, and the next one waits for it to finish.

function saluer(nom) {
  return `Hello ${nom}`;
}
console.log("start");
console.log(saluer("Ada")); // saluer is pushed, executed, then popped
console.log("end");
// Prints: start, Hello Ada, end (in that order)

Why asynchronous?

Waiting for a network response can take a second. If JavaScript blocked the thread during that time, the page would freeze: no more clicks, no more animation. The solution: delegate the waiting to the environment (browser or Node.js) and hand it a function to call back later, a callback.

console.log("A");
setTimeout(() => {
  console.log("B"); // runs later, by the event loop
}, 0);
console.log("C");
// Prints: A, C, B

Even with a delay of 0, B is printed last. setTimeout does not run the function: it asks the environment to put it in the task queue once the delay has elapsed.

The event loop

The event loop continuously repeats this cycle:

1. run the code in the call stack until it is empty;
2. run all pending microtasks (promise continuations, queueMicrotask);
3. take one task from the queue (a setTimeout callback, a click event…) and start over.

setTimeout(() => console.log("task"), 0);
Promise.resolve().then(() => console.log("microtask"));
console.log("synchronous");
// synchronous, microtask, task

The setTimeout delay is therefore a minimum, not a guarantee: if the thread is busy with a long computation, the callback will wait.

The callback style

Before promises, asynchronous APIs took a callback, often following the Node.js “error-first” convention:

function lireConfig(callback) {
  setTimeout(() => {
    const ok = true;
    if (!ok) return callback(new Error("File not found"));
    callback(null, { theme: "dark" }); // null = no error
  }, 10);
}

lireConfig((err, config) => {
  if (err) return console.error(err.message);
  console.log(config.theme);
});

This style works, but as soon as several operations depend on each other, callbacks nest: this is callback hell. Each level has to handle its own errors, and the code drifts to the right. Promises, covered in the next lesson, solve this problem by representing a future result as an object you can chain.

Key takeaways

• Only one thing at a time on the call stack.
• Waiting is delegated; the continuation comes back through the task queue or the microtask queue.
• Microtasks run before tasks.