JavaScript Errors & Error Types
JavaScript has several built-in error types - each indicating a different kind of problem. Recognizing error types helps you debug faster and write better error handling.
Error Types
- SyntaxError - Invalid code structure: const x = (missing parenthesis. Caught before runtime
- ReferenceError - Using an undeclared variable: console.log(notDeclared)
- TypeError - Wrong type operation: null.toString(), calling non-function
- RangeError - Value out of range: new Array(-1), infinite recursion (stack overflow)
- URIError - Invalid URI: decodeURIComponent('%')
- Error - Generic error. Base class for all errors. Has message, name, and stack properties
Error Types Code
// SyntaxError - parse-time (can't be caught with try/catch there)
// const x = ; // SyntaxError: Unexpected token ';'
// ReferenceError - undeclared variable
try {
console.log(undeclaredVar);
} catch (e) {
console.log(e.name + ": " + e.message);
// ReferenceError: undeclaredVar is not defined
}
// TypeError - wrong type
try {
const num = null;
num.toString();
} catch (e) {
console.log(e.name + ": " + e.message);
// TypeError: Cannot read properties of null (reading 'toString')
}
// RangeError - out of range
try {
const arr = new Array(-1);
} catch (e) {
console.log(e.name + ": " + e.message);
// RangeError: Invalid array length
}
// Error properties
try {
JSON.parse("invalid json");
} catch (error) {
console.log("Name:", error.name); // SyntaxError
console.log("Message:", error.message); // Unexpected token i...
console.log("Stack:", error.stack); // full stack trace
}Tip
Tip
Read the error type first, then the message. TypeError means you called a method on the wrong type. ReferenceError means a variable doesn't exist. SyntaxError means your code has invalid structure. This narrows the problem instantly.
Never swallow errors silently. Log, report, recover gracefully.
Common Mistake
Warning
Catching errors without checking the type. catch(e) { console.log(e) } loses context. Use e.name, e.message, and e.stack for detailed debugging. In production, send these to your error tracking service.
Practice Task
Note
Error types: (1) Intentionally trigger each error type (TypeError, ReferenceError, SyntaxError, RangeError). (2) Read the error messages and identify the cause. (3) Fix each error and explain what went wrong.
Quick Quiz
Key Takeaways
- JavaScript has several built-in error types - each indicating a different kind of problem.
- SyntaxError - Invalid code structure: const x = (missing parenthesis. Caught before runtime
- ReferenceError - Using an undeclared variable: console.log(notDeclared)
- TypeError - Wrong type operation: null.toString(), calling non-function