• reduceメソッド：配列の中身の足し合わせ、文字列として結合する時によく使われるメソッド。繰り返し処理だよ。

書き方：配列名.reduce(コールバック関数, 初期値); ※初期値はあってもなくてもいい。

コールバック関数はアロー関数などで直接処理を記述してもOK

▼コールバック関数内の引数

第一引数：accu　※accumulateの略。積み重ねるという意味

第二引数：curr　※currentの略。カレント。ITでは「現在選択されている」「操作や処理の対象となっている」という意味で用いられることが多い。

▼改めての書き方

// 初期値なしの場合
配列名.reduce((accu, curr) => {

		//処理

});

// 初期値ありの場合
//reduceメソッドの第二引数(初期値)を指定してあげると、それが最初のaccuとして渡される
配列名.reduce((accu, curr) => {

		//処理

}, 第二引数);

例1）初期値なしの場合

const arry = [1,2,3,4,5];

arry.reduce((accu, curr) => {
    console.log(accu, curr);
    return accu + curr;
 });
→ 1 2
	3 3
	6 4
	10 5
//前のループの戻り値がaccuに入る。積み重ねるだから。

//以下だと戻り値がないために、途中からaccuの値がundefindになる。
arry.reduce((accu, curr) => {
    console.log(accu, curr);
});
→ 1 2
	undefind 3
	undefind 4
	undefind 5

例2-a）初期値ありの場合　その1.

const arry = [1,2,3,4,5];

arry.reduce((accu, curr) => {
    console.log(accu, curr);
    return accu + curr;
 }**, 10**);
→ 10 1
	11 2
	13 3
	16 4
	20 5
//前のループの戻り値がaccuに入る。積み重ねるだから。

//以下だと戻り値がないために、途中からaccuの値がundefindになる。
arry.reduce((accu, curr) => {
    console.log(accu, curr);
}**, 10**);
→ 10 1
	undefind 2
	undefind 3
	undefind 4
	undefind 5

例2-b）初期値ありの場合　その2.

/**
* "animation"の各文字に <> をつけて<a><n><i><m><a><t><i><o><n>にする
*/

const str = 'animation';
const strArry = str.split(""); //animationを一文字ずつ区切って配列に格納

const result = strArry.reduce((accu, curr) => {
    return `${accu}<${curr}>`;
 }**, ""**); //初期値に空文字を入れることで、aも<>で囲われるようにする。

console.log(result);
→ <a><n><i><m><a><t><i><o><n>

▼reduceメソッドの仕組み（中身を自身で再現したよ）