🐙

【JavaScript】 reduce()について

2023/02/16に公開

はじめに

この記事では、JavaScriptのメソッドであるreduce()についてまとめます。
備忘録としての記事なので、完全に初心者向けとなります。

reduce()は配列に対して適用され、結果を蓄積していくメソッドです。

文法

array.reduce((callback)関数, 初期値) ※初期値は省略可

reduceの(コールバック)関数は引数を4つまでとります。
※この記事ではは、引数を2つで進めます。

例として、

1. 配列の合計値
2. 配列の最大値
3. 文字列を一文字ずつ<>で囲む

を実践していきます。

reduce()で、配列の合計値を出していきます。

合計値

const Array1 = [1, 2, 3, 4, 5];
const result1 = Array1.reduce((acc, cur) => acc + cur);
console.log(result1);

※accはaccumulatorの略、curはcurrentValueの略です。
この結果、

15　<!-- console.log(result1) -->

となります。

コールバック関数の一番最初の第一引数accには、配列の一つ目である1が代入されます。
直前の返値が次の第一引数accに代入され、配列の次の数字が第二引数curに代入されていきます。

配列の中で、最大値を求めていきます。

最大値

const Array2 = [11, 2, 13, 4, 7, 16, 4];
const result2 = Array1.reduce((acc, cur) => MAth.max(acc, cur);
console.log(result2);

※Math.max(a, b)は大きい数値を返すメソッドです。
この結果

16　<!-- console.log(result1) -->

となります。

HELLOという文字列に対し、一文字ずつ<>で囲む<H><E><L><L><O>を取得します。

const str = "HELLO";
const strArray = str.split("");

上記のコードで

["H", "E", "L", "L", "O"] <!-- styArray -->

の配列が得られました。
この配列に対して、下のコードを実行します。

const result3 = styArray.reduce((acc, cur) => {
  return acc + "<" + cur + ">";
});
console.log(result3);

この結果、

H<E><L><L><O> <!-- console.log(result3) -->

となります。これは最初の第一引数にはHが代入されるため、Hに<>が囲まれなかったためです。
配列のすべての値を取得するためには初期値を指定する必要があります。
したがって、すべての文字を<>で囲むには、以下のコードを実行します。

const result3 = strArray.reduce((acc, cur) => {
  return acc + "<" + cur + ">";
}, ""); 
<!-- 初期値は、空文字"" -->
console.log(result3);

その結果、

<H><E><L><L><O> <!-- console.log(result3) -->

が得られます。

今後も備忘録を増やしていきます！