JavaScript Errors
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
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.
Kinds of Error
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
Syntax
javascript
try {
// code that might fail
} catch (error) {
// handle it
}Only runtime errors can be caught.
An Unhandled Error Stops Everything
Code after the failing line never runs.
Catching it lets the rest of the program continue.
Example
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.
Runtime Errors
These are the ones you will actually meet.
Example
Example
javascript
let message;
try {
undefinedFunction();
} catch (error) {
message = error.name;
}
console.log(message);Calling something that does not exist is a ReferenceError.
Logic Errors Are Not Caught
Nothing throws, so try cannot help.
Only testing finds these.
Example
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.
The Error Object
Every error carries a name and a message.
Example
Example
javascript
try {
null.length;
} catch (error) {
console.log(error.name);
console.log(typeof error.message);
}stack holds the trace of where it happened.
Errors Travel Upwards
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
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
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>Try It Yourself
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.
Important Points
- An unhandled error stops the rest of the script.
- Syntax errors stop the file loading at all.
- Runtime errors happen while the code runs.
- Logic errors do not throw, so they cannot be caught.
- Errors travel up to the calling code.
Conclusion
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.