JS

runtime.js

One spine: the evolution of JavaScript

Pick an era, expand a concept, and see where it lands in today's runtimes. Every snippet can be dropped straight into the sandboxed console — the event loop panel then shows real, instrumented execution, not a looping animation.

Module Era

ESM + npm2015 – 2020

Specified in 2015, shipped in runtimes years later. The language finally got a static module format — and the ecosystem got a decade-long CommonJS interop problem.

`import`/`export` are static: bindings are resolved before evaluation, which is what makes tree-shaking and cycle handling possible. Imports are live bindings, not copies.

// counter.js — a module that exports a *live* binding
export let hits = 0;
export function hit() {
  hits++;
}

hit();
hit();
console.log("hits after two hit() calls:", hits);

// main.js would import the binding, not a snapshot:
//   import { hits, hit } from "./counter.js";
//   hit();
//   console.log(hits); // 1 — the same binding, already updated

Interview gotchas

15 genuinely tricky, well-known snippets — event-loop ordering, closures in loops, and `this`-binding traps. Open one, read the gotcha, then drop it straight into the sandboxed console to watch it really run.

Event loop
Closures & scope
this binding
Promises & async
Coercion & equality
Built-in traps