what is the significance of finally in javascript?

Javascript Object Oriented Programming Programming

In JavaScript finally is a block of code or statements that are executed in all cases while handling errors with a try and catch block whenever used. These try, catch and finally blocks in JavaScript will execute the code that is prone to error and may cause the program to behave incorrectly (terminate abruptly).

This finally block is positioned after the try and catch blocks, will unquestionably be executed if either of those blocks, try or catch, is ever executed. The finally block allows us to define the actions that must be performed regardless of whether some code succeeds or fails.

While error handling in JavaScript, the try block is mandatory and the catch and finally are optional.
The combinations of the three blocks can be used as try with both catch and finally or, try block with any one of the other two blocks.
The try can be used without any of the blocks. But to use a finally a try block is mandatory.

Syntax

This is the syntax of finally() block along with try and catch blocks in JavaScript −

try{
   //The code where the chances of error can be predicted 
}
catch{
   //The code which will be executed if try block is executed
}
finally{
   //The code which will be definitely executed after the try and catch blocks.
}

The error which is being mentioned in the try block are mainly due to some run time issues and the error made by the programmer. The execution of the program is as follows.

Firstly, the code which is in the try block will be executed and if any error occurs then the compiler searches for the catch block and the contents of it were executed in case a catch exists.

Then, the finally block will get executed. The implementation of the finally and other try and catch blocks is explained below with examples.

Example 1

This example demonstrates the execution of finally block with both try and catch −


<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <h2> Finally - JavaScript</h2>
   <button type="button" onclick="forFinally()"> Click the button to show the result </button>
   <p id="try"> </p>
   <p id="catch"> </p>
   <p id="finally"> </p>
   <script type="text/javascript">
      function forFinally() {
         try {
            document.getElementById("try").innerHTML = " Try block is executed ";
         } 
         catch (error) {
            document.getElementById("catch").innerHTML = " Catch block is executed additional Information: " + error;
         } 
         finally {
            document.getElementById("finally").innerHTML = "Finally block is executed ";
         }
      }
   </script>
</body>
</html>

On executing the above program, a button will be displayed.

On clicking it the result of the try and catch executions will be displayed.

Example 2

Following is another example of try, catch and, finally −


<!DOCTYPE html>
<html>
<body>
   <h2>Finally - JavaScript</h2>
   <p>Please input a number between 5 and 10:</p>
   <input id="demo" type="text">
   <button type="button" onclick="tryFinally()">Test Input</button>
   <p id="try"></p>
   <p id="message"></p>
   <script>
      function tryFinally() {
         const message = document.getElementById("message");
         message.innerHTML = "";
         let x = document.getElementById("demo").value;
         try {
            if(x == "") document.getElementById("try").innerHTML = "Please provide the specific input as mentioned";
            if(isNaN(x)) document.getElementById("try").innerHTML = "Its is Not a Number";
            if(x > 10) document.getElementById("try").innerHTML = "Input is greater than 10";
            if(x < 5) document.getElementById("try").innerHTML = "Given input is less than 5";
            if(x>5 && x<10) document.getElementById("try").innerHTML = "Given input is as required";
         }
         finally{
            message.innerHTML = "This is the finally block executed after the try block"
         }
      }
   </script>
</body>
</html>

On executing the above program, a text box is displayed along with a button asking for the numbers between 5 and 10.

If you input the same (a number between 5 to 7) a success message is displayed saying “Given input is as required”.
If you pass a value greater than 10 the message will be “Input is greater than 10”
Similarly, the output message is “Given input is less than 5” if the given value is less than 5.

In all the cases the finally is executed after the try displaying “This is the finally block executed after the try block”.

Abdul Rawoof

Updated on: 25-Aug-2022

860 Views

Kickstart Your Career

Get certified by completing the course

Get Started