- Home
- /
- Tutorials
- /
- JavaScript Tutorial
- /
- JavaScript Error Types
JavaScript Errors
JavaScript Error Types
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
Example
javascript
let name;
try {
null.length;
} catch (error) {
name = error.name;
}
console.log(name);The output is TypeError.
The Common Types
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
Syntax
javascript
error instanceof TypeErrorAll of them inherit from Error.
TypeError
The most common one by far, usually from null or undefined.
Example
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.
ReferenceError
The name has never been declared anywhere.
Example
Example
javascript
let name;
try {
neverDeclared;
} catch (error) {
name = error.name;
}
console.log(name);A typo in a variable name usually produces this.
RangeError
A number outside what the method allows.
Example
Example
javascript
let name;
try {
(5).toFixed(200);
} catch (error) {
name = error.name;
}
console.log(name);Infinite recursion also produces a RangeError.
SyntaxError from JSON
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
Example
javascript
let name;
try {
JSON.parse("not json");
} catch (error) {
name = error.name;
}
console.log(name);The output is SyntaxError.
Reacting to the Type
instanceof lets you handle different failures differently.
Example
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
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>Try It Yourself
Run the above example in the Try It Editor.
Try your own failure:
Add a function that calls a method on undefined.
Important Points
TypeErrormeans a value was the wrong type.ReferenceErrormeans the name does not exist.SyntaxErrormeans the code could not be parsed.RangeErrormeans a value was out of range.instanceofdistinguishes them in acatch.
Conclusion
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.
