[JS] 配列 / reduce #JavaScript

reduceメソッド

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

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

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

足し算

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

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

掛け算

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

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

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

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

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

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

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

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

console.log(strArry);

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

console.log(result);

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

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

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

console.log(strArry);

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

console.log(result);

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

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

console.log(strArry);

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

console.log(result);

ちょうど良くなります

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

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

console.log(strArry);

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

console.log(result);

こう書き直せます

出力結果は同じです

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);

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

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);

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);

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);