Why do we need to return a promise resolve?

Question

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait until the promise resolves (*)

  return result; // "done!"
}
f().then(result => {
  return Promise.resolve(result);
}).then(r => console.log(r))

The above code does not work as intended if I remove the return keyword from the second last line. I do not understand why do we need to write a return? Does not the resolve method of promise essentially does that i.e. return a value?

There's no point to it at all. `.then((result) => Promise.resolve(result))` is the same as `.then((result) => result)` which is the same as not having the `.then` at all. — jonrsharpe, Jun 06 '21 at 16:36
Related: [What's the difference between returning value or Promise.resolve from then()](/q/27715275/4642212). — Sebastian Simon, Jun 06 '21 at 16:38
Yea, I understand that the part was not needed at all to be added. but I added it to understand Promises and in principle it should work, in my opinion. Can you kindly help me understand what is the difference between me writing 'return' on the second last line, and not writing it? — Xaibu Gemi, Jun 06 '21 at 16:39
You don't need the `Promise.resolve(result)` at all. You just need a return value such as `return result`. If there's no return value from a `.then()`, then the resolved value of the promise becomes `undefined`. — jfriend00, Jun 06 '21 at 16:39
without a `try..catch` block, `let result = await promise; return result` is the same as `return promise`. And since no `await` is needed, you can drop the `async` keyword on your function. And `.then(result => return Promise.resolve(result))` does nothing, as others have said. And `.then(r => console.log(r))` is the same as `.then(console.log)`. — Mulan, Jun 06 '21 at 16:42

score 3 · Answer 1 · answered Jun 06 '21 at 16:38

I do not understand why do we need to write a return?

Because if you don't, the fulfillment callback's return value will be undefined, as with any other function, which means that the fulfillment value of the promise created by that then call will be undefined instead of being result.

There's no reason for that fulfillment handler at all, it doesn't do anything useful, it just introduces an extra async "tick" into the promise fulfillment. Just remove it:

f().then(result => console.log(result))

In a comment you've said:

I understand that the part was not needed at all to be added. but I added it to understand Promises and in principle it should work, in my opinion.

It's for the reason I mentioned in the first paragraph above: otherwise, the function returns undefined (implicitly). It's the difference between a and b in the following. You might be thinking of concise arrow syntax where the body of the function is just an expression and the return is implicit, like c below:

const a = () => {
    42;
};
const b = () => {
    return 42;
};
const c = () => 42; // No `{` just after the `=>`

console.log(a()); // undefined
console.log(b()); // 42
console.log(c()); // 42

In that case, you'd use:

f().then(result => result) // If you want that there to understand it better
.then(result => console.log(result))

Note there's no Promise.resolve there. There's no reason to create another promise; the return value of the fulfillment handler will be used to resolve the promise then returned. No need for an extra one.

score 1 · Answer 2 · answered Jun 06 '21 at 16:38

First, you can remove the entire middle then:

f().then(r => console.log(r))

Second, the last then expects an input from the previous one: r, which is why we should return it.

and last,

.then((result) => Promise.resolve(result))

is the same as:

.then((result) => result)

score 1 · Answer 3 · answered Jun 06 '21 at 16:50

Note the subtle difference between this:

f().then(result => {
  Promise.resolve(result);
}).then(r => console.log(r)); // prints "undefined"

compared to this:

f().then(result =>
  Promise.resolve(result)
).then(r => console.log(r)); // prints resolved value of `f`

In the first example, you are supplying multiple statements (inside the brackets) to the then handler. Because you are not explicitly returning a value, the return value is undefined, which is what will be seen by subsequent then handler.

In the second example, the arrow function is provided a simple expression (there are no brackets, and only a single line is supplied). In this case, it is the expression itself which provides the return value for the function.

This documentation on arrow function syntax is a bit more precise.

As others have pointed out, in this contrived example the Promise.resolve() is not needed at all, as the value given to the then handler is indeed already resolved. So you could just as well do:

f().then(r => console.log(r));

Why do we need to return a promise resolve?

3 Answers3