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

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?

• javascript
• node.js
• asynchronous
• async-await

• 3 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 Commented Jun 6, 2021 at 16:36
• 1 Related: What's the difference between returning value or Promise.resolve from then(). – Sebastian Simon Commented Jun 6, 2021 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 Commented Jun 6, 2021 at 16:39
• 2 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 bees undefined. – jfriend00 Commented Jun 6, 2021 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 Commented Jun 6, 2021 at 16:42

3 Answers 3

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 ment 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.

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)

Note the subtle difference between this:

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

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