How to PROPERLY use JavaScript try catch [SOLVED]

When we develop applications using JavaScript, we might encounter errors, and need to be able to deal with them in timely fashion. One of such means to deal with errors is using the try/catch statement.

In this article, we will discuss error handling and how we can make use of try and catch statements to deal with errors and exceptions.

Error Handling in JavaScript

In JavaScript, an error occurs when the code is executing, and it can’t continue due to an unexpected or invalid situation. For example, a syntax error, reference error, type error or an exception can cause an error to occur. When an error occurs, the code stops executing and an error message is displayed in the console.

With error handling, we can catch the errors and determine how the error affects your system. With such in place, we can prevent our program from crashing or behaving in ways we don’t want it to. That’s where try and catch statements.

The basic syntax of the try statement is:

try { 
    tryStatements 
} 
[catch (exception) 
    {catchStatements}] 
[finally {finallyStatements}]

The following parts comprise these statements:

tryStatements: A set of statements that executes once. If these statements throw an exception, execution transfers to a catch statement if there is one.
exception The name of the variable you want to use to hold the object (usually an Error object) passed to the catch statement.
catchStatements: A set of statements that executes if an exception was thrown.
finallyStatements: A set of statements that is executed before the try…catch statement completes. These statements execute whether or not an exception was thrown or caught.

The `try/catch` statement

To handle errors in JavaScript, you can use the try statement. The try statement is used to wrap a section of code that might cause an error. If an error occurs within the try block, the code execution is transferred to the catch block.

Let’s illustrate how the try/catch statement to deals with error with a simple example. In this example, the code inside the try block is attempting to add 1 to the value of y, which hasn’t been defined. This will cause an error, and the code inside the catch block will execute, displaying the error message "An error occurred: ReferenceError: y is not defined".

try {
    let x = y + 1;
    console.log(x);
} catch (error) {
    console.log("An error occured: " + error);
}

In this example, the code in the try block attempts to perform an operation that may throw an error. If an error is thrown, the code in the catch block is executed, and the error is passed to it as an argument. The error can then be logged or processed in some way.

Output

An error occured: ReferenceError: y is not defined

Working with Exceptions

Exceptions are a type of error that can be raised in a JavaScript program. They can be raised manually by the programmer using the throw statement. The throw statement allows you to raise an exception with a custom message.

Here is the typical structure for how we can create a throw statement and make use of them with try/catch statements.

try {
    throw "My custom error message";
} catch (error) {
    console.log(error);
}

Division in JavaScript can be confusing, and a typical example is division by zero where JavaScript returns Infinity, we can create a throw statement that will deal with that which we can use alongside a try/catch statement to deal with such scenarios.

try {
    let dividend = 13;
    let divisor = 0;
    const result = dividend / divisor;
    if (result === Infinity) {
        throw new Error("Division by zero");
    }
} catch (error) {
    console.log("An error occurred: " + error);
}

Output

An error occurred: Error: Division by zero

In the code, we create a new Error exception that throws Division by zero when a division operation returns Infinity and the catch section handles the exception when our codes happens to throw the error.

Conditional catch statements

Since we can determine the type of an error using the Error object’s name property, we can add code to handle specific types of errors. Here’s an example, where we are using a switch statement to handle different types of exceptions:

<HTML> 
    <HEAD> 
        <TITLE> 
            Handling Specific Errors 
        </TITLE> 
    </HEAD> 
    <BODY> 
        <H1>Handling Specific Errors</H1> 
        <SCRIPT LANGUAGE="JavaScript"> 
        <!--
            try { 
                var myData = undefinedValue 
            } 
            catch (e){ 
                switch (e.name){ 
                case "EvalError": 
                    document.write("An EvalError error occurred.") 
                    break 
                case "RangeError": 
                    document.write("A RangeError error occurred.") 
                    break 
                case "ReferenceError": 
                    document.write("A ReferenceError error occurred.") 
                    break 
                case "SyntaxError": 
                    document.write("A SyntaxError error occurred.") 
                    break 
                case "TypeError": 
                    document.write("A TypeError error occurred.") 
                    break 
                case "URIError": 
                    document.write("An URIError error occurred.") 
                    break 
                default: 
                    document.write("An error occurred.") 
                } 
            } 
        / / --> 
        </SCRIPT> 
     </BODY> 
