JavaScript finally Statement Complete Tutorial

In this section we will learn what the finally statement is and how to use it in JavaScript.

Note: we’re assuming you’re already familiar with the try catch statement.

What is finally Statement in JavaScript?

The `try catch` statement can have another block that is called `finally`. The statements in this block are guaranteed to be executed no-matter if an error occurs on the `try` block or not.

There’s literally nothing that can be done in the `try` or `catch` blocks to prevent the code in the `finally` block from executing, which includes using a `return` statement.

JavaScript finally Statement Syntax:

try{

}catch(error){

}finally{

}

As you can see, the finally block does not take an argument and its body will be executed after the `try` statement (if no error occurred) or after the `catch` statement (if an error occurred).

Example: using finally statement in JavaScript

try{
    throw new Error("A simple error");
}catch(error){
  console.log("Inside the catch block");
  console.log(error.name);
  console.log(error.message);
}finally{
  console.log("A message from the finally block");
}
console.log("End");

Output:

Inside the catch block

Error

A simple error

A message from the finally block

End

In this program, first the error in the `try` block is thrown, then the tasks in the `catch` block will be executed. After that, the body of the `finally` block will be run as well.

Using JavaScript finally block without a catch Block

When adding the `finally` block to the `try catch` statement, the use of the `catch` block becomes optional. This means right after the `try` block we can put the `finally` block and remove the `catch` portion.

Example:

function func(){
  try{
    throw new Error("General Error");
  }finally{
    return "A message from the finally block";
  }
}
const res = func();
console.log(res);
console.log("End");

Output:

A message from the finally block

 End

Cases where finally block executes in JavaScript:

Alright, now let’s see how the finally block will react in different scenarios of a program.

1- No Exception is thrown

If there’s a program with try-catch-finally blocks and no error occurred within the body of the try block, then the catch block (or the handler) will be ignored and just the body of the finally block will execute.

Example: no-exception and finally block in JavaScript

function throwError(){
  try{
    console.log("No Error!");
  }catch(error){
    console.log("This message will never run!");
  }
  finally{
    console.log("This is a message from the finally block in the throwError function");
  }
}
throwError();

Output:

No Error!
This is a message from the finally block in the throwError function

2- Exception is thrown but not handled

If an error occurred but there was no catch block to handle the error, then after the try block, the execution engine will move to the body of the `finally` block and runs those statements first but after that it will still move to the enclosing scope looking for a handler to handle the error.

At the end, if no handler was found for the occurred error, then that error might crash the program and we will see the reason on the browser’s console.

Example: JavaScript finally block and not handled exception

function throwError(){
  try{
    throw "This is a simple Error";
  }
  finally{
    console.log("This is a message from the finally block in the throwError function");
  }
}
throwError();

Output:

This is a message from the finally block in the throwError function
Uncaught This is a simple Error

3- Exception is thrown and handled perfectly

If an error occurred and it was handled in a catch block, then after that the finally block will be run as well.

Example: JavaScript finally block and handled exception

function throwError(){
  try{
    throw "This is a simple Error";
  }catch(error){
    console.log("The error is handled correctly!");
  }
  finally{
    console.log("This is a message from the finally block in the throwError function");

  }
}
throwError();

Output:

The error is handled correctly!
This is a message from the finally block in the throwError function

4- Methods returns from try block

Note that if we have a return statement in the body of a try block, before running that statement, the finally block will run and then the value of the return statement will be backed to the caller.

Example: JavaScript finally block and the `return` statement in try block

function throwError(){
  try{
    return "From the throwError";
  }finally{
    console.log("This is a message from the finally block in the throwError function");
  }
}

const res = throwError();
console.log(res);

Output:

This is a message from the finally block in the throwError function
From the throwError

5- JavaScript return statement from catch block

If an error occurred and the catch block handled the error and at the same time called the `return` statement in that block as well, again the body of the finally block will be executed first and then the value of the return statement in the catch block will return.

Example: JavaScript finally block and the `return` statement from catch block

function throwError(){
  try{
    throw "This is a simple Error";
  }catch(error){
    return "Message from the catch block";
  }
  finally{
    console.log("This is a message from the finally block in the throwError function");
  }
}

const res = throwError();
console.log(res);

Output:

This is a message from the finally block in the throwError function
Message from the catch block

Using return statement in JavaScript finally block

Note that if there is a return statement in the body of a try block or even a catch block, and also there’s another return statement in the body of a finally block; then only the value of the `return` statement in the `finally` block will return as the final value of the return statement and the rest will be ignored.

Example: return statement in JavaScript finally block

function throwError(){
  try{
    throw "This is a simple Error";
  }catch(error){
    return "Message from the catch block";
  }
  finally{
    console.log("This is a message from the finally block in the throwError function");
    return "Message from teh finally block";
  }
}

const res = throwError();
console.log(res);

Output:

This is a message from the finally block in the throwError function
Message from the finally block

Leave a Reply