【JavaScript】map・filter・reduceの違いとは？使い分けを初心者向けに解説

JavaScriptで配列を扱っていると、map、filter、reduce がよく出てきます。名前だけ見ると難しそうですが、役割を分けて考えれば整理しやすいです。map は変換、filter は絞り込み、reduce は集計 と覚えると、まずは十分です。

初心者が混乱しやすいのは、「3つとも配列を1件ずつ処理するので違いが見えにくい」からです。この記事では、配列の基本からつなげて、どの場面で何を使えばよいかをやさしく解説します。

ポイント 迷ったら、値を変えたいなら map、条件で残したいなら filter、1つにまとめたいなら reduce です。

結論: 3つの違いは「何を結果として返したいか」です

まずは「配列を1件ずつ見ている」という共通点よりも、「最終的に何を返したいか」が違う、と考えると選びやすくなります。

配列には複数の値が入っています。JavaScriptでは、その値を1件ずつ順番に見ながら処理することがよくあります。

const prices = [100, 200, 300];

prices.forEach(price => {
  console.log(price);
});

forEach は「1件ずつ見る」ことに特化したメソッドです。これに対して map、filter、reduce は、1件ずつ見ながら「結果も返す」という違いがあります。

map は、配列の各要素を別の形に変えたいときに使います。件数は基本的に元の配列と同じです。

const prices = [100, 200, 300];

const taxedPrices = prices.map(price => {
  return price * 1.1;
});

console.log(taxedPrices); // [110, 220, 330]

この例では、元の価格を「税込価格」に変換しています。1件ずつ処理しながら、新しい配列を作っているのがポイントです。

filter は、条件に合う要素だけを残して新しい配列を作ります。

const ages = [15, 22, 18, 30];

const adults = ages.filter(age => {
  return age >= 20;
});

console.log(adults); // [22, 30]

この例では「20歳以上だけを残す」という条件で絞り込んでいます。要素の中身を変えるのではなく、残すかどうかを決めるのが filter です。

reduce は少し難しく見えますが、役割はシンプルです。配列に入っている複数の値を、最終的に1つの値へまとめます。

const prices = [100, 200, 300];

const total = prices.reduce((sum, price) => {
  return sum + price;
}, 0);

console.log(total); // 600

この例では、価格を1件ずつ足して合計金額を作っています。sum は途中までの合計、price は今見ている要素です。

reduce は最初だけ難しく見えますが、「前までの結果に、今の値を足していく」 と考えるとかなり理解しやすくなります。

この基準で考えると、ほとんどの場面で迷いにくくなります。最初から完璧に使い分けようとせず、「何を返したいか」で判断するのがおすすめです。

ブロック構文で書いた場合、return を忘れると期待した結果になりません。特に初心者はここでつまずきやすいです。

map、filter、reduce は、基本的に元の配列そのものを直接書き換えるのではなく、新しい結果を返します。この点を理解しておくと、バグを減らしやすいです。

reduce は初期値を省略することもできますが、初心者のうちは 0 や "" などの初期値を明示したほうが理解しやすく、安全です。

まとめ map・filter・reduce の使い分け

map、filter、reduce は、JavaScriptで配列を扱うときの基本メソッドです。まずは「変換」「絞り込み」「集計」という役割の違いをつかんで、短いコード例から少しずつ慣れていきましょう。