JavaScript の配列操作でよく出てくる map / filter / forEach は似ているようで役割が違います。初心者向けに整理してみましょう。
ざっくりイメージ
- map → 「変換」：配列を加工して 新しい配列を返す
- filter → 「選別」：条件に合う要素だけを集めて 新しい配列を返す
- forEach → 「実行」：配列を順番に処理するだけ（新しい配列は返さない）
具体例で比較
1. map（変換）
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
console.log(nums); // [1, 2, 3]（元の配列はそのまま）
👉 「全要素を2倍にして新しい配列を作る」
2. filter（選別）
const nums = [1, 2, 3, 4, 5];
const even = nums.filter(n => n % 2 === 0);
console.log(even); // [2, 4]
👉 「偶数だけを取り出して新しい配列を作る」
3. forEach（実行）
const nums = [1, 2, 3];
nums.forEach(n => {
console.log(n * 2);
});
// 出力: 2, 4, 6
// 返り値は undefined
👉 「配列を順番に処理するだけで、新しい配列は作らない」
まとめ表
| メソッド | 返り値 | 主な用途 | 特徴 |
|---|---|---|---|
| map | 新しい配列 | 要素を変換 | 元の配列と同じ長さ |
| filter | 新しい配列 | 条件で選別 | 元の配列より短くなることもある |
| forEach | なし | 繰り返し処理 | 配列を返さず「副作用」に使う |
使い分けのコツ
- 配列を別の形に変換したい →
map - 条件に合うものだけ残したい →
filter - ただ処理を実行したい（ログ出力や合計計算など） →
forEach
（ただし合計など「値をまとめたい」場合はreduceの方が便利）
💡 実務では「map と filter を組み合わせる」ことが多いです。
例：20歳以上のユーザーの名前を大文字にする
const users = [
{ name: 'Sato', age: 20 },
{ name: 'Suzuki', age: 17 },
{ name: 'Tanaka', age: 30 },
];
const result = users
.filter(u => u.age >= 20) // 20歳以上を選別
.map(u => u.name.toUpperCase()); // 名前を大文字に変換
console.log(result); // ['SATO', 'TANAKA']
👉 ここまでで「map＝変換」「filter＝選別」「forEach＝実行」と整理できました。