Tips

【Reactでも使う】JavaScriptのreduceの使い方を解説

  • このエントリーをはてなブックマークに追加

自分はWeb制作からプログラミングを始めたのでJavaScriptのreduceについて存在すら知りませんでした。

ReactのようなモダンJSを勉強し始めた時にreduceが登場して少し手こずったことがあったので、reduceの使い方を共有です。

また動画もあるので必要に応じて使ってください。

https://youtu.be/jgqye-O8wvE

JavaScriptにおけるreduceの使い方

まずは簡単な例で説明していきます。

const number = [100,200,300];

const sum = number.reduce((pre,current) => {
  return pre + current;
});

console.log(sum); // 600と出力される

reduceは簡単に言うと「合算」のような動作をします。

上記の例だと配列numberのなかに3つの数字があり、それらを足し合わせたものを返しています。

reduceはコードの書き方を見てもらうと分かるように、繰り返し処理のような形にもなっています。

配列のなかを順番に見て処理していくので、繰り返し処理と言っても良いかもしれません。

またreduceでは上記でいうpre、currentのように2つの引数を取ることが多いです。

先ほど繰り返し処理と似ていると言ったように、配列のなかの要素を左から見ていきます。

左から見て「1個前に見た要素」「今見ている要素」という具合に、2つの引数に値が順番に代入されていきます。

上記の例だと、
①「pre = 0, current = 100」
②「pre = 100, current = 200」
③「pre = 200, current = 300」
という順番に引数に値が代入されました。

ちなみに上記のような数字を合計するだけであれば、for文でも同じことができます。

const number = [100,200,300];
let sum = 0;
for(const num of number){
  sum += num;
}
console.log(sum); // 600と出力される

こちらの方が馴染みがあると思いますが、reduceの方が少しばかり短く書くことができます。

今回やった数字の合算であればforでもreduceでも自分の使いやすい方で大丈夫です。

JavaScriptのreduceでは配列の合体もできる

reduceでは配列同士を合体して1つの配列にすることもできます。

const array = [["aaa","bbb"],["ccc","ddd"]];
const mergeArray = array.reduce((pre, current) => {
  return pre.concat(current);
});
console.log(mergeArray); // ["aaa","bbb","ccc","ddd]と出力される

実際のところ配列の合体は「スプレッド構文」というものの方がよく使われるのですが、初心者には少し難しいのでreduceから覚えると良いかと思います。

また上記のように配列の合体では左の配列が先に来るように合体します。

例えば右の配列から足したいときはreduceRightという専用の関数がJavaScriptには用意されています。

const array = [["aaa","bbb"],["ccc","ddd"]];
const mergeArray = array.reduceRight((pre, current) => {
  return pre.concat(current);
});
console.log(mergeArray); // ["ccc","ddd","aaa","bbb"]と出力される

JavaScriptのreduceの注意点

ここまでで何となくreduceの動作が分かってきたかと思いますので、reduceを使う上での大事なポイントを共有します。

reduceは配列にのみ使用できる

reduceは配列にのみ使える関数のため、オブジェクトには使うことができません。

const data = {id: "0001", name: "AAA", age: 20};

const result = data.reduce((sum, num) => {
  return sum + num;
}, 0);
console.log(result); // エラーになる

一方で配列の中の要素がオブジェクトになっている場合は問題ありません。

const dataList = [
  {
    number: 1,
    name: "AAA"
  },
  {
    number: 3,
    name: "BBB"
  },
  {
    number: 5,
    name: "CCC"
  },
];
const listResult = dataList.reduce((sum, num) => {
  return sum + num.number;
}, 0);
console.log(listResult); // 9と出力される

また今回参考にした本はこちらになります。

良ければこちらからどうぞ。

  • このエントリーをはてなブックマークに追加