JavaScript Errors

When a script stops

An error is a value that means “this cannot continue.” If nothing catches it, the rest of the script does not run. The console shows a message and a line number. That is useful — unless you meant to recover and keep going.

You throw on purpose with throw. The engine throws for you on bugs: reading .length of null, calling a non-function, parsing bad JSON.

throw

throw jumps out of the current function. You can throw a string, but anError object is the usual choice: it carries a message and a stack.

function requireName(name) {
  if (!name) {
    throw new Error("name is required");
  }
  return "ok: " + name;
}

console.log(requireName("Ada"));

Call requireName("") without a try and the next lines never run. Wrap the call when the caller can do something useful with the failure.

try and catch

Code inside try runs until it throws. Then the engine skips the rest of thetry and runs catch. The parameter — often err — is the thrown value.

function requireName(name) {
  if (!name) {
    throw new Error("name is required");
  }
  return "ok: " + name;
}

try {
  console.log(requireName(""));
  console.log("this line does not run");
} catch (err) {
  console.log(err.name);
  console.log(err.message);
}

console.log("script continues");

After catch, the script continues. That is the difference between handling an error and ignoring the console.

finally

finally runs after try, and after catch if there was one — whether the block succeeded or failed. Use it for cleanup that must happen either way: hiding a spinner, closing a dialog, re-enabling a button.

function parseScore(text) {
  try {
    const value = JSON.parse(text);
    return value.score;
  } catch (err) {
    console.log("bad JSON: " + err.message);
    return 0;
  } finally {
    console.log("parse finished");
  }
}

console.log(parseScore('{"score": 9}'));
console.log(parseScore("not json"));

A missing catch

You can write try / finally without catch. Thefinally still runs, then the error keeps going. If nothing higher up catches it, the rest of the script stops.

A try with neither catch nor finally is invalid. Always keep at least one of them. For a first page, always keep catch when you expect failure — empty input, bad JSON, a missing element.

Catch only what you can fix

An empty catch (err) {} hides the bug. Log the message, show it on the page, or rethrow with throw err if this layer cannot help. Do not catch errors just to make the console quiet.

<p id="out"></p>
<script>
  const out = document.getElementById("out");
  try {
    const data = JSON.parse("{");
    out.textContent = data.title;
  } catch (err) {
    out.textContent = "Could not read the data.";
    console.log(err.message);
  }
</script>

What to remember

• throw starts the error. try / catch can stop it.
• finally always runs after the try (and catch).
• Without a catch somewhere, the rest of the script does not run.
• Read err.message. Put a useful note on the page for the visitor.

Next: classes — constructor, methods, and extends as syntax for object designs.