Helper Function
ผู้ช่วยตัวเก่งประจำแอป

สมมติว่าคุณกำลังทำเว็บขายของออนไลน์ (E-Commerce) ที่ใหญ่มากๆ เว็บหนึ่ง ในเว็บนี้มีการแสดง "ราคาสินค้า" อยู่ในหลายๆ หน้าเต็มไปหมด เช่น:

• หน้าแรก (แสดงสินค้าแนะนำ)
• หน้ารายละเอียดสินค้า (ตอนกดเข้าไปดูรูปใหญ่ๆ)
• หน้าตะกร้าสินค้า (ตอนสรุปยอดว่าต้องจ่ายกี่บาท)
• หน้าชำระเงิน (ตัดบัตรเครดิต)
• หน้าบิลใบเสร็จ (หลังจากจ่ายเงินเสร็จแล้ว)

ในทางเขียนโปรแกรม ข้อมูลที่หลังบ้าน (Database/Server) ส่งมาให้เราเพื่อแสดงผลนั้น มักจะเป็น ตัวเลขดิบๆ (Raw Number) เสมอ เช่น เซิร์ฟเวอร์ส่งมาว่า 2500000 (สองล้านห้าแสน)

แต่ในฐานะคนทำหน้าเว็บ (Frontend) เราคงไม่อยากเอาเลข 2500000 ไปแสดงให้ลูกค้าดูโดยตรงใช่ไหม? ลูกค้าคงตาลายและนับศูนย์กันเหนื่อยแน่ๆ สิ่งที่เราต้องทำคือ "การจัดรูปแบบ (Formatting)" ให้มันกลายเป็น ฿2,500,000.00 เพื่อให้อ่านง่ายและดูเป็นมืออาชีพ

เพื่อแก้ปัญหาฝันร้ายด้านบน โปรแกรมเมอร์มืออาชีพจึงคิดค้นสิ่งที่เรียกว่า Helper Function (บางคนเรียก Utility Function) ขึ้นมา

มันคืออะไร? อธิบายง่ายๆ Helper Function เปรียบเสมือน "เครื่องจักรแปรรูปส่วนกลาง" ที่เราสร้างเอาไว้ในโรงงาน (โปรเจกต์) ของเรา โดยเครื่องจักรนี้มีหน้าที่รับวัตถุดิบดิบๆ (Raw Data) เข้ามาในสายพาน ทำการหั่น สับ ปรุงรส (คำนวณ/ปรับรูปแบบ) และคายผลผลิตที่พร้อมเสิร์ฟ (Formatted Data) ออกมาทางปลายสายพาน

แทนที่เราจะสอนให้พนักงานทุกคนในโรงงานทำอาหารจานนี้เป็น เราก็แค่สร้างเครื่องจักรขึ้นมา 1 เครื่อง แล้วให้ทุกคนเอาวัตถุดิบมาหย่อนใส่เครื่องนี้แทน! ถ้าวันนึงเราอยากเปลี่ยนรสชาติอาหาร เราก็แค่เดินมาตั้งค่าที่เครื่องจักรนี้เครื่องเดียว จบเลย!

การเขียน Helper Function ที่ดี จะต้องเขียนในรูปแบบที่เรียกว่า "Pure Function (ฟังก์ชันบริสุทธิ์)"ความหมายคือ มันจะต้องไม่ไปยุ่งเกี่ยวกับข้อมูลข้างนอก ไม่ไปดึงข้อมูลจาก Database หรือ API ใดๆ หน้าที่ของมันมีแค่อย่างเดียวคือ: "รับวัตถุดิบเข้ามา (Input) -> แปลงร่าง -> ส่งผลลัพธ์กลับไป (Return Output)"

ขั้นตอนที่ 1: การสร้างเครื่องจักร (ในโฟลเดอร์ src/utils)

src/utils/formatters.ts
// เราใช้คำว่า 'export' นำหน้า เพื่อบอกว่า "อนุญาตให้ไฟล์อื่นดึงเครื่องจักรตัวนี้ไปใช้ได้นะ!"
export const formatCurrency = (amount) => {

  // กฎเหล็ก: ต้องเช็คก่อนว่าวัตถุดิบที่ส่งมามันใช่ 'ตัวเลข' จริงๆ ไหม?
  // ถ้าพนักงานเผลอส่งตัวหนังสือมา (isNaN = Is Not a Number) เราก็แค่ตีกลับไป ไม่ต้องทำงานต่อ
  if (isNaN(amount)) {
    return amount; 
  }

  // ถ้าเป็นตัวเลขถูกต้อง ก็ใช้คำสั่งของ JavaScript เพื่อแปรรูปเป็นเงินบาท 
  // (มีลูกน้ำ และมีหน่วย THB ตามหลัง)
  return new Intl.NumberFormat("th-TH", { 
    style: "currency", 
    currency: "THB" 
  }).format(amount);
  
};

ขั้นตอนที่ 2: การเรียกใช้เครื่องจักร (ในหน้าจอ UI ของเรา)

สมมติว่าคุณกำลังทำ Component "การ์ดแสดงสินค้า" สิ่งที่คุณต้องทำก็แค่ นำเข้า (Import) เครื่องจักรตัวนั้นมา แล้วโยนตัวเลขดิบๆ ลงไปในวงเล็บของมัน

src/components/ProductCard.tsx
// 1. นำเข้าเครื่องจักรมาจากโฟลเดอร์ utils
import { formatCurrency } from "@/utils/formatters";

export default function ProductCard({ name, price }) {
  // สมมติว่า Props 'price' ที่ส่งมาคือเลขดิบ 2500000

  return (
    <div className="card">
      <h2>{name}</h2>
      
      {/* 2. โยนเลข 2500000 เข้าไปในเครื่องจักร formatCurrency() */}
      {/* หน้าจอจะแสดงผลออกมาเป็น: "ราคา: THB 2,500,000.00" อย่างสวยงาม! */}
      <p className="text-xl font-bold text-green-600">
        ราคา: {formatCurrency(price)}
      </p>
      
    </div>
  );
}