9 回閲覧されました

みなさんこんにちは、jonioです。

今回はJavaScriptの「.reduce()」について簡単なサンプルコードで解説します。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

.reduce()とは

配列の要素の値を足し合わせて合計を求めたい時に便利なメソッドです。

サンプルコードで説明します。

const numbers = [10, 20, 30];

const total = numbers.reduce((sum, num) => {
  return sum + num;
}, 0);

console.log(total);

const numbers = [10, 20, 30];

const total = numbers.reduce((sum, num) => {
  return sum + num;
}, 0);

console.log(total);

配列の要素ごとに「(sum, num) => {return sum + num}」が行われます。

配列の要素は10・20・30なので10の時、20の時、30の時と動作します。

reduceの第二引数(num)は足し合わせる値(配列の要素のこと)です。

reduceの第一引数(sum)は合計の値です。

5行目の「0」は初期値です。

3行目〜5行目は初期値0に配列の要素をインデックス番号が小さい順に足し合わせます。

sumにnumの値(最初は10)を足して10になり次のnumの値の20を足して30になり30を足して60を返します。