async/await で forEach を使うときは気をつけて

はじめに

ある業務中に少しだけ悩みました。
配列に入っている値を最初から順番に処理するような関数を書いていたら、思っていたような結果が出ませんでした。
悩んでいると、先輩から金言をいただきメモとして残しておこうと思い、記載しています。

問題のあったコード

const users = ref<string[]>([]);
const doCount = ref(0);

const forEachDemo = async () => {
    await users.value.forEach(async (user: string) => {
        await delete(user);
        if (do.error) {
            console.log(error);
        } else {
            doCount.value++;
        }
    });
};

このコードだと、deleteの処理はできているが、上記でdeleteしたはずのuserがまだ残っており、最新のデータを取得することができませんでした。

金言

async/awaitでforEachを使うのはお勧めできないと言われ、すぐに調べると皆さん同じことで記事を書いてました。
https://qiita.com/frameair/items/e7645066075666a13063
https://qiita.com/age884/items/354c88858aef0a8d8d23

修正したコード

const users = ref<string[]>([]);
const doCount = ref(0);

const forEachDemo = async () => {
    for (const user of users.value) {
        await delete(user);
        if (do.error) {
            console.log(error);
        } else {
            doCount.value++;
        }
    };
};

for ... of を使うことで意図していた処理にすることができました。
直列の処理だから良かったのか？
直列とか並列とか普段意識しないので、勉強になりました。

まとめ

async/await で forEach はつかわないことにします！

コードとか原因とか間違いあれば教えてください🙏