では実際に「同じ処理を forEach / map / filter / reduce で書いたらどう違うのか」を比較してみましょう。これでそれぞれの役割がグッと理解しやすくなります。
お題
「配列 [1, 2, 3, 4, 5] から 偶数を2倍にして合計を求める」という処理を、4つの方法で書き比べます。
1. forEach（処理を順番に実行するだけ）
const numbers = [1, 2, 3, 4, 5];
let total = 0;
numbers.forEach(n => {
if (n % 2 === 0) {
total += n * 2;
}
});
console.log(total); // 12
👉 変数を用意して、ループの中で手作業で合計を計算。
「処理を順番にやる」イメージ。
2. map（変換して新しい配列を作る）
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => (n % 2 === 0 ? n * 2 : 0));
const total = doubled.reduce((acc, n) => acc + n, 0);
console.log(total); // 12
👉 map で「偶数は2倍、奇数は0」に変換 → reduce で合計。
「変換」が得意だけど、合計を出すには reduce と組み合わせる必要あり。
3. filter（条件で絞り込み）
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
const doubled = evens.map(n => n * 2); // [4, 8]
const total = doubled.reduce((acc, n) => acc + n, 0);
console.log(total); // 12
👉 filter で偶数だけに絞り込み → map で2倍 → reduce で合計。
「条件で選ぶ」→「変換」→「集計」とステップが明確。
4. reduce（全部まとめて処理）
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((acc, n) => {
if (n % 2 === 0) {
return acc + n * 2;
}
return acc;
}, 0);
console.log(total); // 12
👉 reduce だけで「偶数判定」「2倍」「合計」を一気にやる。
「配列を1つの値にまとめる」最強の道具。
まとめ
- forEach → 手作業で処理を積み上げる（シンプルだが冗長になりやすい）
- map → 「変換」が得意。別の配列を作りたいときに使う
- filter → 「条件で選ぶ」処理に最適。map や reduce と組み合わせやすい
- reduce → 「全部まとめて1つの値」にする。慣れると最強だが少し難しい
💡 初心者のうちは filter → map → reduce の順で組み合わせると分かりやすいです。
慣れてきたら reduce だけで書けるようになると「プロっぽい」書き方になります。