NON STOP TECH BLOG

ノンストップで書きまくる技術ブログ

JavaScriptのreduce()メソッド

JavaScript

今日は雨がすごい〜〜〜 あと上着来てきたのにめちゃくちゃさむいっ！！！

さて本題、今までなんとなく使ってしまっていたのですが…
今日コードを書いていて挙動がなんだかよくわからなくなったので、改めて調べてみました！

reduceの仕様

こちらを読んで、まとめてみます 。

引数

まず、reduce()の引数は2つで
1. コールバック関数
2. initialValue(オプション)
です。

この1番めのコールバックの引数に
1. アキュムレータ
2. 現在値
3. 現在のインデックス
4. 配列
の4つがあります。

コールバックのそれぞれの引数について詳しく見ていきます。

  • アキュムレータ
    コールバック内で処理された、戻り値が累積されたもの

  • 現在値
    現在処理されている配列の要素

  • 現在のインデックス
    現在処理されている配列要素のインデックス

  • 配列
    reduce()が呼ばれた配列

戻り値

処理結果の値

処理の詳細

reduce()メソッドは、配列に存在する各要素に対して、コールバック関数を一度だけ実行します。
このときにreduce()メソッドの2つめの引数 initialValueがポイントになります。
initialValueが指定されているか、そうでないかでコールバック関数の挙動が変わります。

reduce()メソッドが呼び出されたときに

  1. initialValueが指定されていた場合
    コールバック関数のアキュムレータとinitialValueは等しくなり、currentValueは配列の最初の値と等しくなる
  2. initialValueが指定されていない場合
    アキュムレーターは配列の最初と等しくなり、現在値は配列の2番目の値と等しくなる

という仕様になっています。

ここで注意すべきなのは次の点です。
initialValueが指定されなかった場合は、reduce() は最初のインデックスを飛ばしてインデックス1から実行する。
initialValueが指定されていたらインデックス0から開始する。
また、空の配列に対してreduce()を実行し、initialValueが指定されていないと、TypeErrorが発生するようです。

なんとなくつかめたような気がするので、動かしてみます。

動かしてみた

まず現在値(currentValue)がどの様に遷移するのか。
素直に出力してみます！

currentValue

initialValue指定なし

[0,1,2,3,4].reduce((acc, cur, index, array) => {
  console.log(cur);
});

出力結果

1
2
3
4

initialValue指定

[0,1,2,3,4].reduce((acc, cur, index, array) => {
  console.log(cur);
}, 5);

出力結果

0
1
2
3
4

initialValueを指定すると、配列の最初の値から現在値に入ることがわかりました！
次はインデックスを出力してみます。

インデックス

initialValue指定なし

['a', 'b', 'c', 'd', 'e'].reduce((acc, cur, index, array) => {
  console.log(index);
});

出力

1
2
3
4

initialValue指定

['a', 'b', 'c', 'd', 'e'].reduce((acc, cur, index, array) => {
  console.log(index);
},'f');

出力

0
1
2
3
4

initialValueを指定すると、インデックスも0から始まります！.......当たり前ですね…笑
最後にアキュムレーターの動きを見てみます！

アキュムレーター

initialValue指定なし

['a', 'b', 'c', 'd'].reduce((acc, cur, index, arr) => {
  return acc + cur;
});

出力

'abcd'

initialValue指定

['a', 'b', 'c', 'd'].reduce((acc, cur, index, arr) => {
  return acc + cur;
}, ‘e’);

出力

‘eabcd’

initialValueを指定しないと、初回のアキュムレーターには1番目の値がはいり、
指定するとinitialValueが入ることがわかりました！

最後に

基本的な処理を通して、reduce()メソッドの挙動を調べてみました！
JavaScriptには配列のループ処理をするメソッドがいくつかありますよね〜。その中でもreduceは癖が強いかなと思います。
状況に応じて適切なメソッドが使えるようになりたいです！

読んでくれてありがとうございました！