JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Errors
Throw, and Try…Catch…Finally
The try statement specifies a code block to run (to try).
The catch statement specifies a code block to handle any error.
The finally statement specifies a code block to run regardless of the result.
The throw statement specifies a custom error.
Errors Will Happen!
While JavaScript code is executed, different errors can occur.
Errors can be coding errors made by the programmer, errors due to wrong input, and other unforeseeable things.
Example
In this example the “alert” is misspelled as “adddlert” to deliberately produce an error:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Error Handling</h2>
<p>How to use <b>catch</b> to display an error.</p>
<p id=”demo”></p>
<script>
try {
adddlert(“Welcome guest!”);
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.message;
}
</script>
</body>
</html>
Output
JavaScript Error Handling
How to use catch to display an error.
JavaScript try and catch
The try statement enables you to specify a block of code to be tested for errors while it is being executed.
The catch statement enables you to specify a block of code to be executed, if an error occurs in the try block.
The JavaScript statements try and catch come in pairs:
Example
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
JavaScript Throws Errors
When an error is seen, JavaScript normally stops and generates an error message.
The technical term for this is: JavaScript will throw an exception (throw an error).
JavaScript creates an Error object with two properties: name and message.
The throw Statement
The throw statement enables you to create a custom error.
Technically you can throw an exception (throw an error).
The exception can be a JavaScript String, a Number, a Boolean or an Object:
throw “Too big”; // throw a text
throw 500; // throw a number
If you use throw together with try and catch, you can control program flow and generate custom error messages.
Input Validation Example
This example examines input. If the value is wrong, an exception (err) is thrown.
The exception (err) is caught by the catch statement and a custom error message is displayed.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript try catch</h2>
<p>Please input a number between 5 and 10:</p>
<input id=”demo” type=”text”>
<button type=”button” onclick=”myFunction()”>Test Input</button>
<p id=”p01″></p>
<script>
function myFunction() {
const message = document.getElementById(“p01”);
message.innerHTML = “”;
let x = document.getElementById(“demo”).value;
try {
if(x == “”) throw “empty”;
if(isNaN(x)) throw “not a number”;
x = Number(x);
if(x < 5) throw “too low”;
if(x > 10) throw “too high”;
}
catch(err) {
message.innerHTML = “Input is ” + err;
}
}
</script>
</body>
</html>
Output
JavaScript try catch
Please input a number between 5 and 10:
HTML Validation
Modern browsers often use a combination of JavaScript and built-in HTML validation, with the help of prespecified validation rules specified in HTML attributes:
<input id=”demo” type=”number” min=”5″ max=”10″ step=”1″>
The finally Statement
The finally statement enables the execution of the code, after try and catch, regardless of the result:
Syntax
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript try catch</h2>
<p>Please input a number between 5 and 10:</p>
<input id=”demo” type=”text”>
<button type=”button” onclick=”myFunction()”>Test Input</button>
<p id=”p01″></p>
<script>
function myFunction() {
const message = document.getElementById(“p01”);
message.innerHTML = “”;
let x = document.getElementById(“demo”).value;
try {
if(x == “”) throw “is empty”;
if(isNaN(x)) throw “is not a number”;
x = Number(x);
if(x > 10) throw “is too high”;
if(x < 5) throw “is too low”;
}
catch(err) {
message.innerHTML = “Input ” + err;
}
finally {
document.getElementById(“demo”).value = “”;
}
}
</script>
</body>
</html>
Output
JavaScript try catch
Please input a number between 5 and 10:
Range Error
A RangeError is thrown if a number is used outside the range of legal values.
For example: You cannot set the number of significant digits of a number to 500.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Errors</h2>
<p>You cannot set the number of significant digits of a number to 500:</p>
<p id=”demo”>
<script>
let num = 1;
try {
num.toPrecision(500);
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.name;
}
</script>
</body>
</html>
Output
JavaScript Errors
You cannot set the number of significant digits of a number to 500:
RangeError
Reference Error
A ReferenceError is thrown if you use (reference) a variable that has not been declared:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Errors</h2>
<p>You cannot use the value of a non-existing variable:</p>
<p id=”demo”></p>
<script>
let x = 5;
try {
x = y + 1;
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.name;
}
</script>
</body>
</html>
Output
JavaScript Errors
You cannot use the value of a non-existing variable:
ReferenceError
Syntax Error
A SyntaxError is thrown if you try to evaluate code with a syntax error.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Errors</h2>
<p>You cannot evaluate code that contains a syntax error:</p>
<p id=”demo”></p>
<script>
try {
eval(“alert(‘Hello)”);
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.name;
}
</script>
</body>
</html>
Output
JavaScript Errors
You cannot evaluate code that contains a syntax error:
SyntaxError
Type Error
A TypeError is thrown if you use a value that is outside the range of expected types:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Errors</h2>
<p>You cannot convert a number to upper case:</p>
<p id=”demo”></p>
<script>
let num = 1;
try {
num.toUpperCase();
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.name;
}
</script>
</body>
</html>
Output
JavaScript Errors
You cannot convert a number to upper case:
TypeError
URI (Uniform Resource Identifier) Error
A URIError is thrown illegal characters in a URI function is used:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Errors</h2>
<p>Some characters cannot be decoded with decodeURI():</p>
<p id=”demo”></p>
<script>
try {
decodeURI(“%%%”);
}
catch(err) {
document.getElementById(“demo”).innerHTML = err.name;
}
</script>
</body>
</html>
Output
JavaScript Errors
Some characters cannot be decoded with decodeURI():
URIError