Zenn
🐈

.filter().map()の代わりに.reduce()を使う

2022/10/10に公開
JavaScript
filter
map
reduce
tech

はじめに

.filter().map() を .reduce() で置き換えられるよ、の実装サンプルです。
mdn にも説明があります。

.filter().map()を使った実装サンプル

与えられた配列から以下を満たす配列を生成したいとします。

  • 与えられた配列から偶数のみを取り出す
  • 取り出した偶数を 2 倍する

.filter() と .map() を使うと以下のように記述できます。

const numbers = [0, 1, 2, 3, 4];

const evenNumbers = numbers.filter((number) => number % 2 === 0);
const doubledEvenNumbers = evenNumbers.map((number) => number * 2);

console.log(doubledEvenNumbers); // [0, 4, 8]

.reduce()で置き換えた実装サンプル

.filter() と .map() を使って記述した先ほどのコードは .reduce() を使うことで以下のように記述できます。

const numbers = [0, 1, 2, 3, 4];

const doubledEvenNumbers = numbers.reduce((prev, curr) => {
  if (curr % 2 === 0) {
    const doubledEvenNumber = curr * 2;
    prev.push(doubledEvenNumber);
  }
  return prev;
}, []);

console.log(doubledEvenNumbers); // [0, 4, 8]

.filter().map() の場合だと配列の走査が 2 度必要ですが、.reduce() を使えば 1 度で済みます。

参考

Array.prototype.reduce()

Discussion