วิธีประกาศ Arrow Function ใน JavaScript

Arrow Function (Fat Arrow Function) เป็นไวยากรณ์ ES6 สำหรับเขียนฟังก์ชันแบบกระชับ ใช้ => ลดการเขียนคำสำคัญ function ซ้ำๆ

ไวยากรณ์

// อาร์กิวเมนต์เดียว
param => expression

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

// Block body (หลายคำสั่ง ต้องมี return)
(param1, param2) => {
  const result = param1 + param2;
  return result;
}

เปรียบเทียบ

// Function แบบเก่า
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

var obj = {
  value: 10,
  regular: function() {
    setTimeout(function() {
      console.log(this.value); // undefined (this = window)
    }, 100);
  },
  arrow: function() {
    setTimeout(() => {
      console.log(this.value); // 10 (lexical this จาก obj)
    }, 100);
  }
};

ข้อจำกัด

• ไม่มี this ของตัวเอง (Lexical this)
• ไม่มี arguments object
• ไม่สามารถใช้ new ได้ (ไม่ใช่ Constructor)
• ไม่มี prototype
• ไม่ใช้ yield ได้

เมื่อไหร่ควร/ไม่ควรใช้