Functional Programming Mastery: จิตวิญญาณเบื้องหลัง React

🛑 1. The Problem First: โลกที่ "ใครแก้ข้อมูลฉัน?" (Unpredictable State)

ลองดูโค้ดแบบ Imperative (สั่งคอมทำงานทีละขั้น) ที่จูเนียร์มักจะใช้:

// ❌ Naive Approach: แก้ไขข้อมูลต้นฉบับโดยตรง (Mutation)
let user = { name: "Joe", age: 25 };

function updateAge(person) {
  person.age = 26; // 🌋 พัง! ข้อมูลเดิมหายไปแล้ว
}

updateAge(user);
console.log(user.age); // 26

ปัญหา: ถ้าคุณส่ง user นี้ไปให้ 10 ฟังก์ชัน แล้ววันหนึ่งค่า age เปลี่ยนเป็นเลขประหลาด คุณจะไม่มีวันรู้เลยว่า "ฟังก์ชันไหนเป็นคนทำ?" การแก้ข้อมูลสดๆ (Mutation) คือต้นเหตุของบั๊กที่หาตัวจับยากที่สุดในโลก Software ครับ

💡 2. Real-Life Analogy: การถ่ายเอกสาร vs การลบกระดาษใบเดิม

• Imperative/Mutation: เหมือนคุณมี "กระดาษแผ่นเดียว" ใครอยากแก้อะไรก็เอายางลบมาลบแล้วเขียนทับ สุดท้ายกระดาษนั้นจะเละและคุณจะจำไม่ได้ว่าตอนแรกเขียนว่าอะไร
• Functional/Immutability: เหมือนคุณมี "เครื่องถ่ายเอกสาร". ถ้าเจ้านายอยากให้แก้ชื่อในเอกสาร คุณจะไม่ลบใบเดิม แต่คุณจะ "ถ่ายเอกสารใบใหม่" แล้วแก้เฉพาะชื่อในชุดใหม่นั้นส่งคืนไป ชุดเก่าจะยังอยู่บนโต๊ะปลอดภัย 100% คุณย้อนกลับไปดูเมื่อไหร่ก็ได้ (Time Travel Debugging)

🚀 3. Execution Journey: กฎของ Pure Function

หัวใจของ FP คือพยายามทำทุกอย่างให้เป็น Pure Function (ฟังก์ชันที่ซื่อสัตย์)

🛠 Step-by-step:

1. Input: รับข้อมูลเข้ามา (ห้ามไปแอบดูข้างนอก ห้ามดูเวลา ห้ามดู Global)
2. Process: คำนวณตาม Logic ภายใน (ห้ามยิง API ห้ามแก้ DOM)
3. Output: ส่งค่าใหม่กลับไป (Input เดิม -> Output ต้องเหมือนเดิม 100%)

// ✅ Best Practice: ใช้ Spread Operator เพื่อสร้างข้อมูลชุดใหม่ (Immutability)
const updateAgePro = (person) => ({
  ...person, // 🛠 ทำสำเนาข้อมูลเดิมมาทั้งหมด
  age: 26, // 🛠 ทับค่าเฉพาะจุดที่ต้องการ
});

🪤 4. The Junior Trap: โรค "แอบทำ Side Effect"

จูเนียร์มักจะเขียนฟังก์ชันที่ดูเหมือนจะ Pure แต่ดันแอบไปแตะต้องโลกภายนอก:

// ❌ Junior Trap: ฟังก์ชันที่ไม่ Pure (Impure)
function addToCart(item) {
  cart.push(item); // 🌋 แอบไปแก้ตัวแปร 'cart' ที่อยู่ข้างนอกฟังก์ชัน!
  displayToast("เพิ่มแล้ว!"); // 🌋 แอบไปสั่ง DOM ให้ทำงาน
}

ระวัง: เมื่อฟังก์ชันของคุณแอบไปทำเรื่องข้างนอก (Side Effect) มันจะทำให้การทำ Unit Test ยากมหาศาล เพราะคุณต้องจำลอง (Mock) โลกทั้งใบเพื่อให้ฟังก์ชันเดียวทำงานได้ ✅ การแก้ไข: แยก Logic (Pure) ออกจาก Action (Side Effect) เสมอ (ใน React คือการแยก UI ออกจาก useEffect)

⚖️ 5. The Why Matrix: ท่าไหนปลอดภัยกว่ากัน?

🎓 6. Senior Mindset Summary

การเป็น Senior คือการเลิกสั่งคอมว่า "จงทำ 1-2-3" แต่เปลี่ยนเป็นการบอกว่า "ข้อมูล A มีความสัมพันธ์กับข้อมูล B อย่างไร". การเคารพกฎ Immutability ไม่ใช่แค่เรื่อง Syntax แต่คือการสร้างระบบที่คุ้มค่าแก่การเชื่อใจครับ!