Zenn
🔥

【Javascript初心者】letを使いたくないならreduceを覚えろ

に公開
TypeScript
tech

はじめに

Typescriptを初めて学習した時に、
基本的にconstを使うようにと言われ、それに従ってコードを書いていると、

「あれ、letなんか使わなくてもコード書けるじゃん」
「letなんか一生使うことないわ〜」

と調子に乗っていた時期が自分にはありました笑

しかしある日、

・ 配列の合計値を求めるコードを実装しろ

「え、これ1ループごとに配列の値を合算して更新していくにはletを使うしか無理くね、、？」

このようにして、初学者の自尊心は粉々に砕け散ることになったのでした。。

対象読者

  • このような経験をし、自尊心が粉々に砕け散った方
  • letをなるべく使わずに、保守性の高いコードを書きたい方
  • reduceを勉強したい方

結論

今までletを使っていたプログラミングコードが、、、

let 使用
const numbers = [1, 2, 3, 4, 5]
let result = 0 // ← let!!!!!
for (let i = 0; i < numbers.length; i++) {
    result += numbers[i]
}

reduceを使うことでこのように大変身

reduce 使用
const numbers = [1, 2, 3, 4, 5]
const result = numbers.reduce((acc, num) => {
    return acc + num
}, 0)

reduceについて解説

なぜreduceを使うとこのようなことができるのか、以下で詳しく見ていきましょう

mapやforEachと基本的には同じ

reduceは配列の各要素を１つずつ取り出して処理を行うという点で、mapやforEachと同じです。

map
const numbers = [1, 2, 3, 4, 5]
const result = numbers.map((num) => num * 2)
forEach
const numbers = [1, 2, 3, 4, 5]
const result = numbers.forEach((num) => {
  console.log(num * 2)
})
reduce
const numbers = [1, 2, 3, 4, 5]
const result = numbers.reduce((acc, num) => {
    return acc + num
}, 0)

いずれのコードも、配列numbersから各要素numを取り出して、処理を行っています

これを見ると、コード内のaccが何かわかればreduceがわかりそうな気がしてきたと思います
(それに伴い自尊心も徐々に回復してきたと思います)

accって何？？

accは、前のループで計算した値を保持し、次のループで使用するための変数です
下のようなイメージになります

acc

これにより、配列の各要素を足し合わせることができます

accの初期値は？

accは、前のループで計算した値を保持し、

と先ほど書きましたが、最初のループでは前の値は存在しません

そのため、最初のループのaccの値は、reduceの第二引数で指定します
今回のコードでは、配列の各要素以外何も足し合わせる必要がないので0を指定しています

acc

まとめ

これからはreduceを使いこなして自分の自尊心を取り戻していきましょう
(わかりづらい記事になっていたらすいません。わかりづらい部分があれば、ぜひコメントください)

Discussion