JavaScript Errors — try, catch, finally

Every program has mistakes. A variable is spelled wrong, a number is divided by nothing, a server does not answer. In JavaScript, a mistake like that is called an error, and by default it stops the whole script — everything after the error never runs. That is why a small typo can blank out an entire page. The fix is to catch the error before it reaches the top: try, catch and finally.

Diagram — see how it fits together

Think of a chai shop order. You try to make the chai (the risky step). If the milk is finished, you catch the problem and serve black tea instead (the backup plan). And finally, whether the order worked or not, you clean the counter (the tidy-up). The shop never closes because of one missing item — and your page should not break because of one bad value.

try, catch, finally — the three parts

try {
  // risky code — if it throws, jump to catch
  let total = price * qty;
} catch (error) {
  // backup plan — error.message tells you what went wrong
  console.log("Something went wrong: " + error.message);
} finally {
  // always runs — tidy up here
  console.log("Done.");
}

The try block holds the risky code. If anything inside it throws an error, JavaScript jumps straight to the catch block and skips the rest of try. The catch block receives the error as an object, and error.message holds a short description. The finally block runs no matter what — error or no error — so it is the right place for clean-up, like closing a loading message.

throw — making your own errors

Sometimes the code runs fine but the value is wrong — a negative age, an empty name, a quantity of zero. JavaScript does not know that is an error, so you throw one yourself:

function checkAge(age) {
  if (age < 0) {
    throw new Error("Age cannot be negative.");
  }
  return "Age is fine.";
}

throw new Error("...") stops the function immediately and jumps to the nearest catch. This turns a silent wrong value into a loud, visible problem — much easier to find and fix than a bill that quietly comes out wrong.

Common errors — learn to read them

• ReferenceError: x is not defined — you used a variable that does not exist, usually a spelling mistake. Check the name letter by letter.
• TypeError: Cannot read properties of null — you tried to use something that is null, often because getElementById could not find the element. Check the id in the HTML.
• SyntaxError: Unexpected token — the code itself is written wrong, like a missing bracket. The browser points at the line — start there.
• RangeError: Maximum call stack size exceeded — a function calls itself forever. Check that your recursion or loop has a way out.

Read the first line of the error message, not the whole stack. The first line usually tells you the type and the place — that is enough to find the bug in most cases.

Common mistakes

• Wrapping everything in one giant try — you lose track of where the error actually came from. Keep the try block small.
• An empty catch block — the error is swallowed silently and the bug becomes invisible. At least log error.message.
• Forgetting that try only catches errors that happen inside it — an error in a timer or a promise needs its own handling.
• Using throw "some string" instead of throw new Error("...") — a string has no stack trace, so you cannot find where it came from.

Remember

• try holds the risky code, catch holds the backup plan, finally always runs.
• throw new Error("...") makes your own error when a value is wrong.
• Read the first line of the error — it usually names the type and the place.
• Try the risky step, catch the fall, finally tidy up.

Example explained

• let age = Number(document.getElementById("age").value); — reads the age box and converts the string to a number.
• if (isNaN(age)) { throw new Error("Please type a number."); } — if the input is not a number, we throw our own error instead of continuing with a broken value.
• if (age < 0) { throw new Error("Age cannot be negative."); } — a second check: a negative age is impossible, so it is an error too.
• catch (error) { ... error.message ... } — whichever error was thrown, the message is shown on the page in red. The page never breaks.
• finally { document.getElementById("age").value = ""; } — the input box is cleared whether the check passed or failed, so the next try starts clean.