snippetjavascriptTip

What is the difference between then and finally in a JavaScript promise?

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascriptwhatandfinallybetweenthendifferencethepromise

Problem

On the surface, Promise.prototype.then() and Promise.prototype.finally() seem very similar. But there are a few important differences you need to keep in mind.
The first and most obvious one is that finally() doesn't receive the resulting value of the promise chain. On the same note, as no value is received by finally(), the resolved value of the promise can't be changed as well.
Another difference is related to error handling and how the promise chain is resolved. Sometimes, you might want to defer catching an error in the promise chain, allowing you to handle them elsewhere. In this case, a chained then() will not be executed, whereas finally() will. Moreover, if a previous catch() throws, you end up in the same situation.
The takeaway here is that you shouldn't substitute then() and finally() unless there is a very specific reason to do so. As a rule of thumb, finally() should be used for cleaning up (clearing timeouts, nulling references, resetting UI state etc.).

Solution

new Promise((resolve, reject) => resolve(10))
  .then(x => {
    console.log(x); // 10
    return x + 1;
  })
  .finally(x => {
    console.log(x); // undefined
    return x + 2;
  });
// Promise resolves to 11, the return value of then()

Another difference is related to error handling and how the promise chain is resolved. Sometimes, you might want to defer catching an error in the promise chain, allowing you to handle them elsewhere. In this case, a chained then() will not be executed, whereas finally() will. Moreover, if a previous catch() throws, you end up in the same situation.
The takeaway here is that you shouldn't substitute then() and finally() unless there is a very specific reason to do so. As a rule of thumb, finally() should be used for cleaning up (clearing timeouts, nulling references, resetting UI state etc.).

Code Snippets

new Promise((resolve, reject) => resolve(10))
  .then(x => {
    console.log(x); // 10
    return x + 1;
  })
  .finally(x => {
    console.log(x); // undefined
    return x + 2;
  });
// Promise resolves to 11, the return value of then()

new Promise((resolve, reject) => reject(0))
  .catch(x => {
    console.log(x); // 0
    throw x;
  })
  .then(x => {
    console.log(x); // Will not run
  })
  .finally(() => {
    console.log('clean up'); // 'clean up'
  });
// Uncaught (in promise) 0

Context

From 30-seconds-of-code: promise-then-finally

Revisions (0)

No revisions yet.