💡 この記事でわかること
- map・filter・reduceとは何か
- mapで配列の各要素を変換する方法
- filterで条件に合う要素だけ抽出する方法
- reduceで配列を1つの値にまとめる方法
- forEachとの違いと使い分け
1. map・filter・reduceとは？
map・filter・reduceとは、
👉 配列に対して「変換」「抽出」「集約」という決まった処理を行う、配列専用のメソッドです。
💡 いずれも「配列の各要素に対して何をするか」を、関数として渡す点が共通しています。for文でループを書くよりも、やりたいことがコードから読み取りやすくなるのが特徴です。
2. map:各要素を変換して新しい配列を作る
mapは、配列の全要素に処理を行い、その結果を集めた新しい配列を返します。
const prices = [100, 200, 300];
const taxedPrices = prices.map((price) => price * 1.1);
console.log(taxedPrices); // [110, 220, 330]
console.log(prices); // [100, 200, 300](元の配列は変わらない)👉 mapに渡した関数の戻り値が、新しい配列の各要素になります。元の配列の要素数と、mapが返す配列の要素数は必ず同じになる点がポイントです。
3. filter:条件に合う要素だけ抽出する
filterは、渡した関数がtrueを返した要素だけを集めた新しい配列を返します。
const prices = [100, 200, 300, 400];
const expensivePrices = prices.filter((price) => price >= 200);
console.log(expensivePrices); // [200, 300, 400]👉 filterに渡した関数の戻り値がtrueかfalseかで「残すか捨てるか」が決まります。mapと違い、返ってくる配列の要素数は元の配列以下になります。
4. reduce:配列を1つの値にまとめる
reduceは、配列の要素を順番に処理しながら、最終的に1つの値にまとめます。3つの中で一番とっつきにくいメソッドです。
const prices = [100, 200, 300];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 600👉 reduceの第1引数は「1つ前までの計算結果(この例ではsum)」、第2引数は「今処理している要素(price)」です。reduceの2番目の引数(この例では0)は、計算をスタートするときの初期値になります。
1回ずつの流れを追うと、次のようになります。
// 1回目: sum=0(初期値), price=100 → 戻り値100
// 2回目: sum=100, price=200 → 戻り値300
// 3回目: sum=300, price=300 → 戻り値600(最終結果)5. メソッドチェーンで組み合わせる
map・filter・reduceはいずれも配列を返す(reduceは値も返せる)ため、.でつなげて連続して使えます。
const products = [
{ name: "ペン", price: 100, inStock: true },
{ name: "ノート", price: 200, inStock: false },
{ name: "消しゴム", price: 150, inStock: true },
];
// 在庫がある商品の税込価格の合計を計算する
const total = products
.filter((p) => p.inStock) // 在庫ありだけ抽出
.map((p) => p.price * 1.1) // 税込価格に変換
.reduce((sum, price) => sum + price, 0); // 合計する
console.log(total); // 275👉 「抽出してから」「変換して」「まとめる」という処理の流れが、コードの見た目のままになるのがメソッドチェーンの利点です。
6. forEachとの違い
👉 JavaScriptのループ処理(for・while・forEach)についての記事はこちら
💡 forEachは配列の各要素に対して処理を行うだけで、新しい配列を返しません(戻り値はundefined)。「新しい配列が欲しいときはmap・filter」「単に画面表示するだけなど、値を返す必要がないときはforEach」と使い分けましょう。
7. 初心者がつまずきやすいポイント
- mapの中でreturnを忘れる:戻り値がないと、新しい配列の要素がすべてundefinedになります
- reduceの初期値を省略する:配列が空のときにエラーになることがあるため、基本的に初期値は指定しましょう
- 元の配列が変わると誤解する:map・filterはどちらも新しい配列を返すだけで、元の配列自体は変更しません
まとめ
- mapは各要素を変換した新しい配列を作る
- filterは条件に合う要素だけを抽出した新しい配列を作る
- reduceは配列を1つの値にまとめる
- いずれも元の配列は変更せず、新しい結果を返す
- チェーンでつなげると、処理の流れをコードのまま表現できる
map・filter・reduceは最初は使い分けに迷いますが、「変換ならmap、絞り込みならfilter、集計ならreduce」という役割さえ覚えれば、実際のコードでも自然に選べるようになります。