配列の「フィルタ → 変換 → 集計」を関数でつなげると、データ処理の流れがとても分かりやすくなります。実際のプログラムでもよく使うパターンです。
ステップごとの関数
1. フィルタ（filter）
条件に合う要素だけを残す関数。
// 偶数だけを残す
function filterEven(numbers) {
return numbers.filter(n => n % 2 === 0);
}
2. 変換（map）
要素を別の形に変える関数。
// すべての数を2倍にする
function doubleNumbers(numbers) {
return numbers.map(n => n * 2);
}
3. 集計（reduce）
配列全体を1つの値にまとめる関数。
// 合計を計算する
function sumNumbers(numbers) {
return numbers.reduce((acc, n) => acc + n, 0);
}
関数をつなげて使う
これらを組み合わせると「偶数だけ取り出す → 2倍にする → 合計を出す」という流れが作れます。
const data = [1, 2, 3, 4, 5, 6];
const result = sumNumbers(
doubleNumbers(
filterEven(data)
)
);
console.log(result); // 24
👉 処理の流れ
filterEven([1,2,3,4,5,6])→[2,4,6]doubleNumbers([2,4,6])→[4,8,12]sumNumbers([4,8,12])→24
さらに読みやすくする（メソッドチェーン）
関数をつなげる代わりに、配列メソッドを直接チェーンして書くこともできます。
const result = [1, 2, 3, 4, 5, 6]
.filter(n => n % 2 === 0) // 偶数だけ
.map(n => n * 2) // 2倍
.reduce((acc, n) => acc + n, 0); // 合計
console.log(result); // 24
ポイント
- filter → 条件で絞り込み
- map → 形を変える
- reduce → まとめる（合計・平均・最大など）
- 関数を分けておくと「再利用」しやすい
- チェーンで書くと「処理の流れ」が一目で分かる
練習問題
次の配列を処理してみましょう。
const scores = [55, 72, 91, 38, 100, 67];
- 60点以上のスコアだけを残す
- それを「10点満点」に変換する（例: 72点 → 7.2点）
- その平均点を求める