map, filter, reduce는 무엇을 하나요?

Question

Accepted Answer

이들은 **불변(immutable)** 배열 반복자입니다 — 원본을 변경하는 대신 새로운 값을 반환하므로, 수동 `for` 루프보다 더 깔끔하고 선언적인 코드로 이어집니다.

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

// map: 각 항목을 변환 → 길이가 동일한 배열
nums.map(n => n * 2);            // [2, 4, 6, 8]

// filter: 테스트를 통과한 항목만 유지 → 더 짧은 배열
nums.filter(n => n % 2 === 0);  // [2, 4]

// reduce: 배열을 하나의 값으로 접음 (누산기 + 현재 값)
nums.reduce((sum, n) => sum + n, 0); // 10
//          ^누산기 ^항목          ^초깃값
```

## reduce의 동작 방식 (사람들이 어려워하는 부분)

reduce는 "누산기(accumulator)"를 들고 배열을 순회합니다. 각 단계에서 새로운 누산기를 반환합니다:

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

합계 계산에만 쓰이는 것이 아닙니다 — reduce로 객체를 만들고, 항목을 그룹화하고, 평탄화할 수도 있습니다:

```js
users.reduce((acc, u) => { acc[u.id] = u; return acc; }, {}); // id로 인덱싱
```

## 왜 선호하는가

이들은 깔끔하게 **체이닝(chain)**되고 변경을 일으키지 않으므로, 상태 기반 UI에서 중요합니다. `forEach`는 부수 효과(side effect)에만 사용하세요(아무것도 반환하지 않습니다). 여러 번 순회를 체이닝하게 될 거대한 배열의 경우, 단일 `reduce`나 일반 루프가 더 효율적일 수 있습니다.