[JS] 配列 / reduce

reduceメソッド
---

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

arry.reduce(function(accu, curr) {
  console.log(accu, curr);
})
```

[![Image from Gyazo](https://i.gyazo.com/b6f92f318c4612987cf2c24636ec125b.png)](https://gyazo.com/b6f92f318c4612987cf2c24636ec125b)

currentには配列の値、
accumulationにはループの戻り値が入る

---
足し算

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

arry.reduce(function(accu, curr) {
  console.log(accu, curr);
  return accu + curr;
})
```

[![Image from Gyazo](https://i.gyazo.com/81e7a1778085044b147c079722e8005a.png)](https://gyazo.com/81e7a1778085044b147c079722e8005a)

---
掛け算

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

arry.reduce(function(accu, curr) {
  console.log(accu, curr);
  return accu * curr;
})
```

[![Image from Gyazo](https://i.gyazo.com/def4e716205b40adb44d5845ed9e1313.png)](https://gyazo.com/def4e716205b40adb44d5845ed9e1313)

このように、前のループの戻り値がaccuに渡ってくるというのがreduceメソッドです

---
第２引数に初期値を設定できる

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

arry.reduce(function(accu, curr) {
  console.log(accu, curr);
  return accu * curr;
}, 10);
```

[![Image from Gyazo](https://i.gyazo.com/c797b6fb1ef1a1d6063f213639105c0d.png)](https://gyazo.com/c797b6fb1ef1a1d6063f213639105c0d)

---
【目的】animationという文字列の値１つ１つに<>を付与したい

```
const str = 'animation';
const strArry = str.split('');

console.log(strArry);

const result = strArry.reduce((accu, curr) => {
  return accu + '<' + curr + '>';
})

console.log(result);
```

[![Image from Gyazo](https://i.gyazo.com/940fe95c85abda6d4c92b27972711bca.png)](https://gyazo.com/940fe95c85abda6d4c92b27972711bca)

accuの１ループ目は配列の最初の値が入るので、<>がついていません
２ループ目以降は戻り値が入ります

---
'<' + accu + '>'とすればいいかというと、そういうわけでもありません
<>が多くなり過ぎます

```
const str = 'animation';
const strArry = str.split('');

console.log(strArry);

const result = strArry.reduce((accu, curr) => {
  return '<' + accu + '>' + '<' + curr + '>';
})

console.log(result);
```

[![Image from Gyazo](https://i.gyazo.com/fb1b7d6e5688b4ffa72187533cea5969.png)](https://gyazo.com/fb1b7d6e5688b4ffa72187533cea5969)

---
第２引数に空文字を渡してあげると

```
const str = 'animation';
const strArry = str.split('');

console.log(strArry);

const result = strArry.reduce((accu, curr) => {
  return accu + '<' + curr + '>';
}, "")

console.log(result);
```

[![Image from Gyazo](https://i.gyazo.com/0b5e7c4a5679ed041236c8ed37cbf38b.png)](https://gyazo.com/0b5e7c4a5679ed041236c8ed37cbf38b)

ちょうど良くなります

---
戻り値の部分をテンプレートリテラルで

```
const str = 'animation';
const strArry = str.split('');

console.log(strArry);

const result = strArry.reduce((accu, curr) => {
  return `${accu}<${curr}>`;
}, "")

console.log(result);
```

こう書き直せます


[![Image from Gyazo](https://i.gyazo.com/0b5e7c4a5679ed041236c8ed37cbf38b.png)](https://gyazo.com/0b5e7c4a5679ed041236c8ed37cbf38b)

出力結果は同じです

---
console.log(accu);で中身を見てみると

```
const str = 'animation';
const strArry = str.split('');

console.log(strArry);

const result = strArry.reduce((accu, curr) => {
  console.log(accu);
  return accu + '<' + curr + '>';
}, "")

console.log(result);
```

[![Image from Gyazo](https://i.gyazo.com/3ef9ae45136d207b191156e1aadb0465.png)](https://gyazo.com/3ef9ae45136d207b191156e1aadb0465)

こんな感じになっています

reduce関数
---

```
const str = 'animation';
const strArry = str.split('');

function tag(accu, curr) {
  console.log(accu, curr);
  return `${accu}<${curr}>`;
}

function reduce(arry, callback, defaultValue) {
  let accu = defaultValue;
  for(let i = 0; i < arry.length; i++) {
    let curr = arry[i];
    callback(accu, curr);
  }
}

const result = reduce(strArry, tag, "");
console.log(result);
```

[![Image from Gyazo](https://i.gyazo.com/7acb7ad12a918a4790a7b6840720947e.png)](https://gyazo.com/7acb7ad12a918a4790a7b6840720947e)

---

```
const str = 'animation';
const strArry = str.split('');

function tag(accu, curr) {
  console.log(accu, curr);
  return `${accu}<${curr}>`;
}

function reduce(arry, callback, defaultValue) {
  let accu = defaultValue;
  for(let i = 0; i < arry.length; i++) {
    let curr = arry[i];
    accu = callback(accu, curr);
  }
}

const result = reduce(strArry, tag, "");
console.log(result);
```

[![Image from Gyazo](https://i.gyazo.com/aee376311f84a20499e2d7ae6c39f65a.png)](https://gyazo.com/aee376311f84a20499e2d7ae6c39f65a)

---

```
const str = 'animation';
const strArry = str.split('');

function tag(accu, curr) {
  console.log(accu, curr);
  return `${accu}<${curr}>`;
}

function reduce(arry, callback, defaultValue) {
  let accu = defaultValue;
  for(let i = 0; i < arry.length; i++) {
    let curr = arry[i];
    accu = callback(accu, curr);
  }

  return accu;
}

const result = reduce(strArry, tag, "");
console.log(result);
```

[![Image from Gyazo](https://i.gyazo.com/b868f3a7438dec0027559c09d2e794a0.png)](https://gyazo.com/b868f3a7438dec0027559c09d2e794a0)