</HTML>

Nested try-catch blocks

It’s possible to include a try...catch statement inside another try statement. Indeed, you can go further and have a try...catch inside the try statement of this inner try...catch, or even another inside that, the limit being what it’s actually sensible to do.

So why would you use nestedtry...catchstatements? Well, you can deal with certain errors inside the innertry…catchstatement. If, however, you’re dealing with a more serious error, the innercatchclause could pass that error to the outercatchclause by throwing the error to it.

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Chapter 18: Example 1</title>
</head>
<body>
    <script>
try {
    try {
       ablurt("This code has an error");
    } catch(exception) {
       var name = exception.name;

       if (name == "TypeError" || name == "ReferenceError") {
          alert("Inner try...catch can deal with this error");
       } else {
          throw exception;
       }
    }
} catch(exception) {
    alert("The inner try...catch could not handle the exception.");
}
    </script>
</body>
</html>

In this code you have twotry...catchpairs, one nested inside the other.

The innertrystatement contains a line of code that contains an error. Thecatchstatement of the innertry...catchchecks the value of the error’s name. If the exception’s name is eitherTypeErrororReferenceError, the innertry...catchdeals with it by way of analertbox (see Appendix B for a full list of error types and their descriptions). Unfortunately, and unsurprisingly, the type of error thrown by the browser depends on the browser itself. In the preceding example, IE reports the error as aTypeErrorwhereas the other browsers report it as aReferenceError.

If the error caught by the innercatchstatement is any other type of error, it is thrown up in the air again for thecatchstatement of the outertry...catchto deal with.

Throwing an Exception

Youalso can throw exceptions yourself, using thethrowstatement:

throw expression

Here is an example, Suppose you bite into a pickle, but that you can’t stand pickles. In that case, you could throw a bad taste exception like this:

<HTML> 
    <HEAD> 
        <TITLE> 
            Throwing an Exception 
        </TITLE> 
    </HEAD> 

    <BODY> 
        <H1>Throwing an Exception</H1> 
        <SCRIPT LANGUAGE="JavaScript"> 
        <!--
            try { 
                throw "Bad Taste Exception" 
            } 
            catch (e){ 
                document.write("An error occurred: " + e) 
            } 
        // --> 
        </SCRIPT> 
     </BODY> 
</HTML>

This throws the simple text string"Bad Taste Exception“as an exception, and that string is passed to thecatchstatement, where the code displays it. However, the more standard way to do this is to create anErrorobject, throw that object, and use the object’smessageproperty in acatchstatement to find out what error occurred:

The `finally` statement

The finally statement is an optional part of the try/catch/finally structure in JavaScript. The finally block is executed after the try block and catch block, regardless of whether an error occurs or not. The finally block can be used to clean up resources or perform any other necessary tasks, even if an error occurs in the try block. The syntax for using the finally block is:

try {
    // code to be executed
} catch (error) {
    // code to be executed if an error occurs
} finally {
    // code to be executed after the try and catch blocks
}

To illustrate, we can add a finally statement to the previous code snippet that will show that our operation has been completed. So, after either the try/catch as done its operation, the finally statement gets executed.

try {
    let dividend = 13;
    let divisor = 0;
    const result = dividend / divisor;
    if (result === Infinity) {
        throw new Error("Division by zero");
    }
} catch (error) {
    console.log("An error occured: " + error);
} finally {
    console.log("Math operation completed.");
}

Output

An error occured: Error: Division by zero
Math operation completed.

Summary

In conclusion, error handling is an important aspect of JavaScript programming that allows developers to write code that can handle exceptions and errors. The try statement is used to wrap a section of code that might cause an error, the catch statement is used to handle errors that occur within the try block, and the finally statement is an optional block that can be used to clean up resources or perform other necessary tasks. With the use of the try, catch, and finally statements, JavaScript developers can write code that is more robust and less prone to errors.

References

try…catch - JavaScript | MDN (mozilla.org)

Error Handling in JavaScript

The try/catch statement

Working with Exceptions

Conditional catch statements

Nested try-catch blocks

Throwing an Exception

The finally statement

Summary

References

Related Articles

The `try/catch` statement

The `finally` statement