『JavaScript』スコープ外からの参照ができない件について

Question

前提・実現したいこと

配列'responders_name'の中にpushした内容をスコープ外で参照したいのですが、できずに困っています。
JavaScriptではスコープ外から参照できない決まりでもあるのかな？ と考えましたが、そうではない様子。

該当のソースコード

            responders.forEach(async (element) => {
                pre = await client.query(`SELECT * FROM users WHERE id = '${element}'`);
                responders_name.push(pre.rows[0].user_name);
                console.log("forEachの中です", responders_name);
            });
            
            console.log("forEachの外です",responders_name)


出力結果：
forEachの外です []
forEachの中です [ '回答者A' ]
forEachの中です [ '回答者A', '回答者B' ]
forEachの中です [ '回答者A', '回答者B', '回答者C' ]

試したこと

1行目の文頭にawaitを書いてみる（効果なし）

補足情報（FW/ツールのバージョンなど）

Answer 1

スコープは関係ない。
結果の出力順を見ると、「外です」が「中です」より先に出力されているだろう。
そして、「中です」は変数responders_nameへのpushとほぼ同時に行われている。
つまり、「外です」の出力時には、まだresponders_nameへのpushが行われていない。だから何も出力されない。

何故そうなるかというと、foreachに渡されている関数がasyncだからだ。
responders_name.push は、client.query の実行終了を待つ（await）が、外のconsole.logはresponders.forEachに渡されているasync関数の終了を待たない。

ちなみに、提示されたコードでは responders_name のスコープが不明瞭だが、本当にコードがその通り（つまり変数宣言が存在しない）ならば、 responders_name はグローバル変数=プログラムの全域で参照・書き換えが可能な変数であり、外のconsole.logも普通にスコープ内だ。
（実際には空配列で初期化しているようなので、変数宣言もどこかにあるのだろうが）

そもそも「スコープ」とは「変数を参照可能な範囲」という意味なので、「スコープの外で変数を参照できない」は「変数を参照可能な範囲の外で変数を参照できない」という意味になり、「そりゃそうじゃ」という感じなのだが、スコープという単語の意味を何か誤解してはいないだろうか。

Answer 2

まずなんでも async/await をつけるのをやめましょう。必要なところにのみつけるべきです。あと変数宣言には let か const を書きましょう。

で、本題ですが配列から新しい配列を得たい場合 map か reduce が使える場合があります。今回の場合は map で十分と思われますので使ってみましょう。ちなみに外の変数からでも参照はできます。