JavaScript Errors


JavaScript Errors - throw, try and catch

The try statement tests for errors in the code block.

The catch statement handles errors.

The throw statement creates a custom error.

The finally statement is executed after the try and catch statements, regardless of whether an exception is triggered.


 JavaScript Error

When the JavaScript engine executes the JavaScript codes, various errors occur.

It may be a grammatical error, usually a coding error or typo caused by the programmer.

It may be a spelling error or a missing feature in the language (maybe due to browser differences).

The error may be caused by incorrect output from the server or user.

Of course, it may also be due to many other unpredictable factors.


JavaScript Throws An Error

When an error occurs, when something goes wrong, the JavaScript engine usually stops and generates an error message.

The technical term to describe this situation is: JavaScript will throw an error.


JavaScript try & catch

The try statement allows us to define code blocks that are tested for errors during execution.

The catch statement allows us to define the code block to be executed when an error occurs in the try code block.

The JavaScript statements try and catch appear in pairs.

Grammar

try {

     ... //The exception is thrown

} catch(e) {

     ... //Exception capture and handling

} finally {

     ... //End processing

}

In the following example, we deliberately wrote a typo in the code of the try block.

The catch block will catch the error in the try block and execute the code to handle it.

Example

var txt="";
function message()
{
     try {
         adddlert("Welcome guest!");
     } catch(err) {
         txt="There is an error on this page.\n\n";
         txt+="Error description:" + err.message + "\n\n";
         txt+="Click OK to continue.\n\n";
         alert(txt);
     }
}

 Try It! 

finally Statement

The finally statement will execute the code block regardless of whether an exception occurs in the previous try and catch.

Example


function myFunction() {
   var message, x;
   message = document.getElementById("p01");
   message.innerHTML = "";
   x = document.getElementById("demo").value;
   try {
     if(x == "") throw "The value is empty";
     if(isNaN(x)) throw "The value is not a number";
     x = Number(x);
     if(x> 10) throw "too big";
     if(x <5) throw "too small";
   }
   catch(err) {
     message.innerHTML = "Error: "+ err + ".";
   }
   finally {
     document.getElementById("demo").value = "";
   }
}

Try It! 


throw Statement

The throw statement allows us to create custom errors.

The correct technical term is: create or throw an exception.

If you use throw together with try and catch, you can control the program flow and generate custom error messages.

Grammar

throw exception

Exceptions can be JavaScript strings, numbers, logical values, or objects.


This example detects the value of the input variable. If the value is wrong, an exception (error) will be thrown. catch will catch this error and display a custom error message:

Example

function myFunction() {
     var message, x;
     message = document.getElementById("message");
     message.innerHTML = "";
     x = document.getElementById("demo").value;
     try {
         if(x == "") throw "The value is empty";
         if(isNaN(x)) throw "not a number";
         x = Number(x);
         if(x <5) throw "too small";
         if(x> 10) throw "too big";
     }
     catch(err) {
         message.innerHTML = "Error: "+ err;
     }
}

 Try It! 

Please note that if an error occurs in the getElementById function, the above example will also throw an error.