การใช้ map , filter ,reduce javascreipt

 map, filter, และ reduce เป็นเมธอดจัดการ Array ใน JavaScript ที่ช่วยแปลงข้อมูล คัดกรอง หรือสรุปผล โดยไม่ต้องใช้ for loop ให้ยุ่งยาก:

• map(): สร้าง Array ใหม่จากการแปลงสมาชิกทุกตัว
• filter(): สร้าง Array ใหม่เฉพาะสมาชิกที่ผ่านเงื่อนไข
• reduce(): สรุปค่าสมาชิกทั้งหมดให้เหลือค่าเดียว (เช่น ผลรวม) 

---

1. map() - แปลงข้อมูล

ใช้เมื่อต้องการแปลงข้อมูลสมาชิกทุกตัวใน Array และได้ Array ใหม่กลับมาที่มีจำนวนเท่าเดิม

javascript

const numbers = [1, 2, 3, 4];
// ยกกำลังสองทุกตัว
const squared = numbers.map(num => num * num); // [1, 4, 9, 16]

2. filter() - กรองข้อมูล

ใช้เมื่อต้องการคัดเลือกข้อมูลสมาชิกที่ผ่านเงื่อนไขที่กำหนดไว้

javascript

const numbers = [1, 2, 3, 4, 5, 6];
// เอาเฉพาะเลขคู่
const evens = numbers.filter(num => num % 2 === 0); // [2, 4, 6]

3. reduce() - สรุปข้อมูล

ใช้เมื่อต้องการนำสมาชิกทุกตัวมาคำนวณรวมกัน หรือแปลงให้เป็นค่าเดียว (ตัวเลข, ออบเจกต์, อาเรย์ใหม่) 

javascript

const numbers = [1, 2, 3, 4];
// หาผลรวม
const sum = numbers.reduce((total, current) => total + current, 0); // 10

---

ตารางสรุปการใช้งาน

Method	หน้าที่	ผลลัพธ์	ความยาว Array ใหม่
map	แปลงสมาชิก	Array ใหม่	เท่าเดิม
filter	คัดกรองสมาชิก	Array ใหม่	น้อยกว่าหรือเท่ากับเดิม
reduce	สรุปข้อมูล	ค่าเดี่ยว (Value/Object)	-

---

การใช้งานร่วมกัน (Chaining)

เราสามารถนำมาต่อกัน (Chain) เพื่อประมวลผลที่ซับซ้อนได้ง่ายขึ้น

javascript

const products = [
    { name: 'A', price: 100 },
    { name: 'B', price: 50 },
    { name: 'C', price: 200 }
];

// 1. กรองสินค้าราคา > 60
// 2. เอาราคามาหาผลรวม
const expensiveTotal = products
    .filter(p => p.price > 60)
    .map(p => p.price)
    .reduce((sum, price) => sum + price, 0); // 300