JavaScript Errors
An error stops the current code and travels up until something handles it.
An unhandled error stops the rest of the script from running.
That is why handling them matters so much on a real page.
Example
javascript
let message;
try {
const value = null;
value.length;
} catch (error) {
message = "something went wrong";
}
console.log(message);The error was caught, so the program carried on.
A syntax error stops the file loading at all; nothing runs.
A runtime error happens while the code is running.
A logic error runs fine but produces the wrong answer.
Syntax
javascript
try {
// code that might fail
} catch (error) {
// handle it
}Only runtime errors can be caught.
Code after the failing line never runs.
Catching it lets the rest of the program continue.
Example
javascript
const steps = [];
try {
steps.push("one");
null.length;
steps.push("never reached");
} catch (error) {
steps.push("caught");
}
steps.push("carried on");
console.log(steps.join(" "));The output is one caught carried on.
These are the ones you will actually meet.
Example
javascript
let message;
try {
undefinedFunction();
} catch (error) {
message = error.name;
}
console.log(message);Calling something that does not exist is a ReferenceError.
Nothing throws, so try cannot help.
Only testing finds these.
Example
javascript
function averageOfTwo(a, b) {
return a + b / 2;
}
console.log(averageOfTwo(10, 20));The answer is 20, not 15, because the brackets are missing.
Every error carries a name and a message.
Example
javascript
try {
null.length;
} catch (error) {
console.log(error.name);
console.log(typeof error.message);
}stack holds the trace of where it happened.
If a function does not handle an error, it passes to whoever called it.
This lets you catch it in one place rather than everywhere.
Example
javascript
function inner() {
null.length;
}
function outer() {
inner();
}
let message;
try {
outer();
} catch (error) {
message = "caught at the top";
}
console.log(message);Neither function handled it, so the caller did.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Errors</title>
</head>
<body>
<h1>JavaScript Errors</h1>
<p id="out"></p>
<script>
const out = document.getElementById("out");
try {
const user = null;
out.textContent = "Name: " + user.name;
} catch (error) {
out.textContent = "Could not read the user: " + error.name;
}
</script>
</body>
</html>Run the above example in the Try It Editor.
Try removing the try block:
Delete it and watch the whole script stop at that line.
Errors are a normal part of running code, not a sign of bad programming.
The question is always where to handle them.
The rest of this section covers exactly how.