Unit 10: Waiting & The Web

Handing over a job

A callback is a function you give to someone else so they can run it when they are ready. You already did this with map and filter.

JavaScript

function doTwice(action) {
  action();
  action();
}

doTwice(() => console.log("jump"));

It prints

jump
jump

The callback gets told things

Whoever calls your function decides what to hand it. forEach passes the item and its position.

JavaScript

["a", "b"].forEach((item, i) => {
  console.log(i, item);
});

It prints

0 a
1 b

Come back in one second

setTimeout takes a callback and a delay. It does not pause your program — the rest carries straight on, and the callback runs later. So this prints first, then second, and only a second afterwards does last appear.

(That "later" is why this one is not runnable in the lesson editor: our checker reads what your code printed the moment it finishes, so a line that arrives a second late arrives too late.)

JavaScript

console.log("first");

setTimeout(() => {
  console.log("last");
}, 1000);

console.log("second");

A receipt for an answer

A promise is what you get when the answer is not ready yet — like a ticket at a chip shop. Later it either resolves with the answer, or rejects with a problem.

JavaScript

const chips = new Promise((resolve) => {
  setTimeout(() => resolve("your chips"), 1000);
});

chips.then((food) => console.log(food));

then, then, catch

Each .then waits for the one before it, so a chain reads top to bottom even though it happens over time. One .catch at the end handles a problem anywhere in the chain.

JavaScript

loadScores()
  .then((scores) => scores.filter((s) => s > 5))
  .then((big) => console.log(big.length))
  .catch((err) => console.log("Could not load:", err.message));

Waiting, written the easy way

await waits for a promise and hands you the answer, so waiting code looks like normal code. It is only allowed inside a function marked async.

JavaScript

async function showScores() {
  const scores = await loadScores();
  console.log(scores.length);
}

showScores();

The same try/catch you already know

With await, a rejected promise behaves like a thrown error — so you catch it with the try/catch from the last unit instead of .catch.

JavaScript

async function showScores() {
  try {
    const scores = await loadScores();
    console.log(scores.length);
  } catch (err) {
    console.log("Could not load it");
  }
}

The queue

JavaScript only ever runs one piece of code at a time. Anything waiting — a timer, a click, an answer from the internet — joins a queue, and JavaScript picks the next job up only once it has finished the current one. That loop of "finish this, take the next" is the event loop.

What JavaScript was made for

In a browser, the page is an object called document and JavaScript can change it. querySelector finds a piece of the page, and textContent reads or replaces the words inside it.

(These samples need a real web page, so they will not run in the lesson editor.)

JavaScript

const title = document.querySelector("h1");
title.textContent = "Hello!";

Waiting for a click

addEventListener says "when this happens, run that". It takes the name of the event and a callback — the same idea as setTimeout, but triggered by a person instead of a clock.

JavaScript

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("clicked!");
});