Introduction

This is the Advanced JavaScript article series. In this series, we are talking about JavaScript. Already we have explained various important concepts of JavaScript. You can read them here.
In this article, we will learn exception handling in JavaScript. We know that exception handling is a very important concept of any programming language, and JavaScript is not an exceptional case. We can implement our well-known try-catch block to catch exceptions in JavaScript.

Raise our own exception

Like C# and other languages, we can raise our own exception using the throw new Error() statement. Try to understand the following code.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. </head>
  6. <body>
  7. <form id="form1" runat="server">
  8. <script>
  10. function fun() {
  11. throw new Error("This is error");
  12. }
  14. try {
  16. fun();
  17. }
  18. catch (Error) {
  19. alert(Error.message);
  20. }
  21. </script>
  22. </form>
  23. </body>
  24. </html>
From the fun() function we are throwing our own custom exception. Within the try block we are catching an exception.
Exception in JavaScript
Catch exception in normal operation
In the example above we have seen how to throw our own exception. Just as in any other function, we can trap an exception in normal function execution. Here we are trying to trap an exception in JSON parsing.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. </head>
  6. <body>
  7. <form id="form1" runat="server">
  8. <script>
  9. function fun() {
  10. try{
  11. JSON.parse("Thsi is not JSON");
  12. }
  13. catch (Exception) {
  14. alert(Exception.message);
  15. }
  17. }
  18. //Call to function
  19. fun();
  20. </script>
  21. </form>
  22. </body>
  23. </html>
Here is sample code. The JSON parser is throwing an error and catch is catching the error. The message type is showing that:
Catch Exception in JavaScript
The error type is due to an unexpected token. This is due to a bad format of JSON data.

Checking various type of Error in JavaScript

In this section we will check various types of error types that JavaScript supports. We are seeing that it supports various types, like EvalError, MediaError, PositionError and many more.
Error in JavaScript

Detect error type in JavaScript

In a catch block, we can check which type of error has been thrown and depending on that we can make a decision. In this example, we are throwing a SyntaxError and within the catch block, we are trying to detect it.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. </head>
  6. <body>
  7. <form id="form1" runat="server">
  8. <script>
  9. function fun() {
  10. try {
  11. throw new SyntaxError();
  12. }
  13. catch (Exception) {
  14. alert(Exception.name);
  15. }
  17. }
  18. //Call to function
  19. fun();
  20. </script>
  21. </form>
  22. </body>
  23. </html>
We are seeing that, it's showing a Syntax error when we display the name property of the Exception.
Detect Error in JavaScript

Finally block of try-catch

Generally we implement a finally block to perform additional work at the time of exception processing; the same is true in JavaScript. We can implement a finally block to take some action. Have a look at the following example:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. </head>
  6. <body>
  7. <form id="form1" runat="server">
  8. <script>
  9. function fun() {
  10. try {
  11. throw new URIError();
  12. }
  13. catch (Exception) {
  14. document.write("Error type:- " + Exception.name);
  15. }
  16. finally {
  17. alert("program close");
  18. }
  19. }
  20. //Call to function
  21. fun();
  22. </script>
  23. </form>
  24. </body>
  25. </html>
The finally block is executing after catch block. Here is sample output.
Finally block of try-catch in JavaScript

Conclusion

In this article, we have learned to implement exception handling in JavaScript applications. I hope you have understood the concept. In a future article, we will learn more about JavaScript.