Errors and Exception Handling in JavaScript

Introduction

 
In the previous chapter, we learned about Document Object Model methods with example programs. 
 
In this chapter, we will learn about the Error and Exceptions Handling, and types of errors in JavaScript.

Errors and Exception Handling

 
There are three types of errors in the JavaScript programming language as follows:
  1. Runtime Errors
  2. Syntax Errors
  3. Logical Errors
We now learn this one by one.
 

Runtime Errors

 
It is nothing but the exception that occurs during the execution of a program like in other programming languages. The following example shows when you execute that there is no output shown:
 
Example
  1. <!DOCTYPE html>    
  2.    <html>    
  3.       <title>Article By Jeetendra</title>    
  4.       <head>    
  5.       </head>    
  6.       <body>    
  7.          <script type="text/javascript">    
  8.             document.write("Runtime Errors");     
  9.          </script>    
  10.       </body>    
  11. </html>   
    When you execute this it will display “Runtime Errors”. Just add the one line in that Print() function call like in the following it will display nothing.
     
    Example
    1. <!DOCTYPE html>    
    2. <html>    
    3.    <title>Article By Jeetendra</title>    
    4.    <head>    
    5.    </head>    
    6.    <body>    
    7.       <script type="text/javascript">    
    8.          Print();    
    9.          document.write("Runtime Errors");     
    10.       </script>    
    11.    </body>    
    12. </html>   
      It will display nothing on the screen because we did not define a Print() method in JavaScript however we call that method. That's why it displays nothing on the screen.
       

      Syntax Errors

       
      The name defines everything about this error. It occurs during compiling. When you miss something like semicolon (;) at end of a statement yet there is a missing closing parenthesis. The following example shows it:
       
      Example
      1. <script type="text/javascript">    
      2.    document.write("Syntax Errors</br>");    
      3.    function SynError()    
      4.    {    
      5.       document.write("Example of Syntax Error");    
      6.    }    
      7.    SynError();    
      8. </script>  
      When you execute the preceding JavaScript code it will show output like the following:
      • Syntax Errors
      • Example of Syntax Error
      Do some changes in the code like the following:
      1. <!DOCTYPE html>    
      2. <html>    
      3.    <title>Article By Jeetendra</title>    
      4.    <head>    
      5.    </head>    
      6.    <body>    
      7.       <script type="text/javascript">    
      8.          document.write("Syntax Errors</br>");    
      9.          function SynError()    
      10.          {    
      11.             document.write("Example of Syntax Error");    
      12.     
      13.             SynError();    
      14.       </script>    
      15.    </body>    
      16. </html>   
        When you execute this JavaScript code it displays nothing on the screen because there is a syntax error caused by missing the closing curly braces of the function.
         

        Logical Errors

         
        This error is not a syntax or runtime error. It depends on your business logic. It is difficult to determine this type of error.
         

        Exception Handling in JavaScript

         
        This is a new feature of JavaScript for handling exceptions like in other programming languages, using try-catch finally statements, and the throw operator for handling exceptions. Now you can catch the runtime exception.
         
        The following shows the syntax for a try catch finally:
        1. <script type="text/javascript">    
        2.    document.write("Exception Handling in JavaScript</br>");    
        3.    function ExceptHand()    
        4.    {    
        5.       try    
        6.       {    
        7.          document.write("This is try block");     
        8.       }    
        9.       catch(error)    
        10.       {    
        11.          document.write("This is catch block");    
        12.       }    
        13.       finally    
        14.       {     
        15.          document.write("It always execute");    
        16.       }    
        17.    }    
        18.    ExceptHand();    
        19. </script>   
          The try block is used always before a catch block, because in a try block you provide your code to be executed. If there is no error in code then the catch block is not executed but the finally block is always executed. The following example shows exception handling:
           
          Example
          1. <!DOCTYPE html>    
          2. <html>    
          3.    <title>Article By Jeetendra</title>    
          4.    <head>    
          5.    </head>    
          6.    <body>    
          7.       <script type="text/javascript">    
          8.          document.write("Exception Handling in JavaScript</br>");    
          9.          function ExceptHand()    
          10.          {    
          11.             try    
          12.             {    
          13.                alert("This is try block");     
          14.                alert("Not present");    
          15.             }    
          16.             catch(error)    
          17.             {    
          18.                document.write(error);    
          19.             }    
          20.          }    
          21.          ExceptHand();    
          22.       </script>    
          23.    </body>    
          24. </html>   
            When you execute this program it will first show an alert message box with the message “This is try block”. When it executes the next statement it is an error because there is no alert message box available for this exception catch by catch block and it prints the error object of the catch block. It will print the proper exception message like the following output:
             
            Output
             
             
            It will first show an alert message box with a message after you click OK the catch block catches the error and prints an error like the following:
             
             
            Example for throw statement:
            1. <!DOCTYPE html>    
            2. <html>    
            3.    <title>Article By Jeetendra</title>    
            4.    <head>    
            5.    </head>    
            6.    <body>    
            7.       <script type="text/javascript">    
            8.          document.write("Exception Handling in JavaScript</br>");    
            9.          function ExceptHand()    
            10.          {     
            11.             try    
            12.             {    
            13.                if(true)    
            14.                { throw("Example of throw statement");}    
            15.                }    
            16.                catch(error)    
            17.                {    
            18.                   document.write(error);    
            19.                }    
            20.             }    
            21.             ExceptHand();    
            22.          }  
            23.       </script>    
            24.    </body>    
            25. </html>   
              The preceding simple example shows the concept of the throw statement. When you execute the code it will check the condition for true then it will throw an exception with a message and it catches the catch statement and prints the thrown statement message.
               
              Output
               
               

              Summary

               
              In this chapter, we learned about the concepts of errors and Exception Handling in JavaScript and how it works with example programs.
              Author
              Jeetendra Gund
              Jeetendra Gund
              48 30.7k 3.1m