初心者向けにわかりやすく比較した“図”と短い解説、具体例です。まず全体像をザッと掴んで、下のコードで挙動を確認してください。
図：処理のイメージ（左→右）
元配列: [1, 2, 3, 4]
map: 各要素を **変換**（要素数は変わらない）
[1, 2, 3, 4]
↓ map(x => x * 2)
[2, 4, 6, 8] ← 出力は元配列と"長さが同じ"
filter: 各要素を **判定**（true の要素だけ残す）
[1, 2, 3, 4]
↓ filter(x => x % 2 === 0)
[2, 4] ← 出力は元配列より短くなることがある
比較ポイント（簡潔）
- 目的
map：変換（例：値を2倍に、オブジェクトを別形に）filter：絞り込み（例：条件を満たす要素だけ残す）
- 出力の長さ
map：常に元配列と同じ長さ（各要素から1つずつ新要素を作る）filter：短くなることがある（条件に合わない要素は除外）
- コールバックの期待値
map：変換した値（戻り値は新しい要素）filter：真偽値（true/false）（trueの要素だけ残す）
- 元配列はどちらも変更しない（イミュータブル）
具体例（コード）
map の例（要素を2倍にする）
const a = [1,2,3,4];
const mapped = a.map(x => x * 2);
console.log(mapped); // [2,4,6,8]
console.log(a); // [1,2,3,4] （元配列はそのまま）
filter の例（偶数だけ残す）
const a = [1,2,3,4];
const filtered = a.filter(x => x % 2 === 0);
console.log(filtered); // [2,4]
console.log(a); // [1,2,3,4]
両方を組み合わせた違い（順序に注意）
同じ二つの処理（「2倍にする」「偶数だけ残す」）を順序を変えて試すと結果が違います。
const a = [1,2,3,4];
// (A) 先に map → 後で filter
const A = a
.map(x => x * 2) // [2,4,6,8]
.filter(x => x % 2 === 0); // [2,4,6,8] のうち偶数（全部偶数） => [2,4,6,8]
// (B) 先に filter → 後で map
const B = a
.filter(x => x % 2 === 0) // [2,4]
.map(x => x * 2); // [4,8]
console.log(A); // [2,4,6,8]
console.log(B); // [4,8]
⇒ 処理順によって結果が変わるので、目的に合わせて適切な順でチェーンする。
実用上の使い分け（ワンポイント）
- UI に表示する「条件に合うデータだけ」を取り出したい →
filter - API から受け取ったデータを「表示用の形に変えたい」 →
map - 「表示用に変換」しつつ「条件に合うものだけ」を残したい →
filter→mapまたはmap→filter（目的に応じて順序を検討）
覚え方（超シンプル）
- map = 変える（map = modify）
- filter = ふるいにかける（filter = フィルター）