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.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function fun() {
throw new Error("This is error");
}
try {
fun();
}
catch (Error) {
alert(Error.message);
}
</script>
</form>
</body>
</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.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function fun() {
try{
JSON.parse("Thsi is not JSON");
}
catch (Exception) {
alert(Exception.message);
}
}
//Call to function
fun();
</script>
</form>
</body>
</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 tryting to detect it.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function fun() {
try {
throw new SyntaxError();
}
catch (Exception) {
alert(Exception.name);
}
}
//Call to function
fun();
</script>
</form>
</body>
</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:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function fun() {
try {
throw new URIError();
}
catch (Exception) {
document.write("Error type:- " + Exception.name);
}
finally {
alert("program close");
}
}
//Call to function
fun();
</script>
</form>
</body>
</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. Hope you have understood the concept. In a future article we will learn more about JavaScript.