では、実務でよくあるパターンとして「配列で返している関数」をオブジェクトで返す形にリファクタリングする例を、元コード → 修正版コード → 呼び出し例 でステップごとに解説します。
例題：配列で返している統計関数
元コード（配列で返す）
function calcStats(values) {
const sum = values.reduce((a, b) => a + b, 0);
const avg = sum / values.length;
const max = Math.max(...values);
const min = Math.min(...values);
return [sum, avg, max, min]; // 配列で返す
}
// 呼び出し側
const [sum, avg, max, min] = calcStats([10, 20, 30]);
console.log(sum, avg, max, min); // 60 20 30 10
問題点（実務上のデメリット）
- 順番依存
[sum, avg, max, min]の順番を覚えておかないと、間違えやすい。
- 可読性が低い
sumとresult[0]が直感的に結びつかない。
- 拡張が難しい
- 例えば「中央値」を返す場合、呼び出し側の分割代入も修正が必要。
修正版コード（オブジェクトで返す）
function calcStatsObj(values) {
const sum = values.reduce((a, b) => a + b, 0);
const avg = sum / values.length;
const max = Math.max(...values);
const min = Math.min(...values);
const median = values.sort((a, b) => a - b)[Math.floor(values.length / 2)];
return { sum, avg, max, min, median }; // オブジェクトで返す
}
呼び出し側
const { sum, avg, max, min, median } = calcStatsObj([10, 20, 30]);
console.log("合計:", sum); // 合計: 60
console.log("平均:", avg); // 平均: 20
console.log("最大:", max); // 最大: 30
console.log("最小:", min); // 最小: 10
console.log("中央値:", median); // 中央値: 20
修正版のメリット（実務的視点）
- 意味が明確
medianやsumなど変数名で直接意味が分かる。
- 順番に依存しない
- オブジェクトなので
[0]のように番号を覚える必要なし。
- オブジェクトなので
- 拡張しやすい
- 将来
varianceやstdDevを追加しても、呼び出し側のコードは変わらずに{ variance, stdDev }を追加するだけ。
- 将来
- チーム開発向き
- コードレビューやバグ防止に効果大。
実務Tips
- 配列で返すのは「順序が固定され意味が揃った値」だけ。
- 意味のある異種データや将来拡張の可能性がある場合はオブジェクトで返すのがベストプラクティス。
- APIやライブラリ設計では、ほとんどオブジェクトで返す形が主流。
💡 応用例として、この関数を APIレスポンス用 に書き換えるとこんな形になります：
function getStatsApi(values) {
const { sum, avg, max, min, median } = calcStatsObj(values);
return {
success: true,
data: { sum, avg, max, min, median },
errors: []
};
}
const response = getStatsApi([10, 20, 30]);
console.log(response.data.sum); // 60
console.log(response.data.median);// 20
- APIでは
dataにオブジェクト、エラーや成功状態も一緒に返すのが現場標準です。
