「await式はAsync Functionの中でのみ利用可能」の項のサンプルコードの意図がわかりにくいのではないか。

[koniooo]

該当ページ

https://jsprimer.net/basic/async/#await-in-async-function

質問内容

（前略）
先ほどのfetchResources関数ではforループとawait式を利用していました。 このときにforループの代わりにArray#forEachメソッドは利用できません。

単純にfetchResources関数のforループからArray#forEachメソッドに書き換えて見ると、構文エラー（SyntaxError）が発生してしまいます。 これはawait式がAsync Functionの中でのみ利用ができる構文であるためです。

async function fetchResources(resources) {
    const results = [];
    // Syntax Errorとなる例
    resources.forEach(function(resources) {
        const resource = resources[i];
        // Async Functionではないスコープで`await`式を利用しているためSyntax Errorとなる
        const response = await dummyFetch(resource);
        results.push(response.body);
    });
    return results;
}

とあるのですが、このサンプルコードを実行するとawait式のSyntaxErrorよりも未定義の変数 i のRefferenceErrorがまず発生するはずですし、単純に置き換えるといってもforEachとしての構文は正しく成立させた上で、それでもなお「Array#forEachメソッドのコールバック関数もAsync Functionとして定義しないと、コールバック関数ではawait式が利用でき（その後の部分より）」ないことを伝える方がわかりやすいのではないでしょうか、具体的には以下のサンプルコードの方がわかりやすいと思うのですがいかがでしょうか？

async function fetchResources(resources) {
    const results = [];
    // Syntax Errorとなる例
-    resources.forEach(function(resources) {
+    resources.forEach(function(resource) {
-        const resource = resources[i];
        // Async Functionではないスコープで`await`式を利用しているためSyntax Errorとなる
        const response = await dummyFetch(resource);
        results.push(response.body);
    });
    return results;
}

この章を読んで勉強させていただいている中で、（Asyncではない）コールバック関数の中でawait式を使用している問題（こちらが本題）とforEachの使い方が正しくない問題（単純に前述のfor文の中身にそのままforEachをかぶせているだけなので）に同時に遭遇して混乱してしまったのでこちらの質問を挙げさせていただきました。

実行環境

Windows 10 Google Chrome バージョン: 96.0.4664.110（Official Build）（64 ビット）

[azu]

i は存在しないのでそもそものコードして間違っている感じがしますね。
提示していただいたコードに修正するのが良さそうな気がします。

Issueにしました #1373

[koniooo]

迅速なご対応ありがとうございます。
まだ読んでいる途中なのですが、JSPrimerのおかげで何となくJavaScriptがわかっているという状態から自分の第一言語がJavaScripだと自信を持てるようになりました。
また読み終えたら改めて感想を書かせていただきます。