js array.reduce(func, arg) の第二引数がある場合とない場合の処理

why

map とは別のこの処理が必要になった

main

developer.mozilla.org

MDN のサンプルを読み解く

accumlator は「計算に使う貯めておくもの」

だけど stack の方がわかりやすいので stack にします！！！ただの名前なので！！！

currentValue は現在の値。

reduce の 引数が 1つの場合

const arr = [1,2,3,4]
const reducer = ( stack, currentValue ) =>{
  console.log(`stack: ${stack}`);
  console.log(`currentValue: ${currentValue}`);
  return stack+ currentValue;
}
console.log(arr.reduce(reducer));

これの処理の結果が

node main.js 
stack: 1
currentValue: 2
stack: 3
currentValue: 3
stack: 6
currentValue: 4

になる。順に見ていくと

ます、最初の「スタック」には配列の一つ目 1 が入ることになる。

それに「現在値」として配列の次の値に当たる二つ目の 2 が使われる。

そしての 「スタック」と「現在値」で引数の関数の処理が行われる。

この場合は二つを足す。その結果が「スタック」に入る。

なので「スタック」は 3 になる。

次の「現在値」は配列の次の値に当たる三つ目の 3 が使われ

「スタック」に加算されて 6 になる

最後に 配列の4つめの 4 が足されて 10。

---

reduce の引数2つめを入れる場合

今度は 引数の 2つめに 2 を入れてみよう。

arr.reduce(reducer, 2)

全体は

const arr = [1,2,3,4]
const reducer = ( stack, currentValue ) =>{
  console.log(`stack: ${stack}`);
  console.log(`currentValue: ${currentValue}`);
  return stack + currentValue;
}
console.log(arr.reduce(reducer, 2));

計算結果として

stack: 2
currentValue: 1
stack: 3
currentValue: 2
stack: 5
currentValue: 3
stack: 8
currentValue: 4
12

となり、最初に

2(reduceの第二引数) + 1 ( 配列の一つ目)

が実行されている。

そのあとは 配列の2つめ、3つめ、4つめ、と func の処理をしていく。

つまり array.reduce(func, arg2)

の第二引数は最初の stack の値になる。

式と文は違う

式：返り値を持っている 文：制御構造の1単位

semicolon で区切られる処理の一つ 式の方が役割が広い

{}

にも複文と、function 定義と、object literal 、jsont