JavaScriptでよく遭遇するエラーの1つに「TypeError: Cannot read property 'reduce' of undefined（または null）」があります。このエラーの解決方法と、reduce()メソッドの正しい使い方について詳しく解説します。

reduce()メソッドとは

reduce()メソッドは、配列の要素を1つの値に集約するための強力なメソッドです。配列の各要素に対して、コールバック関数を実行し、その結果を累積していきます。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, current) => acc + current, 0);
console.log(sum); // 15

エラーが発生する主な原因

reduce()メソッドに関連するエラーは、主に以下の状況で発生します：

1. 配列が未定義（undefined）または null の場合

2. 空の配列で初期値を指定していない場合

3. 配列ではないオブジェクトに対してreduce()を使用した場合

エラーの解決方法

1. 配列の存在確認

// 悪い例
const data = undefined;
const result = data.reduce((acc, curr) => acc + curr, 0);

// 良い例
const data = undefined;
const result = (data || []).reduce((acc, curr) => acc + curr, 0);

2. 初期値を必ず指定する

// 悪い例（空配列でエラー）
const emptyArray = [];
const result = emptyArray.reduce((acc, curr) => acc + curr);

// 良い例
const emptyArray = [];
const result = emptyArray.reduce((acc, curr) => acc + curr, 0);

3. 配列かどうかの型チェック

// 安全なreduce()の使用
const data = someValue;
if (Array.isArray(data)) {
    const result = data.reduce((acc, curr) => acc + curr, 0);
}

reduce()メソッドの活用例

オブジェクトの集計

const orders = [
    { product: 'Apple', price: 100 },
    { product: 'Orange', price: 80 },
    { product: 'Banana', price: 60 }
];

const totalPrice = orders.reduce((sum, order) => sum + order.price, 0);
console.log(totalPrice); // 240

配列の平坦化

const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flatArray = nestedArray.reduce((acc, curr) => [...acc, ...curr], []);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

要素の出現回数のカウント

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1;
    return acc;
}, {});
console.log(count); // { apple: 3, banana: 2, orange: 1 }

ベストプラクティス

1. 初期値は常に指定する

2. コールバック関数は純粋関数にする

3. 複雑な処理は分割する

4. エラーハンドリングを適切に行う

// 安全で再利用可能なreduce()の実装
function safeReduce(array, callback, initialValue) {
    if (!Array.isArray(array)) {
        return initialValue;
    }
    return array.reduce(callback, initialValue);
}

まとめ

reduce()メソッドは非常に強力な配列操作メソッドですが、適切なエラーハンドリングと初期値の指定が重要です。以下の点に注意して使用しましょう：

  • 配列の存在確認を行う
  • 初期値を必ず指定する
  • 適切な型チェックを実施する
  • エラーハンドリングを忘れない

これらの注意点を守ることで、より安全で保守性の高いコードを書くことができます。