JavaScript try…catch Statement
The try-catch statement in JavaScript is used to handle the runtime errors (exceptions). This is very common in most programming languages to handle exceptions. A try-catch statement can handle only runtime errors. The try block must be followed by either exactly one catch block or one finally block (or one of both).
Inside the try{} statement, you can write the code having errors or possibilities of the errors. You can add regular JavaScript code into the try{} statement.
The catch{} statement is used to handle the errors. When any error occurs in the code of the try{} statement, the JavaScript run engine executes the code of the catch{} statement to handle the errors.
If no error occurs in the code of the try{} statement, it will skip the code of the catch{} statement and execute the next lines of the code.
Syntax
You can follow the syntax below to use the try-catch statements in the code to handle exceptions.
try{// JavaScript code}catch(error){// Handle error}
You can print the error object in the catch{} statement or the custom error message based on the error type to show errors.
Parameters
- error − The catch{} statement takes the error object as a parameter. It contains the name and message property. However, it is an optional parameter.
Example
In the code below, we assign the num1 variables value to the num variable inside the try{} statement. Here, the num1 variable is not defined. So, it will throw an error.
In the catch{} statement, we print the value of the error object’s name and message property.
In the output, you can observe that it throws a reference error with a proper error message.
<html><body><div id ="demo"></div><script>const output = document.getElementById("demo");try{let num = num1;}catch(err){
output.innerHTML +="The error name is: "+ err.name +"<br>";
output.innerHTML +="The error message is: "+ err.message +".<br>";}</script></body></html>
Output
The error name is: ReferenceError
The error message is: num1 is not defined.
When any error occurs in the try{} statement, it skips the execution of the remaining code and executes the code of the catch{} statement.
Lets understand it via the example below.
Example
In the code below, we invoke the welcome() function, which is not defined. So, it will throw a reference error.
In the catch{} statement, we handle the error.
In the output, you can see that it prints the start message of the try{} statement, the start message of the catch{} statement, and the error message. It skips the end message of the try{} statement as an error occurs before that.
<html><body><div id ="demo"></div><script>const output = document.getElementById("demo");try{
output.innerHTML +="In the start of try block <br>";welcome();
output.innerHTML +="In the end of try block <br>";}catch(err){
output.innerHTML +="In the catch block <br>";
output.innerHTML +="The error name is: "+ err.name +"<br>";
output.innerHTML +="The error message is: "+ err.message +".<br>";}</script></body></html>
Output
In the start of try block
In the catch block
The error name is: ReferenceError
The error message is: welcomeis not defined.
Note − The try-catch statement doesnt allow you to handle the syntax errors. It can handle only runtime errors.
For example, if you run the below code. It will show you an error in the browsers console but cant catch the error using the {} statement.
try{let num =;}catch(err){// Error handling}
JavaScript trycatchfinally Statement
The finally{} statement allows you to execute the particular code after completing the execution of the try{} and catch{} statements.
JavaScript always executes the code of the finally{} statement, whether the error occurs in the code of the try{} statement. If an error occurs, it executes the code of the catch{} statement and then executes the code of the finally{} statement.
Example
In the code below, we assign the value of the variable ‘b’ to the variable ‘a’ inside the try{} statement. It throws an error.
In the catch{} statement, we print the error.
In the finally{} statement, it prints the message.
You can observe the output that it runs the code of the try{} statement first, the code of the catch{} statement after that, and the code of the finally{} statement at last.
<html><body><div id ="output"></div><script>try{let a = b;}catch(e){
document.getElementById("output").innerHTML = e;}finally{
document.getElementById("output").innerHTML +="<br>Finally block always executes";}</script></body></html>
Output
ReferenceError: b is not defined
Finally block always executes
Example
In the example below, we have written the code without any error into the try{} statement.
Also, we have added the catch{} and finally{} statements.
The output shows that it executes the try{} statement code and finally{} statement code after that. It skips the execution of the catch{} statement, as the code is error-free.
<html><body><div id ="demo"></div><script>const output = document.getElementById("demo");try{let a =10;
output.innerHTML ="Value of a is "+ a +"<br>";}catch(e){
output.innerHTML = e.name +" : "+ e.message;}finally{
output.innerHTML +="Inside the finally block.";}</script></body></html>
Output
Value of a is 10
Inside the finally block.
JavaScript Throw Statement
When any error occurs in the code, JavaScript throws an error by default. But you can also throw the error manually. For example, you are doing the form data validation. If the data is invalid, you can throw the error and ask users to correct the data.
When you throw an error using the throw statement, the code present after that in the try{} statement will not executed, and it will execute the code of the catch{} statement.
You can follow the syntax below to throw an error using the throw statement.
throw<error>;
In the above syntax, <error> can be a Error object, string, number, primitive value, or a particular type of error object. It is a good practice to throw an Error object rather than throwing the primitive value.
Example: Throwing the Error object
In the code below, we throw an Error object from the try{} statement using the throw statement. It stops the execution of the remaining code of the throw statement and executes the code of the catch{} statement.
<html><body><div id ="demo"></div><script>const output = document.getElementById("demo");try{
output.innerHTML +="Start of the try block. <br />";thrownewError("Custom error");
output.innerHTML +="End of the try block. <br />";//not executed}catch(e){
output.innerHTML +="Catch block: Caught exception. <br />";
output.innerHTML += e.name +" : "+ e.message;}</script></body></html>
Output
Start of the try block
Catch block: Caught exception.
Error: Custom error
Example: Throwing the primitive value
In the code below, we throw the primitive numeric value from the try{} statement. In the catch{} statement, we get the thrown primitive value and print it.
<html><body><div id ="output">The error message is:</div><script>try{throw20;}catch(e){
document.getElementById("output").innerHTML += e;}</script></body></html>
Output
The error message is: 20
Example: Input Validation Example
In the code below, we have defined the <input> element of the number type to take the user age as an input.
When the user clicks the submit age button, it invokes the handleAge() function. The handleAge() function checks whether the age is less than 18. If yes, it throws the rangeError.
The catch{} statement prints the error message to validate the age.
<html><body><p>Age:<input type ="number" id ="age" value ="20"></p><button onclick ="handleAge()"> Submit Age </button><p id ="demo"></p><script>const output = document.getElementById("demo");functionhandleAge(){let age = document.getElementById("age").value;try{if(age <18){throwRangeError("You are not eligible to vote");}else{
output.innerHTML +="<br>You are eligible to vote";}}catch(e){
output.innerHTML +="<br>The error is - "+ e;}}</script></body></html>
Output
Age: 20
Submit Age
The error is - RangeError: You are not eligible to vote
Nesting Try Blocks
Sometimes, developers are required to write the nested try-catch statements. The nested try-catch means a try block inside the try block.
If the inner catch{} statement cant handle the error, the outer catch{} statement may handle it. You can also skip the inner catch{} statement, but in this case, you need to write the finally{} statement with the try{} statement.
Example
We have used the two nested try{} statements in the code below. We have added the try-finally statement inside the outer try{} statement.
The inner try{} statement throws the error, handled in the outer catch{} statement.
<html><body><div id ="demo"></div><script>const output = document.getElementById("demo");try{try{throwError("Error in the inner try block");}finally{
output.innerHTML +="Inside the inner finally block. <br>";}}catch(e){
output.innerHTML +="Inside the outer catch block. <br>";
output.innerHTML +="Error: "+ e.message;}</script></body></html>
Output
Inside the inner finally block.
Inside the outer catch block.
Error: Error in the inner try block
The Rethrow Error
Sometimes, it can happen that the catch{} statement cant handle the error. In such cases, you can rethrow the error from the catch block using the throw statement.
The outer catch{} statement can handle the rethrown error if it is available.
Example
In the code below, we have created the two nested try-catch blocks. In the inner try block, we throw the error using the throw statement. The inner catch{} statement will catch the error, and we rethrow the error from the inner catch{} statement.
After that, we handle the error in the outer catch{} statement.
<html><body><div id ="demo"></div><script>let output = document.getElementById("demo");try{try{throw20;}catch(e){// Rethrowing the error.
output.innerHTML ="Inside the inner catch block. <br>";
output.innerHTML +="Error: "+ e +"<br> <br>";throw e;}}catch(e){
output.innerHTML +="Inside the outer catch block. <br>";
output.innerHTML +="Error: "+ e;}</script></body></html>
Output
inside the inner catch block.
Error: 20
Inside the outer catch block.
Error: 20
Conditional Catch-blocks
Inside the catch{} block, you can use the if-else statement to handle the errors conditionally. In this way, you can use the single catch{} statement for the multiple try{} statements.
In the catch{} statement, you can check the type of the error using the instanceOf operator and handle the error according to the error type.
Example
In the code below, we have called the welcome function inside the try{} statement, and the welcome() function is not defined.
In the catch{} statement, we check the type of the error using the instanceOf operator and print the message on the web page according to the type of the error.
<html><body><div id ="demo"></div><script>const output = document.getElementById("demo");try{welcome();// Function not defined}catch(e){if(e instanceofReferenceError){
output.innerHTML ="Reference error is occurred.";}elseif(e instanceofTypeError){
output.innerHTML ="Type error is occurred.";}elseif(e instanceofRangeError){
output.innerHTML ="Range error is occurred.";}elseif(e instanceofSyntaxError){
output.innerHTML ="Syntax error is occurred.";}else{
output.innerHTML ="Error is occurred.";}}</script></body></html>
Output
Reference error is occurred.
JavaScript try…catch with setTimeout() Method
Using the try-catch statement with the asynchronous JavaScript code wont catch the error thrown from the try block.
The reason is that JavaScript executes the asynchronous code, when all main thread code gets executed.
Lets understand it via the example below.
Example
In the code below, we used the setTimeOut() method inside the try{} statement. It executes the callback function after 1000 milliseconds. In the callback function, we throw the error using the throw statement.
In the output, you can observe that the cathc{} statement is not catching the error, and it prints the error in the browsers console.
<html><body><div id ="demo"></div><script>const output = document.getElementById("demo");try{
output.innerHTML ="Inside the try block. <br>";setTimeout(()=>{thrownewError("Whoops!");},1000);}catch(err){
output.innerHTML +="Inside the catch block. <br>";
output.innerHTML = err;}</script></body></html>
Output
Inside the try block.
Promise-based Errors
When any error occurs while consuming the promise code, you can use the catch() method to handle the error. Alternatively, you can pass the error handler as a second parameter of the then() method.
Examples
In the code below, we have created the promise and rejected it after 1000 milliseconds.
After that, we used the then() and catch() method to handle the promise. Here, we have rejected the promise so that control will execute the code of the catch() method.
<html><body><div id ="demo"></div><script>const output = document.getElementById("demo");
output.innerHTML ="The promise is pending...";let promise =newPromise((resolve, reject)=>{setTimeout(()=>{reject("The promise is rejected!");},1000);});
promise
.then((result)=>{
output.innerHTML = result;}).catch((error)=>{
output.innerHTML = error;});</script></body></html>
Output
The promise is rejected !
Types of Errors in JavaScript
There are different types of errors that JavaScript can throw. Here, we will learn each type one by one with examples.
JavaScript Range Error
The JavaScript code throws a range error when the value is out of the specified range.
Example
In the code below, we used the toPrecision() method and passed 1000 as an argument. It throws the range error, as the number cant have 1000 digits.
<html><body><div id ="output"></div><script>try{let num =10;
num.toPrecision(1000);}catch(err){
document.getElementById("output").innerHTML = err;}</script></body></html>
Output
RangeError: toPrecision() argument must be between 1 and 100
JavaScript Reference Error
The reference error occurs when you try to access the undefined variables, functions, class methods, etc.
Example
In the code below, we execute the test() method of the window object. Here, the test() method is not defined, so it throws the reference error.
<html><body><div id ="output"></div><script>try{
window.test();}catch(err){
document.getElementById("output").innerHTML = err;}</script></body></html>
Output
TypeError: window.test is not a function
JavaScript Type Error
The JavaScript code throws the type error if you dont use the values of the valid type with methods or operators.
Example
In the example below, we use the toLowerCase() method with the boolean variable, but the toLowerCase() method is supported by string values only. So, it throws the type error.
<html><body><div id ="output"></div><script>try{let bool =true;
bool.toLowerCase();}catch(err){
document.getElementById("output").innerHTML = err;}</script></body></html>
Output
TypeError: bool.toLowerCase is not a function
JavaScript URI (Uniform Resource Identifier) Error
The URI error occurs when you dont pass the valid URL as an argument of the encodeURI, decodeURI, etc. methods.
Example
In the example below, we passed the invalid encoded URI as an argument of the decodeURI() method. So, it throws the URIError.
<html><body><div id ="output"></div><script>try{decodeURI("%");}catch(err){
document.getElementById("output").innerHTML = err;}</script></body></html>
Output
URIError: URI malformed
