Zenn
🔥

【Typescript】letを使いたくないならreduceを覚えろ

に公開
TypeScript
tech

はじめに

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

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

とイキっていた時期が自分にはありました (笑)

しかしある日、

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

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

このようにして、【Typescriptを完全に理解した】初学者の自尊心は粉々に砕け散ることになるのでした、、 (めでたしめでたし)

対象読者

  • この記事では、そのような悲劇に苛まれた初学者の自尊心を少しでも取り戻すための記事になっています
  • 該当する方はブラウザバックしたくなる自分の心の弱さと向き合いながら読了してみてください

結論

今まで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