define

First, let’s look at the definition of MDN:

The try… catch statement marks a block of statements to try and specifies a response should an exception be thrown.

try… A catch statement marks the statement to execute and specifies a response when an exception is thrown

The short sentence does describe the try… Catch for the most part.

But, at the end of the MDN, there’s a passage that says:

Returning from a finally-block

If the finally-block returns a value, this value becomes the return value of the entire try-catch-finally statement, regardless of any return statements in the try and catch-blocks. This includes exceptions thrown inside of the catch-block:

The return value of the finally statement block

If a finally block returns a value, that value is used as the entire try… The return of a catch, whether or not there is a return in the try block or the catch block, includes the exception in the catch.

Ok, so let’s try adding return and see what happens.

case1

The input
function fn() {
  try {
    console.log('try block inside the log');
  } catch (error) {
    console.log('catch block inside the log');
  } finally {
    console.log('finally block inside the log = = = =');
  }
  return 'Return in normal case';
}
console.log(fn());
Copy the code
Output:

Everything looks exactly as we thought it would. No problem. Keep going.

case2

The input
function fn() {
  try {
    console.log('try block inside the log');
    return 'the return of the try'; // <=== =
  } catch (error) {
    console.log('catch block inside the log');
    return 'Return statement in catch';
  } finally {
    console.log('finally block inside the log = = = =');
  }
  return 'Return in normal case';
}
console.log(fn());
Copy the code
The output

As you can see above, the return of the try is printed, but the log in the finally block is still executed. We can see that finally is executed before a try(or cache, or cache) returns. Then we can verify the MDN statement: finally block return value.

case3

The input
function fn() {
  try {
    console.log('try block inside the log');
    return 'the return of the try'
  } catch (error) {
    console.log('catch block inside the log');
    return 'Return statement in catch';
  } finally {
    console.log('finally block inside the log = = = =');
    return 'the return of finaly'; // <=== =
  }
  return 'Return in normal case';
}
console.log(fn());
Copy the code
The output

Ok, this is still normal, because finally is executed before the return of the try, so it intercepts the return in the try and prints the return in finally.

You think this is the end of it?

Let’s move on.

case4

The input
function justLog(){
  console.log('Print from justLog');
  return 'Return from justLog'
}

function fn() {
  try {
    console.log('try block inside the log');
    return justLog(); // <=== = this time we return a function
  } catch (error) {
    console.log('catch block inside the log');
    return 'Return statement in catch';
  } finally {
    console.log('finally block inside the log = = = =');
    return 'the return of finaly';
  }
  return 'Return in normal case';
}
console.log(fn());
Copy the code

So let’s think about what will be printed? See if it matches the real output. Give us a few seconds…

A little solidarity, hope the war ‘battle’ an early victory. Come on! And then: I’ll be Posting interesting, juicy front-end knowledge on a regular basis, so if it’s helpful to you, please follow me and receive first-hand updates later. Thank you very much

The output

Did you get that right? You can see that inside the red box is the log of the justLog function, and below the red box are the prints and returns in finally. So finally is actually executed before the return keyword ina try(or catch). That’s why we see printing in justLog. For the implementation of return keyword, you can query the standard, which is not described here.

Application scenarios

Let’s say we have a higher-order function like this:

function hoc(fn) {
  return fn()
}
Copy the code

We want to return the result of the execution of the parameters we passed, which is fine.

So if we want to do something else after the function executes, before the return, what do we do?

function hoc(fn) {
  const res = fn();
  // Other operations
  return res;
}
Copy the code

In short, we can get the return value, do something else, and return. But we use extra space and can’t easily reuse the statement after the return. In this case, try… Catch comes in handy:

function hoc(fn) {
  try {
    return fn();
  } finally {
    // Some other operations will be performed after 'fn()' and before 'return'}}Copy the code

conclusion

In general terms, a finally block is executed before the return keyword ina try(or catch). The diagram is summarized as follows:

Finally, if there is something that can help you, welcome to pay attention and exchange.