How do we use throw statement in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn to use the throw statement in JavaScript. The “throw” is the reserved keyword in JavaScript, and Programmers can use the throw keyword to create the user-defined exception.

Every programmer is not perfect, so they can’t write the JavaScript code without making a single error. It also happens that programmers are taking the input from the user, and an exception occurs if the user enters the invalid input. Some built-in exceptions include arithmetic exceptions, Index out-of-bound exceptions, etc. In some cases, programmers want to create their exception and can do it using the throw statement inside the try… catch block.

Below, we have given different examples of using the throw keyword in JavaScript.

Using the throw keyword to create exception

In this section, we will learn to create the simple user-defined exception using the throw statement. We will return the simple string message when any error occurs. When we throw an error, the program execution control goes to the nearest catch block to handle the exception. If we haven’t defined any catch block, program execution terminates due to the exception fault.

Syntax

Users can follow the below syntax to use the throw statement.

try {
   // program code
   If ( condition ){
      throw 'error message';
   }
} catch (error) {
   // handle user-defined exception.
}

Example

In the below example, we are throwing the error when we add the input number, and 10 becomes greater than 25. We are throwing a single error message.

<html>
<head>
   <title>Example - Use of the throw keyword in JavaScript. </title>
</head>
<body>
   <h2>Use of the throw keyword in JavaScript. </h2>
   <h4> Program execution flow, when we use the throw keyword to throw an user defined exception. </h4>
   <div id="value"></div>
   <script>
      let value = document.getElementById("value");
      try {
         value.innerHTML += "control is inside the try block. </br>";
         let number = 20;
         if (number + 10 > 25) {

            // throw error.
            throw "number is large, it is not acceptable.";
            value.innerHTML += "inside if block. </br>";
         }
      } catch (error) {
         // handling the exception.
         value.innerHTML += "inside the catch block. <br/>";
         value.innerHTML += "error message is: " + error + " <br/>";
      }
   </script>
</body>
</html>

In the above output, users can see that execution of the try block will not be completed due to throwing an error. The control goes to the catch block and handles the error.

Using the throw Statement to Create a New Error Object

In the above section, we have created the simple error message to throw the exception, but in this section, we will create the new user-defined error object. The JavaScript has a built-in class called the error to manage the exceptions. Also, we can create the object instance of the error class and pass the error message as an argument.

Syntax

Users can see the syntax below to throw the new error object.

try {
   // program code
   if ( condition ){
      throw new Error("message");
   }
} catch (error) {
   // handle user-defined exception.
}

Example

In the below example, we are checking the types of the variable. If the variable type is undefined, we throw and user-defined error object with the error message. So, we can handle the exception in the catch block.

<html>
<head>
   <title>Example - Use of the throw keyword in JavaScript. </title>
</head>
<body>
   <h2> Use of the throw statement in JavaScript. </h2>
   <h4> Program execution flow, when we use the throw keyword to throw an user defined exception. </h4>
   <div id="value"></div>
   <script>
      let value = document.getElementById("value");
      try {
         value.innerHTML += "control is inside the try block. </br>";
         if (typeof number == "undefined") {

            // throw error.
            throw new Error("variable is undefined.");
         }
         value.innerHTML += "terminating the try block. <br/>";
      } catch (error) {
         value.innerHTML += "inside the catch block. <br/>";
         value.innerHTML += error.name + ": " + error.message + " <br/>";
      }
   </script>
</body>
</html>

Rethrowing the exception using throw Statement

In this section, rather than handling the error in the catch block, we will throw the error again from the catch block.

Syntax

try {
   If ( condition ){
      throw new Error("message");
   }
} catch (error) {
   throw "unknown error."
}

Example

In the example below, we are throwing two different errors based on the conditional statement. We are handling the one error in the catch block and rethrowing the second error from the catch block.

<html>
<head>
   <title> Use of the throw keyword in JavaScript. </title>
</head>
<body>
   <h2> Rethrowing the exception using throw Statement </h2>
   <h4> Program execution flow, when we use the throw keyword to throw an user defined exception. </h4>
   <div id="value"></div>
   <script>
      let value = document.getElementById("value");
      try {
         value.innerHTML += "control is inside the try block. </br>";
         let a = 20;
         let b = 30;
         if (a + b > 30) {
            throw "large number";
         } else if (a + b < 30) {
            throw "small number";
         }
         value.innerHTML += "terminating the try block. <br/>";
      } catch (error) {

         // handling the exception.
         value.innerHTML += "inside the catch block. <br/>";
         if (error == "large number") {
            value.innerHTML += "handling the large number. <br/>";
         } else {
            throw "small number exception."
         }
      }
   </script>
</body>
</html>

Conclusion

We have seen examples of using the throw keyword in different scenarios. Users can create user-defined exceptions and throw the error message according to their needs.