JavaScript Error Handling with Try, Catch, and Throw

JavaScript has a great way to deal with errors using try and catch. Normally, if an error occurs, one of two things might happen:

• The browser silently errors, causing some JavaScript code near the error not to execute.
• The browser creates annoying popup boxes alerting the user that an error occurred.

Neither of these options is ideal, which is why we handle errors ourselves. While wrapping your entire code in a try/catch statement is not practical, using it in specific places, such as when dealing with user input, is extremely useful.

When writing JavaScript, think about how your code could potentially mess up and cause an error. If you identify a potential issue, use a try/catch statement to handle it gracefully.

Example

var animalArray = new Array("Meerkat", "Dog", "Squirrel");
var userInputVariable = document.getElementById('exampleTextField').value;
try {
    document.getElementById('inputTest').innerHTML = animalArray[userInputVariable].length;
} catch (e) {
    document.getElementById('inputTest').innerHTML = "Please type a 0, 1, or 2.";
}

Explanation

In this example, the user is prompted to input a number between 0 and 2. The corresponding item in the array is used to display its length. If the user inputs an invalid value, such as 4, it triggers an error. The catch block handles this error by displaying a friendly message: "Please type a 0, 1, or 2."

Enhancing Error Handling with Throw

The throw keyword can further refine error handling by specifying the type of error. This allows us to provide more specific feedback to the user.

Example

var animalArray = new Array("Meerkat", "Dog", "Squirrel");
var userInputVariable = document.getElementById('exampleTextField2').value;
try {
    if (userInputVariable > 2) {
        throw "Err1";
    } else if (userInputVariable < 0) {
        throw "Err2";
    } else if (isNaN(userInputVariable)) {
        throw "Err3";
    } else {
        document.getElementById('inputTest2').innerHTML = animalArray[userInputVariable].length;
    }
} catch (e) {
    switch (e) {
        case "Err1":
            document.getElementById('inputTest2').innerHTML = "That value is too high.";
            break;
        case "Err2":
            document.getElementById('inputTest2').innerHTML = "That value is too low.";
            break;
        case "Err3":
            document.getElementById('inputTest2').innerHTML = "That value is not a number.";
            break;
        default:
            document.getElementById('inputTest2').innerHTML = "Please type a 0, 1, or 2.";
            break;
    }
}

Explanation

In this enhanced example, specific errors are thrown for invalid inputs:

• Err1: The input value is greater than 2.
• Err2: The input value is less than 0.
• Err3: The input value is not a number.

The catch block uses a switch statement to handle each error type. For example, if the user inputs 4, it triggers Err1, and the browser displays "That value is too high." The default case provides a fallback message: "Please type a 0, 1, or 2."

Conclusion

Using try, catch, and throw, you can handle errors effectively and provide clear feedback to users. Always include a fallback plan, such as the default case in the switch statement, to ensure your application gracefully handles unexpected inputs.