JavaScript Errors
JavaScript has several built-in error types, each describing a different kind of failure.
The type tells you what category of thing went wrong.
Recognising them makes debugging much faster.
Example
javascript
let name;
try {
null.length;
} catch (error) {
name = error.name;
}
console.log(name);The output is TypeError.
TypeError - a value is not the type you tried to use it as.
ReferenceError - a name that does not exist.
SyntaxError - the code could not be parsed.
RangeError - a value outside the allowed range.
Syntax
javascript
error instanceof TypeErrorAll of them inherit from Error.
The most common one by far, usually from null or undefined.
Example
javascript
const results = [];
try {
null.length;
} catch (error) {
results.push(error.name);
}
try {
const n = 42;
n.toUpperCase();
} catch (error) {
results.push(error.name);
}
console.log(results.join(" "));Both are TypeErrors: the value was not what the code assumed.
The name has never been declared anywhere.
Example
javascript
let name;
try {
neverDeclared;
} catch (error) {
name = error.name;
}
console.log(name);A typo in a variable name usually produces this.
A number outside what the method allows.
Example
javascript
let name;
try {
(5).toFixed(200);
} catch (error) {
name = error.name;
}
console.log(name);Infinite recursion also produces a RangeError.
You cannot catch a syntax error in your own code, because nothing runs.
You can catch one from JSON.parse, which parses at runtime.
Example
javascript
let name;
try {
JSON.parse("not json");
} catch (error) {
name = error.name;
}
console.log(name);The output is SyntaxError.
instanceof lets you handle different failures differently.
Example
javascript
function describe(fn) {
try {
fn();
return "worked";
} catch (error) {
if (error instanceof TypeError) return "a type problem";
if (error instanceof ReferenceError) return "a missing name";
return "something else";
}
}
console.log(describe(function () { null.length; }));
console.log(describe(function () { neverDeclared; }));Handle only what you can genuinely recover from.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Error Types</title>
</head>
<body>
<h1>Error Types</h1>
<p id="out"></p>
<script>
function nameOf(fn) {
try {
fn();
return "no error";
} catch (error) {
return error.name;
}
}
document.getElementById("out").innerHTML =
"null.length: " + nameOf(function () { null.length; }) +
"<br>missing name: " + nameOf(function () { neverDeclared; }) +
"<br>bad JSON: " + nameOf(function () { JSON.parse("nope"); }) +
"<br>bad range: " + nameOf(function () { (5).toFixed(200); });
</script>
</body>
</html>Run the above example in the Try It Editor.
Try your own failure:
Add a function that calls a method on undefined.
TypeError means a value was the wrong type.ReferenceError means the name does not exist.SyntaxError means the code could not be parsed.RangeError means a value was out of range.instanceof distinguishes them in a catch.The error type is the first clue when something breaks.
TypeError on null or undefined is the one you will see most.
Handling different types differently is only worth doing when you can actually recover.