Arrow Function (ฟังก์ชันลูกศร) ใน JavaScript คืออะไร

Arrow Function (ES2015/ES6) หรือ "Fat Arrow Function" เป็นไวยากรณ์เขียนฟังก์ชันแบบกระชับ ใช้ => (fat arrow) แทนคำสำคัญ function ช่วยลดโค้ดและจัดการ this ได้ดีกว่า

ไวยากรณ์

// อาร์กิวเมนต์เดียว ไม่ต้องวงเล็บ
param => expression

// หลายอาร์กิวเมนต์ หรือไม่มีอาร์กิวเมนต์
(param1, param2) => expression
() => expression

// หลายคำสั่ง ใช้ block body และต้องมี return
(param1, param2) => {
  const sum = param1 + param2;
  return sum;
}

เปรียบเทียบ

// Function Expression แบบเก่า
var rank = [7, 8, 9];
var display = rank.map(function(num) {
  return num * num;
});

// Arrow Function
var rank = [7, 8, 9];
var display = rank.map(num => num * num);
// หรือ
var display = rank.map((num) => num * num);

ความแตกต่างสำคัญ: this Binding

// Function แบบเก่า - this ขึ้นกับวิธีการเรียก
var obj = {
  value: 10,
  regularFunc: function() {
    setTimeout(function() {
      console.log(this.value); // undefined (this = window/global)
    }, 100);
  },
  arrowFunc: function() {
    setTimeout(() => {
      console.log(this.value); // 10 (this มาจาก lexical scope)
    }, 100);
  }
};

ข้อจำกัดของ Arrow Function

• ไม่มี this ของตัวเอง (lexical this)
• ไม่มี arguments object
• ไม่สามารถใช้เป็น Constructor ได้ (new ArrowFunc() จะ error)
• ไม่มี prototype property
• ไม่สามารถใช้ yield ได้ (ไม่ใช่ generator)

เมื่อไหร่ควรใช้: Callback, map/filter/reduce, method สั้นๆ | ไม่ควรใช้: Method ของออบเจ็กต์ที่ต้องการ this, Constructor, Event handler ที่ต้อง this ชี้ไปที่ element