reduceメソッドとは、配列を反復処理する関数の一種です。
第一引数にコールバック関数、第二引数に初期値を指定できます↓
Array.prototype.reduce(callbackFn,initialValue);初期値が指定された場合、配列の0番目から反復処理を実行します。省略されると、配列の0番目の値を初期値に設定し、1番目の値から反復処理を行います。
つまり、初期値を設定するかしないかで反復回数が変わります。
第一引数：コールバック関数の中身
reduceメソッドのコールバック関数の中身について調べました。
引数には、以下の四つを指定できます↓
- previousValue(第一引数)
- currentValue（第二引数）
- currentIndex（第三引数）
- array（第四引数）
それぞれについて簡単に説明します。
previousValueとは
前回のコールバック関数実行時に返された値です。
初回実行時は、第二引数のinitialValueの値です。initialValueが指定されていなければ、配列の0番目の値が該当します。
currentValueとは
現在の配列の値です。
初回実行時は、initialValueが指定されている場合、配列の0番目の値です。そうでなければ、配列の1番目の値です。
currentIndexとは
currentValueの配列の番号です。
初回実行時は、initialValueが指定されている場合、0です。そうでなければ、1です。
arrayとは
反復対象の配列です。
第二引数：initialValueとは
コールバック関数を初めて実行した時のpreviousValueの初期値です。initialValueを省略するとpreviousValueの値は、配列の0番目の値となります。
この引数はcurrentValueにも関係します。
initialValueが指定されている場合、curretnValueの初期値は配列の0番目の値となります。そうでなければ、配列の1番目の値となります。
返り値
コールバック関数を実行した結果を得ることができ、配列や文字列など全ての型を返すことができます。
例外
配列に要素がなく、かつinitialValueが省略されるとエラーが発生します。
実際のコードに当てはめる
これまでの説明を実際のコードに当てはめます。
initialValueが指定・省略によって挙動が変わるため分けて考えます。
initialValueが指定されている場合
const array = [1,2,3,4];
const initialValue = 0;
const sum = array.reduce((previousValue,currentValue,currentIndex,aray) => {
console.log(`反復対象の配列： [${aray}]`);
console.log(`反復回数: ${currentIndex + 1}回目`);
console.log(`previousValue: ${previousValue}, currentValue: ${currentValue}`);
return previousValue + currentValue;
},initialValue)
console.log(`結果：${sum}`);
/*
【初回の出力結果】
反復対象の配列： [1, 2, 3, 4]
反復回数: 1回目
previousVal: 0, currentValue: 1
結果：1→2回目のpreviousValueになる
【2回目の出力結果】
反復対象の配列： [1, 2, 3, 4]
反復回数: 2回目
previousVal: 1, currentValue: 2
結果：3→3回目のpreviousValueになる
【3回目の出力結果】
反復対象の配列： [1, 2, 3, 4]
反復回数: 3回目
previousValue: 3, currentValue: 3
結果：6→4回目のpreviousValueになる
【4回目の出力結果】
反復対象の配列： [1, 2, 3, 4]
反復回数: 4回目
previousValue: 6, currentValue: 4
結果：10→反復終了。最終的な値は「10」となる。
*/initialValueが省略された場合
const array = [1,2,3,4];
const sum = array.reduce((previousValue,currentValue,currentIndex,aray) => {
console.log(`反復対象の配列： [${aray}]`);
console.log(`反復回数: ${currentIndex}回目`);
console.log(`previousVal: ${previousValue}, currentValue: ${currentValue}`);
return previousValue + currentValue;
})
console.log(`結果：${sum}`);
/*
【初回の出力結果】
反復対象の配列： [1, 2, 3, 4]
反復回数: 1回目
previousVal: 1, currentValue: 2
結果：3→2回目のpreviousValueになる
【2回目の出力結果】
反復対象の配列： [1, 2, 3, 4]
反復回数: 2回目
previousVal: 3, currentValue: 3
結果：6→3回目のpreviousValueになる
【3回目の出力結果】
反復対象の配列： [1, 2, 3, 4]
反復回数: 3回目
previousValue: 6, currentValue: 4
結果：10→反復終了。最終的な値は「10」となる
*/結果は同じですが、反復回数やpreviousValue、currentValueが一部変わっていることが分かります。
省略すると少し挙動がややこしいので、僕は初期値を指定します。
エラーが起きる場合
エラーは、配列の中身が空でinitialValueが省略された場合に起こります↓
const sum = [].reduce((previousValue,currentValue,currentIndex,aray) => {
return previousValue + currentValue;
})
console.log(`結果：${sum}`); // TypeError: Reduce of empty array with no initial valueまた、空の配列でinitialValueが指定された場合、コールバック関数は実行されずinitialValueが返り値として与えられます↓
const sum = [].reduce((previousValue,currentValue,currentIndex,aray) => {
return previousValue + currentValue;
},10000)
console.log(`結果：${sum}`); // 結果：10000参考サイト
