Arrow Function ใน JavaScript

 

📌 แอโร่ฟังก์ชัน (Arrow Function) ใน JavaScript คืออะไร?

ในโลกของ JavaScript ที่พัฒนาอย่างรวดเร็ว การเขียนฟังก์ชันให้กระชับและเข้าใจง่ายจึงเป็นเรื่องสำคัญ "แอโร่ฟังก์ชัน" หรือ Arrow Function ถูกเพิ่มเข้ามาใน ES6 (ปี 2015) เพื่อช่วยให้เราเขียนโค้ดได้สั้นลง โดยใช้สัญลักษณ์ => แทนคำว่า function แบบเดิม

---

✅ รูปแบบการเขียน

js
// แบบดั้งเดิม
function sayHello(name) {
  return "Hello " + name;
}

// แบบแอโร่ฟังก์ชัน
const sayHello = (name) => "Hello " + name;

หากมีพารามิเตอร์เดียว สามารถละวงเล็บได้:

js
const greet = name => "Hi " + name;

ถ้าไม่มีพารามิเตอร์เลย:

js
const sayHi = () => "Hi there!";

---

🧠 ตัวอย่างการใช้งาน

1. พารามิเตอร์หลายตัว

js
const add = (a, b) => a + b;

2. โค้ดหลายบรรทัด (ต้องใช้ {} และ return)

js
const multiply = (a, b) => {
  const result = a * b;
  return result;
};

---

⚠️ จุดสำคัญเกี่ยวกับ this

แอโร่ฟังก์ชัน ไม่มี this ของตัวเอง มันจะใช้ this จากบริบทภายนอก (lexical this) ซึ่งแตกต่างจากฟังก์ชันแบบเดิม

❌ ฟังก์ชันปกติที่ใช้ this แล้วเกิดปัญหา

js
function Person() {
  this.age = 0;

  setInterval(function() {
    this.age++; // this = undefined หรือ window
  }, 1000);
}

✅ ใช้ Arrow Function แก้ปัญหา this

js
function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // this = object Person
  }, 1000);
}

---

📋 เปรียบเทียบฟังก์ชันปกติกับแอโร่ฟังก์ชัน

ประเด็น	ฟังก์ชันแบบเดิม	แอโร่ฟังก์ชัน
Syntax	ยาวกว่า	กระชับ อ่านง่าย
this	มีของตัวเอง	ยึดจากบริบทภายนอก
เหมาะกับ	งานที่ต้องใช้ this	ฟังก์ชันสั้น ๆ

---

✅ สรุป

• แอโร่ฟังก์ชันช่วยให้โค้ดสั้นและสะอาดขึ้น
• เหมาะสำหรับฟังก์ชันที่ไม่ต้องอ้างอิง this
• ไม่ควรใช้ในกรณีที่ต้องสร้างเมธอดของ object หรือใช้เป็น constructor