Modules and Async Programming Fundamentals

As programs grow, you split code across multiple files instead of one giant script. JavaScript modules let one file share code with another using export (to make something available) and import (to pull it in elsewhere):

// math.js
export function add(a, b) { return a + b; }

// app.js
import { add } from "./math.js";
console.log(add(2, 3));

This keeps related logic together, avoids naming collisions between files, and makes large codebases navigable. (This sandboxed lesson runs everything in one file, so you won't write real import/export here — but you'll use exactly this pattern once you work with real project files.)

Separately, some operations don't finish instantly — fetching data from a server, reading a large file, waiting on a timer. JavaScript handles these asynchronously: instead of freezing the whole program until the slow thing finishes, it keeps running and gets notified later.

The old way to handle this was callbacks (a function passed in to run "when done"), which becomes hard to read once you chain several async steps ("callback hell"). Modern JavaScript uses Promises instead — an object representing a value that will exist eventually, either successfully (resolved) or with an error (rejected):

function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

wait(100).then(() => console.log("100ms passed"));

async/await is syntax sugar over Promises that lets asynchronous code read like ordinary top-to-bottom code:

async function run() {
  console.log("start");
  await wait(100);
  console.log("100ms later");
}

Any function marked async automatically returns a Promise, and await pauses that function (without freezing the rest of the page) until the awaited Promise settles. You'll use this constantly once you start fetching real data in the next lesson.