Biome

こちらが公式ページです。こちらの記事でセットアップや初期設定がわかりやすくまとめられていたので、説明は省略させていただきます。

本題の配列操作について

こちらの公式ページのドキュメントを参考にしました。結論から言うとforEachだけがダメというわけでなく、filterやmapでメソッドチェーンにするのも推奨していない主張みたいです。

実際にこちらのPlaygroundでもエラーになるので、見てみてください。それでは、どのように対処するのかというと、for…ofで対応するのが推奨されているみたいです。実際にこちらのPlaygroundでfor…ofで配列操作を行なってもエラーになりません。

実装

filterやmapとforEachを組み合わせて、配列操作を行います。

  const numbers = [1, 2, 3, 4, 5, 6];

  // Step 1: `filter`で偶数を抽出（1回目の反復処理）
  const evenNumbers = numbers.filter((num) => num % 2 === 0);

  // Step 2: `map`で値を2倍に変換（2回目の反復処理）
  const doubledNumbers = evenNumbers.map((num) => num * 2);

  // Step 3: `forEach`で結果を出力（3回目の反復処理）
  doubledNumbers.forEach((num) => {
    console.log('🚀 ~ doubledNumbers.forEach ~ num:', num);
  });

上記のコードで計3回の反復をしています。

numbersの要素をfilterで1回目の反復。
新しく生成されたevenNumbersをmapで2回目の反復。
新しく生成されたdoubledNumbersをforEachで3回目の反復。

for…ofを用いた配列操作を行います。

  const numbers = [1, 2, 3, 4, 5, 6];
  
  const result = []; // 結果を格納する配列

  // `for...of`で1回の反復処理で完結
  for (const num of numbers) {
    if (num % 2 === 0) {
      // 偶数を判定
      result.push(num * 2); // 2倍に変換して結果に追加
    }
  }

一方でこちらは、計1回の反復をしています。

配列numbersを一回だけ反復し、条件に一致した値を直接処理しています。

filterやmapの単独使用は上記の主張に反していないのか考えてみる

結論としては、逸脱していないと考えられる。上記での議論はfilterやmapとforEachと複数回の反復が発生するケースを問題視しているためです。mapで一回の反復になるケースとなる単独での使用は該当しないと考えられます。React実装者ならよく使うこのケースですが、特に問題ないと言えるでしょう。

参考記事