【JS】reduce() メソッドは便利だよ。

10月に受験予定だった基本情報技術者試験の延期が決定したので今更ながら鬼滅の刃を鑑賞していた4連休最終日、reduce()メソッドってなんでreduceって言うのだろうという疑問を持ったのでreduce()メソッドの基本的な使い方について書いてみる。

参考：【MDN】Array.prototype.reduce()

配列の合計値を計算

reduce()は配列の各要素を左から右に処理して単一の値を生成してくれる。
※reduceRight()だと右から左に処理する

合計値を出す時に便利↓

const array = [1, 2, 3, 4, 5];

const sum = array.reduce(function (a, b) {
    return a + b;
});

// 省略して下記のように書いたらもっと簡単
// const sum = array.reduce((a, b) => a + b);

console.log(sum); // 15

よくやるやり方↓

const array = [1, 2, 3, 4, 5];

let sum = 0

for (let i = 0; i < array.length; i++) {
    sum += array[i];
}

// もしくは、
// for (const num of array) {
//     sum += num;
// }

console.log(sum); // 15

for文でぐるぐるしてたけど、reduceの方がシンプルに書ける気がする。

最大値を取得する

const array = [1, 20, 3, 4, 5];

const max = array.reduce(function (a, b) {
    return a > b ? a : b;
    // 下記でもいい↓
    // return Math.max(a, b);
})

// 省略して下記のように書いたらもっと簡単
// const max = array.reduce((a, b) => a > b ? a : b);

console.log(max); // 20

return の「a > b ? a : b」は 条件(三項)演算子 というもの。
if文の省略版みたいなやつ。
条件式 ? trueの場合 : falseの場合

まとめ

で、なんでreduce(減らす)って言うの？
配列の中にあるたくさんの要素を一つに絞るからなのかな？
ちょっと(30秒ほど)調べてみたがよくわからんかったからもういいや。

もっと色々使い方あるので、実際に使用した時に追記していきます。