【JavaScript】技術面接を振り返る。〜非同期処理の順番問題〜

背景

とある会社の技術面接の際に、非同期処理の処理順の理解度を確かめる問題があった。
そこで改めて出題された問題を思い出しながら、非同期処理の順序を復習してみました。

出題された問題

※ソースコードは正確には記憶していないので、思い出せる限りで記述します。

問題：以下のコードを実行した際に、出力されるアルファベット順を答えなさい。

async function func1 (){
    console.log("a")
    const hoge = await new Promise((resolve) => {
        resolve("")
    }).then(() =>
        console.log("b")
    )
}

function func2 (){
    new Promise((resolve) =>{
        console.log("c")
        setTimeout(() => {
	    console.log("d")
	    resolve(1)
	},0)
    }).then(async() => {
        console.log("e")
        const fuga = await func1()
        }
    )
    console.log("f")
}

console.log("g")
func2()
console.log("h")

解説

1. まずはgが出力される。（それまでの関数は定義されているだけで実行されていない。）
2. その後func2が実行される。
3. func2内のPromise生成時にコンストラクターに渡した関数は、同期的に実行される。 故に、cが出力される。
4. setTimeoutが実行される。ここでは0msで設定されているが秒数に関わらず、引数の関数の処理がタスクキューに追加される。
5. fが出力され、同期処理が続行されhが出力される。
6. タスクキューに格納されていた処理が実行されdが出力され、Promiseが成功する。
7. eが出力され、その後func1が実行され、aが出力される。
8. awaitでPromiseの返却を待機しているので、bが出力されて終了する。

解答

g -> c -> f -> h -> d -> e -> a -> b

おわりに

出題されたときは初見でぎょっとしてしまいましたが、改めて基礎力を試されているなと感じました。非同期処理はこれ以外にも奥深い世界なのでもっと精進します🔥
なにか記事に間違いがあればご指摘ください。

参考記事：

とても参考になる記事でした！ありがとうございます！
何問分かる？Promise に関するクイズ13問【解説付き】
タスクキューとマイクロタスクキュー