[JavaScript] Arrow function expressions ใช้งานยังไง?

Arrow function expressions คือการเขียน function ในรูปแบบอย่างย่อ ทำให้สะดวกในการเขียนมากขึ้น web browser ยุคใหม่ก็ support กันหมดแล้ว แต่จะเห็นว่าใช้แพร่หลายคือกับ node.js หรือกับ JavaScript framework ตัวใหม่ ๆ ซึ่งส่วนมากจะใช้กับ closure function

แปลง function ปกติเป็น Arrow function

// function แบบปกติทั่วไป
function (a){
  return a + 100;
}

// แปลงเป็น Arrow Function

// 1. ลบ "function" และใส่ => เข้าไปแทนระหว่างวงเล็บของ argument และปักกาเปิด {
(a) => {
  return a + 100;
}

// 2. ลบปีกกาและคำว่า "return" ออก
(a) => a + 100;

// 3. ลบวงเล็บของ argument ออก
a => a + 100;

ถ้า argument มีหลายตัว

// Traditional Function
function (a, b){
  return a + b + 100;
}

// Arrow Function
(a, b) => a + b + 100; // เอาวงเล็บ argument ออกไม่ได้

ถ้า function ไม่มี argument

// Traditional Function (no arguments)
let a = 4;
let b = 2;
function (){ 
  return a + b + 100;
}

// Arrow Function (no arguments)
let a = 4;
let b = 2;
() => a + b + 100; //ใส่เป็นวงเล็บเปล่า ๆ

function ที่มีชื่อ

// Traditional Function
function bob (a){
  return a + 100;
}

// Arrow Function
let bob = a => a + 100; // ประกาศ function ใส่ตัวแปรไปเลย

Arrow function ที่ return object

ในจุดนี้จะเห็นว่างงกันเยอะมาก เพราะเดิม function มันก็มีปีกกาของมันอยู่แล้ว ถ้าจะ return แบบไม่ใส่คำว่า "return" ลงไปตัว compiler จะมองปีกกาของ object เป็นของ function แทน

params => {foo: "a"} // อันนี้ Error เพราะ compiler มองปีกกาเป็นของ function 
//และกลายเป็นเรา return foo: "a" ซึ่งไม่มีความหมายใน javascript

params => ({foo: "a"}) // ที่ถูกต้องคือครอบ object ด้วยวงเล็บ () อีกที

ตัวอย่างที่ใช้กับโค้ดจริง

setTimeout( () => { 
    alert('Hello World');
}, 300);

ข้อควรระวังในการใช้ this

เนื่องจากตัว arrow function จะไม่มี this เป็นของตัวเอง แต่จะดึงเอา this ของตัวแม่มา ขึ้นอยู่กับเราประกาศ arrow function นี้ไว้ที่ไหน ในบางครั้งเราจะเจอว่าทำไม this มันไม่ได้ค่าตามที่เราต้องการ

ส่วนตัวได้เจอเหตุการณ์นี้ตอนประกาศ arrow function ใช้ภายใต้ validation rule ของ vuelidate แล้วเรียกหา this ซึ่งหวังว่ามันจะไปดึงเอา data ของ Vue มาใช้เทียบ แต่กลับกัน this กลายเป็นของ vuelidate แทน ซึ่งในส่วนนี้จึงใช้ arrow function ไม่ได้

อ้างอิง:

ค้นหาบล็อกนี้

Kotenarok