What is Try Catch in JavaScript and how it works?

No matter how good you are at programming, there will be errors in certain scripts. These errors might occur because of unexpected user input, an erroneous server response or any other reason. Try catch in JavaScript allows you to catch errors and, instead of dying, do something more reasonable. In this article, we will see how JavaScript uses the try-catch to handle the exception in the following sequence:

• Handling Runtime Error in JavaScript
• What is Try Catch in JavaScript?
• Try Catch Example

Let’s begin.

Handling Runtime Error in JavaScript

Error handling has been evolving since the ages of Netscape and IE4. You don’t need to settle for what the browser throws in your face in an event of a JavaScript error but instead, you can take the matter into your own hands. The try-catch statement of JavaScript helps you in rerouting when a JavaScript exception is encountered.

Along with other defensive coding techniques such as Object detection and the onError event, try-catch adds the ability to navigate around certain errors that in the past would have instantly stopped your script at its tracks.

What is Try Catch in JavaScript?

The latest versions of JavaScript added exception handling capabilities. JavaScript implements the try-catch construct as well as the throw operator to handle exceptions. You can catch programmer-generated and runtime exceptions, but you cannot catch JavaScript syntax errors. For more check out this Full Stack Developer Certification today.

The try statement is used to define a block of code to be tested for errors while it is being executed. Whereas, the catch statement is used to define a block of code to be executed if an error occurs in the try block.

The JavaScript statements try and catch come in pairs:

try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}

When an exception occurs in the try block, the exception is placed in err and the catch block is executed.

Try Catch Example

Here is an example of JavaScript Try Catch:

var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "is empty";
if(isNaN(x)) throw "is not a number";
x = Number(x);
if(x > 10) throw "is too high";
if(x < 5) throw "is too low";
}
catch(err) {
message.innerHTML = "Input " + err;
}
finally {
document.getElementById("demo").value = "";
}
}
</script>
 
</body>
</html>

Output:

With this, we have come to the end of our article. I hope you understood how try catch in JavaScript is used to catch errors.

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of this blog and we will get back to you.