JavaScript Try... Catch

JavaScript Try/Catch can help you deal with errors in an elegant way that doesn't break the program.

The more JavaScript you code the more errors you'll encounter. This is a fact of life in any programming environment. Nobody's perfect and, once your scripts become more complex, you'll find there are sometimes scenarios that result in an error that you didn't think of.

JavaScript errors on web pages can scare your visitors away. How many times have you encountered a web page with errors, only to click the Back button?

OK, so you can't always prevent errors from occuring, but you can do something about them. The JavaScript "Try... Catch" statement helps you handle errors in a "nice" way.

To use the Try... Catch statement, you take any code you think could potentially result in an error, and wrap it within the try statement. You then code what you want to happen in the event of an error and wrap that in a catch statement.

Code without a Try... Catch statement:

The above code will result in an error. This is because the variable myBankBalance hasn't been declared yet.

Code with a Try... Catch statement:

<script>
function showBankBalance() {
  try {
    alert("My bank balance is $" + myBankBalance);
  }
  catch(err) {
    alert("Sorry, an error has occurred. We will fix the problem as soon as we get a pay rise!");
  }
}
</script>
<input type="button" onclick="showBankBalance();" value="Show My Bank Balance!" />

The above code will hide the error and present something more user friendly to the user. This is because the code with the error was wrapped inside a try statement. And, because there was an error, the browser outputs whatever is between the catch statement.