自分はWeb制作からプログラミングを始めたのでJavaScriptのreduceについて存在すら知りませんでした。
ReactのようなモダンJSを勉強し始めた時にreduceが登場して少し手こずったことがあったので、reduceの使い方を共有です。
また動画もあるので必要に応じて使ってください。
JavaScriptにおけるreduceの使い方
まずは簡単な例で説明していきます。
const number = [100,200,300];
const sum = number.reduce((pre,current) => {
return pre + current;
});
console.log(sum); // 600と出力されるreduceは簡単に言うと「合算」のような動作をします。
上記の例だと配列numberのなかに3つの数字があり、それらを足し合わせたものを返しています。
reduceはコードの書き方を見てもらうと分かるように、繰り返し処理のような形にもなっています。
配列のなかを順番に見て処理していくので、繰り返し処理と言っても良いかもしれません。
またreduceでは上記でいうpre、currentのように2つの引数を取ることが多いです。
先ほど繰り返し処理と似ていると言ったように、配列のなかの要素を左から見ていきます。
左から見て「1個前に見た要素」「今見ている要素」という具合に、2つの引数に値が順番に代入されていきます。
上記の例だと、
①「pre = 0, current = 100」
②「pre = 100, current = 200」
③「pre = 200, current = 300」
という順番に引数に値が代入されました。
ちなみに上記のような数字を合計するだけであれば、for文でも同じことができます。
const number = [100,200,300];
let sum = 0;
for(const num of number){
sum += num;
}
console.log(sum); // 600と出力されるこちらの方が馴染みがあると思います。
reduceに限らず同じ処理を別の書き方にできる例はプログラムの世界ではたくさんあるので、常に色んな引き出しを持てると良いかもしれません。
JavaScriptのreduceでは配列の合体もできる
reduceでは配列同士を合体して1つの配列にすることもできます。
const array = [["aaa","bbb"],["ccc","ddd"]];
const mergeArray = array.reduce((pre, current) => {
return pre.concat(current);
});
console.log(mergeArray); // ["aaa","bbb","ccc","ddd]と出力される実際のところ配列の合体は「スプレッド構文」というものの方がよく使われるのですが、初心者には少し難しいのでreduceから覚えると良いかと思います。
また上記のように配列の合体では左の配列が先に来るように合体します。
例えば右の配列から足したいときはreduceRightという専用の関数がJavaScriptには用意されています。
const array = [["aaa","bbb"],["ccc","ddd"]];
const mergeArray = array.reduceRight((pre, current) => {
return pre.concat(current);
});
console.log(mergeArray); // ["ccc","ddd","aaa","bbb"]と出力される