では「関数の戻り値をさらに別の関数に渡す」練習に進みましょう。これはプログラムを組み合わせて使うときにとても大事な考え方です。
ステップアップ練習
例題1：計算結果を別の関数に渡す
まずはシンプルな例から。
// 合計と平均を返す関数
function summarize(numbers) {
const sum = numbers.reduce((acc, n) => acc + n, 0);
const avg = numbers.length > 0 ? sum / numbers.length : 0;
return { sum, avg };
}
// summarize の結果を受け取って、表示用の文字列を作る関数
function formatSummary(summary) {
return `合計: ${summary.sum}, 平均: ${summary.avg}`;
}
// 実行
const stats = summarize([10, 20, 30, 40]);
console.log(formatSummary(stats));
// → "合計: 100, 平均: 25"
👉 ポイント
summarizeが返したオブジェクトを、そのままformatSummaryに渡しています。- 関数同士を組み合わせることで「計算」と「表示」を分けられ、コードが整理されます。
例題2：関数の戻り値を直接渡す
変数に入れずに、戻り値をそのまま次の関数に渡すこともできます。
console.log(formatSummary(summarize([5, 15, 25])));
// → "合計: 45, 平均: 15"
👉 ポイント
summarize([5, 15, 25])がオブジェクトを返し、それをそのままformatSummaryに渡しています。- 「関数の中に関数を入れる」イメージです。
例題3：複数の関数をつなげる
さらに応用して「データを加工 → 計算 → 表示」と流れを作ってみましょう。
// データを加工する関数（例: 文字列を数値に変換）
function parseNumbers(str) {
return str.split(",").map(s => Number(s.trim()));
}
// 合計と平均を返す関数（さっきの summarize）
function summarize(numbers) {
const sum = numbers.reduce((acc, n) => acc + n, 0);
const avg = numbers.length > 0 ? sum / numbers.length : 0;
return { sum, avg };
}
// 表示用に整える関数
function formatSummary(summary) {
return `合計: ${summary.sum}, 平均: ${summary.avg}`;
}
// 実行
const input = "10, 20, 30, 40";
console.log(formatSummary(summarize(parseNumbers(input))));
// → "合計: 100, 平均: 25"
👉 ポイント
parseNumbers→summarize→formatSummaryと関数をつなげています。- こうすると「入力 → 処理 → 出力」の流れがきれいに分かれます。
まとめ
- 関数の戻り値は「次の関数の入力」として使える。
- 関数を組み合わせると、コードが整理されて読みやすくなる。
- 「計算」「加工」「表示」など役割ごとに関数を分けると、再利用もしやすい。