map, filter và reduce làm gì?

Question

Accepted Answer

Chúng là các bộ lặp mảng **bất biến** — chúng trả về một giá trị mới thay vì thay đổi mảng gốc, dẫn đến code sạch hơn, khai báo hơn (declarative) so với vòng lặp `for` thủ công.

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

// map: biến đổi mỗi phần tử → mảng có CÙNG độ dài
nums.map(n => n * 2);            // [2, 4, 6, 8]

// filter: giữ lại phần tử vượt qua bài kiểm tra → mảng NGẮN hơn
nums.filter(n => n % 2 === 0);  // [2, 4]

// reduce: gộp mảng thành MỘT giá trị (accumulator + phần tử hiện tại)
nums.reduce((sum, n) => sum + n, 0); // 10
//          ^acc  ^item            ^giá trị khởi tạo
```

## Cách reduce hoạt động (cái mà mọi người thấy khó hiểu)

Reduce duyệt qua mảng mang theo một "accumulator." Mỗi bước trả về accumulator mới:

```js
// bước 0: acc=0,  n=1 → 1
// bước 1: acc=1,  n=2 → 3
// bước 2: acc=3,  n=3 → 6
// bước 3: acc=6,  n=4 → 10
```

Nó không chỉ dùng cho tính tổng — reduce có thể xây object, nhóm phần tử, hoặc làm phẳng:

```js
users.reduce((acc, u) => { acc[u.id] = u; return acc; }, {}); // lập chỉ mục theo id
```

## Tại sao nên ưu tiên chúng

Chúng **xâu chuỗi (chain)** gọn gàng và không thay đổi mảng gốc, điều này quan trọng trong các UI điều khiển bởi state. Chỉ dùng `forEach` cho các side effect (nó không trả về gì). Với các mảng khổng lồ mà bạn vốn sẽ phải chain nhiều lượt, một `reduce` duy nhất hoặc vòng lặp thuần có thể hiệu quả hơn.