map、filter、reduce は何をしますか？

Question

Accepted Answer

これらは **イミュータブル** な配列のイテレータであり、元の配列を変更する代わりに新しい値を返します。これにより、手書きの `for` ループよりもクリーンで宣言的なコードになります。

```js
const nums = [1, 2, 3, 4];

// map: transform each item → array of the SAME length
nums.map(n => n * 2);            // [2, 4, 6, 8]

// filter: keep items passing a test → SHORTER array
nums.filter(n => n % 2 === 0);  // [2, 4]

// reduce: fold the array into ONE value (accumulator + current)
nums.reduce((sum, n) => sum + n, 0); // 10
//          ^acc  ^item            ^initial value
```

## reduce の仕組み（多くの人が難しいと感じる点）

Reduce は「アキュムレータ（accumulator）」を持ち運びながら配列を走査します。各ステップで新しいアキュムレータを返します。

```js
// step 0: acc=0,  n=1 → 1
// step 1: acc=1,  n=2 → 3
// step 2: acc=3,  n=3 → 6
// step 3: acc=6,  n=4 → 10
```

合計のためだけのものではありません — reduce はオブジェクトの構築、アイテムのグループ化、フラット化もできます。

```js
users.reduce((acc, u) => { acc[u.id] = u; return acc; }, {}); // index by id
```

## なぜこれらを好むのか

これらはきれいに **チェーン** でき、変更（mutate）を行わないため、状態駆動の UI で重要になります。`forEach` は副作用のためだけに使ってください（何も返しません）。複数のパスをチェーンすることになる巨大な配列では、1回の `reduce` や素朴なループのほうが効率的なこともあります。