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 ie return a value?

Answer 1

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.

Answer 2

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)

Answer 3

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));