ฟังก์ชันยุคเก่า vs ยุคใหม่
(Regular vs Arrow)

ก่อนที่เราจะไปเจาะลึกเรื่องวิธีเขียนโค้ด (Syntax) เราต้องมาทำความเข้าใจ "แก่นแท้" ของฟังก์ชันกันก่อน ลองจินตนาการว่าคุณเป็นผู้จัดการร้านอาหารที่ต้องสอนพนักงานใหม่ให้ทำ "ข้าวผัดกะเพรา"

ในโลกของการเขียนโปรแกรมก็เช่นเดียวกัน! ฟังก์ชัน (Function) คือการเอาคำสั่งหลายๆ บรรทัด มามัดรวมกันแล้วตั้งชื่อให้มัน เพื่อให้เราสามารถ "เรียกใช้ซ้ำ (Reuse)" ได้เรื่อยๆ โดยไม่ต้องพิมพ์คำสั่งยาวๆ เหล่านั้นใหม่ทุกครั้ง นี่คือหัวใจสำคัญที่ทำให้โปรแกรมของเราทำงานได้อย่างเป็นระบบและโค้ดไม่รกรุงรัง

การสร้างฟังก์ชันในยุคแรกเริ่มของ JavaScript (และยังคงใช้ได้ดีมาจนถึงปัจจุบัน) จะใช้คำสั่งที่ตรงไปตรงมามาก เรียกว่า Regular Function หรือฟังก์ชันแบบปกติ ซึ่งมีองค์ประกอบสำคัญ 4 ส่วนหลักๆ ที่คุณต้องจำให้ขึ้นใจ:

• คำสงวน (Keyword): ต้องเริ่มต้นด้วยคำว่า function เสมอ เพื่อให้คอมพิวเตอร์รู้ว่าเรากำลังจะสร้างฟังก์ชัน
• ชื่อฟังก์ชัน (Name): ตั้งชื่ออะไรก็ได้ แต่ควรสอดคล้องกับสิ่งที่มันทำ (มักจะขึ้นต้นด้วยคำกริยา เช่น calculate, getUser, createOrder)
• พารามิเตอร์ (Parameters): คือ () วงเล็บที่ต่อท้ายชื่อฟังก์ชัน เอาไว้สำหรับ "รับวัตถุดิบ" ที่จะส่งเข้ามาให้ฟังก์ชันประมวลผล
• ตัวเครื่องจักร (Body): คือ { ... } ปีกกาครอบคำสั่งการทำงานทั้งหมดเอาไว้ด้านใน

ลองดูตัวอย่างการเขียนจริงกัน:

ตัวอย่าง: ฟังก์ชันคิดราคาสินค้ารวม VAT
// เราตั้งชื่อฟังก์ชันว่า calculateTotal
// และเปิดวงเล็บ (price) เพื่อบอกว่า ฟังก์ชันนี้ต้องการ 'ราคาตั้งต้น' ส่งเข้ามานะ

function calculateTotal(price) {

  // ด้านในปีกกา คือขั้นตอนการประมวลผล
  let vat = price * 0.07;
  let total = price + vat;
  
  // คำสั่ง return คือการ "คายผลลัพธ์" ออกจากเครื่องจักร
  return total; 
}

// ----------------------------------------
// วิธีเรียกใช้งาน (Calling a function)
// ----------------------------------------

let myCoffee = calculateTotal(100); 
console.log(myCoffee); // ผลลัพธ์จะออกมาเป็น 107

ข้อดีของการเขียนแบบนี้คือ อ่านง่ายและชัดเจน แค่กวาดสายตาเห็นคำว่า function สีชมพูๆ เราก็รู้ได้ทันทีว่านี่คือสูตรอาหารบล็อกใหม่

ในยุคปัจจุบันที่โปรเจกต์มีขนาดใหญ่ขึ้นมหาศาล โปรแกรมเมอร์ต้องเขียนฟังก์ชันวันละเป็นร้อยๆ ตัว การต้องมานั่งพิมพ์คำว่า function ทุกครั้งมันทำให้โค้ดยืดยาวและกินพื้นที่หน้าจอมาก ในปี 2015 ภาษา JavaScript จึงได้เปิดตัวไวยากรณ์ (Syntax) การเขียนฟังก์ชันแบบใหม่ที่หน้าตาล้ำสมัยและสั้นลงมาก เรียกว่า Arrow Function

เรามาดูตัวอย่างการแปลงโค้ดจากหัวข้อที่แล้วกัน:

ตัวอย่าง: เปลี่ยนโฉม calculateTotal ให้เป็น Arrow
// 1. ประกาศตัวแปร const ชื่อ calculateTotal
// 2. ใส่ = (price) เพื่อบอกว่ารับค่า price
// 3. ยิงลูกศร => ทะลวงเข้าไปในปีกกา

const calculateTotal = (price) => {

  let vat = price * 0.07;
  let total = price + vat;
  return total; 
  
};

สังเกตไหม? ตัวเนื้อในฟังก์ชัน (Body) ไม่ได้เปลี่ยนไปเลยสักนิดเดียว เปลี่ยนแค่ "เปลือกนอก" เท่านั้นเอง!ในฐานะมือใหม่ คุณอาจจะรู้สึกว่า "เอ๊ะ... มันก็ยาวพอกันนี่นา แค่เปลี่ยนสลับที่ตัวอักษรเฉยๆ ไม่ใช่เหรอ?" มาดูข้อถัดไปกัน แล้วจะเข้าใจว่าทำไมโปรแกรมเมอร์ถึงคลั่งไคล้การเขียนแบบนี้!

สาเหตุที่แท้จริงที่ทำให้ Arrow Function ได้รับความนิยม ไม่ใช่แค่การเปลี่ยนเปลือกนอกให้ดูเท่ขึ้น แต่มันมี "พลังแฝง (Superpowers)" ที่ฟังก์ชันแบบเก่าทำไม่ได้ นั่นคือ "การย่อโค้ดแบบสุดขีด (Implicit Return)"

ถ้าคุณไปถามโปรแกรมเมอร์รุ่นเก๋าว่า "ทำไมคุณถึงรัก Arrow Function?" คำตอบที่คุณจะได้ยินบ่อยที่สุดคือ "เพราะมันแก้ปัญหาเรื่องคำว่า this"แม้ว่าเรื่องนี้จะค่อนข้างลึก แต่จะอธิบายให้ฟังแบบง่ายๆ เพื่อให้รู้ลึกถึงแก่นแท้เลย!