JavaScript Error Statements
Thetry Statement
In JavaScript, thetry statement is used to handle errors(also calledexceptions) that may occur during code execution - without stopping the entire program.
Thetry statement works together withcatch.
Sometimes it works withfinally.
And sometimes it works withthrow.
The Try Block
Thetry block contains the code that might throw an error.
If no error occurs, the catch block is skipped.
Syntax
// Code that may cause an error
} catch (error) {
// Code to handle the error
}
The Catch Block
Thecatch block executes only if an error occurs in the try block.
The error object provides details about what went wrong.
Syntax
// Code that may cause an error
} catch (error) {
// Code to handle the error
}
The Finally Block (Optional)
Thefinally block executes after the try and catch blocks,whether an error occurred or not.
It is commonly used for cleanup tasks (e.g., closing files, stopping loaders, etc.).
Syntax
// Code that may cause an error
} catch (error) {
// Code to handle the error
} finally {
// Code that always runs, no matter what
}
JavaScript Throws Errors
When an error occurs, JavaScript will normally stop and generate an error message.
The technical term for this is: JavaScript willthrow an exception (throw an error).
JavaScript will actually create anError object with two properties:name andmessage.
The throw Statement
Thethrow statement allows you to create a custom error.
Technically you canthrow an exception (throw an error).
The exception can be a JavaScriptString, aNumber, aBoolean or anObject:
throw 500; // throw a number
If you usethrow together withtry andcatch, 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:
<html>
<body>
<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.trim() == "") 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>
HTML Validation
The code above is just an example.
Modern browsers will often use a combination of JavaScript and built-in HTML validation, using predefined validation rules defined in HTML attributes:
You can read more about forms validation in a later chapter of this tutorial.
Finally Example
Thefinally statement lets you execute code, after try and catch, regardless of the result:
Syntax
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
const message = document.getElementById("p01");
message.innerHTML = "";
let x = document.getElementById("demo").value;
try {
if(x.trim() == "") 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 = "Error: " + err + ".";
} finally {
document.getElementById("demo").value = "";
}
}
