promiseをasyncに書き換える方法

Question

勉強のため、promiseをasyncに書き換えようとしたのですが、うまく行きません。
asyncはreturnをするときにresolveを返すと思っているのですが、コード２を実行すると2秒を待たずすぐにundefinedが返ってきてしいます。なぜでしょうか？

コード１

function sampleResolve(value) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(value);
        }, 2000);
    })
}

sampleResolve(5).then((value) => {
    console.log(value)
})
// -> 5

コード２

async function sampleResolve(value) {
    setTimeout(() => {
        return(value);
    }, 2000);
}

sampleResolve(5).then((value) => {
    console.log(value)
})
// -> undefined

Answer 1

コード2は以下のように書いたのと同等です。
sampleResolve関数自体では何も return していないので、関数の復帰値は undefined をresolveしたPromiseになり、sampleResolve呼出しをawaitすると即復帰して undefined が返ります。
sampleResolve関数からPromiseを返すと、await時にそのPromiseのresolvかrejectが呼ばれるまで待ってくれます。

async function sampleResolve(value) {
    const callback = () => {
        return value;
    }
    setTimeout(callback, 2000);
}

(async function() {
    console.log('return:', await sampleResolve("Hello"));
})();

以下のようにsetTimeoutをPromiseで包んでawaitすれば、sampleResolve関数からはpending状態（await中）のPromiseが返ります。
setTimeoutが2秒後にresolveを呼ぶことにより sampleResolve関数内の await が終わり、return "Hello" によってsampleResolve関数が返した Promise の resolve("Hello") が呼ばれて resolve状態になり、外部のawaitが終わって"Hello"が返り、開始から2秒後に return: Hello が表示されます。

async function sampleResolve(value) {
    await new Promise(resolve => setTimeout(resolve, 2000));
    return value;
}

(async function() {
    console.log('return:', await sampleResolve("Hello"));
})();

Comments

[Sonono]

お二方とも、ありがとうございました。とても勉強になりました。
「sampleResolve関数自体では何も return していないので、関数の復帰値は undefined をresolveしたPromiseになる」ということが納得できました！

[Sonono]

すみません、本筋と関係ないところですが一つ質問があります。
```await new Promise(resolve => setTimeout(resolve, 2000));```
は以下のコードと同様だと思いますが、なぜresolveにカッコが要らないんでしょうか？
カッコなしのresolveだとただのオブジェクトなので、何も起きない（resolveされない）ように感じてしまいます。
（下のコードではカッコがないとうまく動きません。）
```
await new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 2000)
});
```

[shiracamus]

コメントした最初のコードで示したように、setTime関数の引数には関数を指定します。
関数名を書くか関数定義を書きます。どちらも関数オブジェクトです。
() => { resolve(); } は関数を定義しただけで関数は呼び出していません。単に resolve と書いたのと同じことになります。

[Sonono]

理解しました。ありがとうございます！！

[shiracamus]

function resolve() {
console.log("called resolve");
}

function timeout(callback) {
callback();
}

timeout(resolve);
timeout(() => { resolve(); });

Answer 2

勉強のため、promiseをasyncに書き換えようとしたのですが、うまく行きません。

このコードについては、Promiseを使わずに書くことはできません。

setTimeoutはコールバックを取る非同期関数で、Promiseとは縁がないので、自分でPromiseを作らなければ、async-awaitともタイミングを合わせることができません（async-awaitもPromiseの書き方を変えたものです）。