map, filter และ reduce ทำหน้าที่อะไร?

Question

Accepted Answer

ทั้งสามเป็น array iterator แบบ **immutable** — พวกมันคืนค่าใหม่ออกมาแทนที่จะแก้ไขค่าเดิม ซึ่งทำให้โค้ดสะอาดและเป็นแบบ declarative มากกว่าการเขียนลูป `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" ไปด้วย แต่ละขั้นจะคืนค่า 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 สามารถสร้างอ็อบเจกต์ จัดกลุ่มสมาชิก หรือ flatten ได้ด้วย:

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

## ทำไมจึงควรเลือกใช้พวกมัน

พวกมัน **เชื่อมต่อกัน (chain)** ได้อย่างสะอาดและไม่แก้ไขค่าเดิม ซึ่งสำคัญมากใน UI ที่ขับเคลื่อนด้วย state ใช้ `forEach` เฉพาะเมื่อต้องการผลข้างเคียง (side effect) เท่านั้น (มันไม่คืนค่าอะไรเลย) สำหรับอาร์เรย์ขนาดใหญ่มากที่ปกติคุณต้อง chain หลายรอบ การใช้ `reduce` รอบเดียวหรือลูปธรรมดาอาจมีประสิทธิภาพมากกว่า