Errors Will Happen!
When executing JavaScript code, different errors can occur.
Errors can be coding errors made by the programmer, errors due to wrong input, and other unforeseeable things:
- Reference Errors
- Type Errors
- Range Errors
- URI Errors
- Syntax Errors
- Eval Error (deprecated)
- Silent Errors (next chapter)
How to Handle JavaScript Errors
The try statement allows you to define a block of code to be tested for errors while it is being executed.
The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.
The JavaScript statements try and catch come in pairs:
try {
Block of code to try
} catch(err) {
Block of code to handle errors
}
Reference Errors
A ReferenceError occurs if you use (reference) a variable that does not exist.
| Error Type | Example | Error |
|---|---|---|
| ReferenceError | fname = foo; | foo is not defined |
| ReferenceError | let x = y; let y = 5; | Cannot access y before initialization |
Examples
let x = 5;
try {
x = y + 1;
} catch(err) {
let text = err.name;
}
JavaScript Type Errors
A Type Error occurs when a value is of the wrong type or an operation is invalid on that type.
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| Error | Example | Error Message |
| TypeError | anna(5); | anna is not a function |
| Type Error | let num = 1; num.toUpperCase(); | num.toUpperCase is not a function |
Examples
let anna = 5;
try {
anna(5);
} catch(err) {
let text = err.name;
}
JavaScript Range Errors
A RangeError occurs when a value is out of its valid range.
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| Error Type | Example | Error Message |
| RangeError | new Array(-1); | Invalid array length |
| RangeError | num.toPrecision(500); | toPrecision() argument must be between 1 and 100 |
Examples
try {
new Array(-1);
} catch(err) {
let text = err.name;
}
JavaScript URI Errors
(Uniform Resource Identifier Errors)
An URIError occurs if you use illegal characters in a URI function:
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| Error Type | Example | Error Message |
| URIError | decodeURI("%%%"); | URI malformed |
Example
try {
decodeURI("%%%"); // You cannot URI decode
percent signs
} catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
JavaScript Syntax Errors
A Syntax Error occurs when the code violates JavaScript's grammar rules.
| Error | Example | Error |
|---|---|---|
| SyntaxError | fname = "John); | Invalid or unexpected token ) |
| SyntaxError | Math.round(4.6; | Missing ) after argument list |
Example
// This line cannot be parsed by JavaScript
let fName = "John);
// Execution stops here
The statement above will generate the error: Invalid or unexpected token
Execution of the program will stop!
Note: Syntax Errors are Not Catchable Syntax errors are not catchable by try...catch Syntax errors happen before runtime
Example
try {
let x = Math.round(4.6;)
} catch(err) {
let text = err.name + " " + err.description;
}
Syntax Issue
Math.round(4.6;)
The line above is syntactically invalid JavaScript. There is an extra semicolon inside the parentheses. The correct syntax should be:
Math.round(4.6);
Why
The point is how the browser handles syntax errors:
The JavaScript engine throws a SyntaxError before running the script.
Syntax errors are caught before the try...catch block executes.
This means the try block never starts. The script just fails to run (no let text = update).
Note: The browser console (F12 → Console tab) would show something like: Uncaught SyntaxError: missing ) after argument list.
JavaScript Eval Error
An EvalError indicates an error in the eval() function.
Warning: Newer versions of JavaScript do not throw EvalError. Use SyntaxError instead.
Note: See Also: JavaScript Silent Errors JavaScript Error Statements JavaScript Error Object JavaScript Debugging
