How to increase multiple try-catch readability in JavaScript ?

In this article, we will try to understand how we may increase the readability of multiple try/catch blocks in JavaScript with the help of certain coding examples.

Let us first understand the fact that how we may declare a simple try/catch block (though multiple in number) and also how we may throw an error with the help of the following enlightened syntaxes.

Syntax: Following shown is the syntax by which we may declare multiple try/catch blocks in JavaScript:

 try {
 
    // Here we will add all those variables
    // or methods which tends to or responsible
    // for causing error or exception laterwards
}

catch(error_variable){

    // Here we will do something with the 
    // error_variable either handle it or
    // print it as per need
}
...

// We may add many more such blocks 
// as per the requirement...

The following shown syntax shows show we may throw an error in JavaScript:

thrown new Error(errorMessage); 
// errorMessage is in the form of string itself

Let us now have a look over the following enlightened section containing coding examples where at first, we will see how we may create multiple try/catch blocks, and then laterwards we will see how we may avoid such blocks in order to increase their readability to any of its users.

Example 1: 

• In this example, we will declare multiple try/catch blocks inside the main function.
• Inside those multiple try/catch blocks we will add as well catch several methods thrown error one after the another.
• Further after catching all the thrown errors by different functions, we will call our main function which will display all the error messages.

Javascript

<script>
    let first_error_function = (errorMessage) => {
        throw new Error(errorMessage);
    };

    let second_error_function = (errorMessage) => {
        throw new Error(errorMessage);
    };

    let third_error_function = (errorMessage) => {
        throw new Error(errorMessage);
    };

    let catchingErrors = () => {
        try {
            let result = first_error_function(
                "Error 404 !!....");
            console.log(result);
        } catch (error) {
            console.log(error.message);
        }

        try {
            let result = second_error_function(
                "Something went wrong!!....");
            console.log(result);
        } catch (error) {
            console.log(error.message);
        }

        try {
            let result = third_error_function(
                "Please try again later!!....");
            console.log(result);
        } catch (error) {
            console.log(error.message);
        }
    };

    catchingErrors();
</script>

Output:

Error 404 !!....
Something went wrong!!....
Please try again later!!....

Example 2:

• In this example, we will take into account the same function as developed in the previous example but here we will not create multiple try/catch blocks as we did in the previous example. 
• Here we will use the concept of the callback function (a function that is passed in as an argument in another function for execution).
• Here we will declare a Wrapper function (helper function) inside which we will pass two parameters first one includes the callback function and another parameter includes the error message.
• Inside that Wrapper function, we will declare one try/catch block only inside which callback function containing the error message is called, and its error is further cached in the catch block itself.
• In the main function, we will call our Wrapper function inside which we will pass the function itself and the error message for the function as an argument.
• In the end, we will store each result in different variables itself and print the result in the browser’s console.

Javascript

<script>
    let first_error_function = (errorMessage) => {
        throw new Error(errorMessage);
    };

    let second_error_function = (errorMessage) => {
        throw new Error(errorMessage);
    };

    let third_error_function = (errorMessage) => {
        throw new Error(errorMessage);
    };

    let catchingAllErrors = (callback, content) => {
        try {
            callback(content);
        } catch (errorMessage) {
            return errorMessage;
        }
    };

    let main_function = () => {
        let error_1 = catchingAllErrors(
            first_error_function, "Error 404!!...");

        let error_2 = catchingAllErrors(
            second_error_function,
            "Something went wrong!!..."
        );

        let error_3 = catchingAllErrors(
            third_error_function,
            "Please try again later!!...."
        );

        console.log("First Catched Error: " + error_1);
        console.log("Second Catched Error: " + error_2);
        console.log("Third Catched Error: " + error_3);
    };

    main_function();
</script>

Output:

First Catched Error: Error: Error 404!!...
Second Catched Error: Error: Something went wrong!!...
Third Catched Error: Error: Please try again later!!....