Advanced JavaScript

Once you're comfortable with basics, understanding how JavaScript actually runs—the event loop, prototypes, and async machinery—separates solid engineers from those who cargo-cult solutions. This article covers the concepts that explain why JavaScript behaves the way it does.

The Event Loop and Call Stack

How JavaScript Executes

JavaScript is single-threaded. The call stack holds the currently executing functions. When you call a function, it's pushed onto the stack; when it returns, it's popped. Synchronous code runs to completion before anything else runs.

The event loop coordinates the stack with the task queue. When the stack is empty, the event loop takes the next task (callback) from the microtask queue (Promises, queueMicrotask) or macrotask queue (setTimeout, I/O) and runs it. Microtasks run before the next macrotask—understanding this order explains why Promise.then runs before setTimeout even when both are scheduled.

Implications for Async Code

Because the stack must be empty before callbacks run, long synchronous work blocks everything—including rendering and user input. Break heavy work into chunks, use requestIdleCallback for non-critical tasks, or move work to a Web Worker.

Promises and async/await

The Promise Model

A Promise represents a future value or failure. It has three states: pending, fulfilled, or rejected. Once settled, it cannot change. .then() and .catch() return new Promises, enabling chaining. Always return Promises from .then callbacks if you want the next .then to receive the transformed value.

async/await as Syntactic Sugar