Unit 9: When Things Go Wrong
Catch it, do not crash.
Unit 9 of 10 in JavaScript for kids. Its 5 lessons are Reading Errors, throw & finally, Your Own Error Types, Checking with Patterns and Safety Net — below is everything each one explains, and a question or two from it to try.
Every sample on this page was run before it shipped, the same way the app runs it, and prints exactly what it says it prints.
This unit opens with a fortnight’s trial of everything — no card needed — or with a family plan, bought in the iPhone app. The first two units of every track are free for ever. Try it in the app.
💥 Reading Errors
Three errors you will meet
A SyntaxError means you typed something JavaScript cannot read. A ReferenceError means you used a name that does not exist. A TypeError means the value was not the kind of thing you treated it as.
JavaScript
try {
const kid = null;
console.log(kid.name);
} catch (err) {
console.log("Oops:", err.name);
}
It prints
Oops: TypeError
Catching it instead of crashing
Code in try runs normally. The moment something goes wrong the rest of the block is skipped and catch takes over — and the program carries on afterwards.
JavaScript
try {
console.log("start");
missingFunction();
console.log("never runs");
} catch (err) {
console.log("caught it");
}
console.log("carry on");
It prints
start caught it carry on
Asking carefully
Often you can avoid the error altogether. ?. says "only look inside if there is something there", handing back undefined instead of stopping.
JavaScript
const kid = null;
console.log(kid?.name);
const pet = { name: "Rex" };
console.log(pet?.name);
It prints
undefined Rex
Try it yourself
You typed consle.log("hi"). Which error is that?
- SyntaxError
- ReferenceError
- TypeError
- No error
What does this print?
JavaScript
try {
const nums = null;
console.log(nums.length);
} catch (err) {
console.log(err.name);
}
console.log("done");
Answer them in the app
🧯 throw & finally
Tidying up whatever happens
finally runs either way — after a clean run or after a catch. It is where you close things you opened.
JavaScript
try {
console.log("trying");
throw new Error("boom");
} catch (err) {
console.log("caught " + err.message);
} finally {
console.log("always runs");
}
It prints
trying caught boom always runs
Raising your own alarm
throw new Error("...") stops the function and sends a message to whoever called it. Use it when the function has been asked for something impossible — Python spells it raise.
JavaScript
function setAge(n) {
if (n < 0) {
throw new Error("Age cannot be negative");
}
return n;
}
try {
setAge(-1);
} catch (err) {
console.log(err.message);
}
It prints
Age cannot be negative
Try it yourself
When does a finally block run?
- Only when something went wrong
- Only when nothing went wrong
- Always — either way
- Never, it is optional
What does this print?
JavaScript
function pick(list, i) {
if (i >= list.length) {
throw new Error("no such item");
}
return list[i];
}
try {
console.log(pick(["a", "b"], 0));
console.log(pick(["a", "b"], 5));
} catch (err) {
console.log(err.message);
}
Answer them in the app
🏷️ Your Own Error Types
An error with your name on it
A class that extends Error becomes a new kind of error. Set this.name so it announces itself properly.
JavaScript
class TooLoudError extends Error {
constructor(message) {
super(message);
this.name = "TooLoudError";
}
}
try {
throw new TooLoudError("Turn it down");
} catch (err) {
console.log(err.name);
console.log(err.message);
}
It prints
TooLoudError Turn it down
Which problem was it?
instanceof asks what kind of error arrived, so one catch can handle several kinds sensibly.
JavaScript
class TooLoudError extends Error {}
try {
throw new TooLoudError("too loud");
} catch (err) {
if (err instanceof TooLoudError) {
console.log("A volume problem");
} else {
console.log("Something else");
}
}
It prints
A volume problem
Try it yourself
Why bother making your own error type?
- It runs faster
- So the catch can tell one kind of problem from another and react differently
- It makes the message shorter
- Errors need names to be caught
What does this print?
JavaScript
class SmallError extends Error {}
try {
throw new Error("plain");
} catch (err) {
console.log(err instanceof SmallError);
console.log(err instanceof Error);
}
Answer them in the app
🔎 Checking with Patterns
Describing a shape of text
A pattern between slashes is a regular expression. test answers one question: does this text match? ^ means "starts here", $ means "ends here", and + means "one or more".
JavaScript
const digitsOnly = /^[0-9]+$/;
console.log(digitsOnly.test("2026"));
console.log(digitsOnly.test("20a6"));
It prints
true false
A few useful pieces
\d is any digit, [a-z] is any small letter, and g on the end of a pattern means "every time, not just the first".
JavaScript
console.log(/\d/.test("abc"));
console.log(/^a/.test("apple"));
console.log("2026-08-10".replace(/-/g, "/"));
It prints
false true 2026/08/10
Try it yourself
What does .test(...) give back?
- The matching text
- true or false — does it match
- How many matches there are
- An error if it does not match
What does this print?
JavaScript
console.log(/^[a-z]+$/.test("Hello"));
Answer them in the app
🏆 Safety Net
Try it yourself
What does this print?
JavaScript
function risky() {
try {
return "from try";
} finally {
console.log("finally still ran");
}
}
console.log(risky());
What does this print?
JavaScript
const names = ["Al", "b0b", "Cy"];
const good = /^[A-Za-z]+$/;
console.log(names.filter((n) => good.test(n)).join(", "));
Answer them in the app