JavaScript arrow functions เป็นวิธีประกาศฟังก์ชัน Arrow functions ใช้เขียน JavaScript functions ได้มีประสิทธิภาพมากขึ้น และ syntax สั้นกระชับ Arrow function syntax รองรับ implicit returns สำหรับ single expressions
ฟังก์ชันคือบล็อกโค้ดที่ดำเนินการเฉพาะเจาะจงและ/หรือคืนค่า โปรแกรมเมอร์ใช้ฟังก์ชันสร้างโค้ดที่นำกลับมาใช้ซ้ำได้ หลายครั้ง ช่วยลดบรรทัดโค้ด ทำให้โปรแกรมมีประสิทธิภาพมากขึ้น
โดยปกติ JavaScript มีวิธีเดียวประกาศฟังก์ชัน: ใช้ function keyword แต่ตั้งแต่ ES6 JavaScript รองรับ arrow functions ที่ใช้กำหนดฟังก์ชันได้มีประสิทธิภาพมากขึ้น
ในคู่มือนี้ เราจะสำรวจ basics ของ functions ใน JavaScript และอภิปรายว่า JavaScript arrow function ใช้ได้อย่างไร เราจะอภิปรายว่าอาจจะใช้ arrow function ที่ไหน และสำรวจตัวอย่างเพื่อแสดงการใช้งานจริง
JavaScript Function Refresher
วิธีทั่วไปที่สุดในการประกาศฟังก์ชันใน JavaScript คือใช้ regular function keyword function keyword อนุญาตให้นักเขียนโค้ดประกาศฟังก์ชันที่อ้างอิงได้ทั่วโค้ด
Syntax สำหรับ JavaScript function:
function nameOfTheFunction() { // Code }
ฟังก์ชันของเรามีหลายส่วน แรก ใช้ function keyword บอกโปรแกรมว่าจะประกาศฟังก์ชัน ต่อมา ระบุชื่อฟังก์ชัน ในตัวอย่างคือ nameOfTheFunction สำคัญคือ function names ใช้กฎเดียวกับ variables เขียนเป็น camel case
ฟังก์ชันตามด้วย brackets ที่ optionally ใช้ parse parameters โค้ดอยู่ใน curly brackets ({})
มาตัวอย่างแสดงการทำงานของฟังก์ชันใน JavaScript โค้ดต่อไปสร้างฟังก์ชัน wakeUpRoutine พิมพ์ข้อความตอนเช้าไปที่ console:
function wakeUpRoutine() { console.log("Good morning! Today is a great day."); }
ตอนรันโปรแกรม ไม่เกิดอะไร เพราะฟังก์ชันประกาศแล้วแต่ยังไม่ได้ call ถ้าอยากรันฟังก์ชัน เรียกด้วยชื่อฟังก์ชัน:
wakeUpRoutine();
โปรแกรมคืนค่า:
Good morning! Today is a great day.
เราใช้ฟังก์ชันได้หลายครั้งในโปรแกรมโดยเรียกที่ต้องการให้ execute
JavaScript functions รับ parameters ได้ Parameters คือ input ที่ส่งเข้าฟังก์ชัน ทำหน้าที่เป็น local variables ภายในฟังก์ชัน สมมติเราอยากให้ wake up message รวมชื่อ ใช้โค้ดนี้:
function wakeUpRoutine(name) { console.log(`Good morning, ${name}! Today is a great day.`); }
ในโค้ดเราไม่ได้ define name parameter เพราะเราจะ assign ค่าเวลาเรียกฟังก์ชัน สมมติชื่อคือ Peter ให้ข้อความปรากฏชื่อ ใช้โค้ด:
wakeUpRoutine("Peter");
โปรแกรมคืนค่า:
Good morning, Peter! Today is a great day.
ค่าของ name parameter ส่งเข้า wakeUpRoutine function ซึ่งคือ Peter เราใช้ name variable ในฟังก์ชันอ้างอิงชื่อที่โปรแกรมระบุ
JavaScript Arrow Function
JavaScript arrow functions บางครั้งเรียกว่า fat arrow functions เป็นหนึ่งในฟีเจอร์ยอดนิยมที่มาพร้อม ES6 Function expressions เหล่านี้ใช้เขียนฟังก์ชันได้มีประสิทธิภาพมากขึ้น และ syntax สั้นกระชับ
Syntax สำหรับ JavaScript arrow function:
functionName = (parameters) => { // Code }
ใช้ตัวอย่าง wake up routine แสดง arrow functions ในโค้ดก่อนหน้า เราต้องใช้ "function" keyword แต่ด้วย arrow function เราใช้ syntax => แทน ตัวอย่าง wake up routine function เขียนเป็น arrow function:
wakeUpRoutine = (name) => { console.log(`Good morning, ${name}! Today is a great day.`); }
เพื่อเรียกฟังก์ชัน ใช้ syntax เหมือน traditional function:
wakeUpRoutine("Sophia")
ฟังก์ชันคืนค่า:
Good morning, Sophia! Today is a great day.
โครงสร้าง arrow functions คล้าย traditional function ความต่างคือ ไม่ใช้ function keyword ใน arrow function และใช้ => arrow แทน
นอกจากนี้ สังเกตว่าเราไม่ต้องใช้ return keyword ใน arrow function ทำให้โค้ดสั้นกระชับขึ้น
Implicit Returns
Arrow functions มีประโยชน์มากถ้า function body เป็น single expression ถ้า function body เป็น single expression คุณลบ curly brackets ได้ และสร้าง implicit return เพื่อลดความซับซ้อนของฟังก์ชัน ต่างจาก traditional function ที่จำนวนบรรทัดในฟังก์ชันไม่ส่งผลต่อการกำหนดฟังก์ชัน
ตัวอย่าง one-line arrow function:
const multiplyNumbers = (a, b) => a * b; multiplyNumbers(2, 2);
โค้ดคืนค่า: 4 เห็นว่า arrow function คูณเลขสองตัว
Implicit return syntax มักใช้ตอน return values เช่นด้านบน แต่ใช้ได้กับโค้ดที่ execute แต่ไม่คืนค่า ดังนั้นถ้าอยาก用 implicit syntax recreate wake up routine function ใช้โค้ดนี้:
const wakeUpRoutine = name => console.log(`Good morning, ${name}! Today is a great day.`); wakeUpRoutine("Ava");
โค้ดคืนค่า:
Good morning, Ava! Today is a great day.
ลบ Parentheses
JavaScript arrow functions ต้องการ parenthesis รอบ parameters เฉพาะตอนไม่มี parameters หรือมากกว่าหนึ่ง ดังนั้นถ้า arrow function มี parameter เดียว คุณลบ parentheses ได้แบบนี้:
wakeUpRoutine = name => { console.log(`Good morning, ${name}! Today is a great day.`); }
เห็นว่า name parameter ไม่ได้ล้อมด้วย parentheses แล้ว
Arrow Functions กับ Map, Filter, และ Reduce
Arrow functions ใช้ทั่วไปกับ map, filter, และ reduce JavaScript array methods เพราะ arrow functions อนุญาตให้ transform array ในบรรทัดเดียว
สมมติเรามี array ของเกรดนักเรียน อยากเพิ่ม 1 ให้ทุกเกรดเพราะมี error ในข้อสอบครั้งล่าสุด ทำให้นักเรียนตอบคำถามบางข้อไม่ได้ ไม่มีใครได้คะแนนเต็ม 30 ตัวอย่าง arrow function ที่ใช้แก้คะแนน:
const grades = [25, 26, 22, 28]; const fixStudentGrades = grades.map( score => score + 1 ); console.log(fixStudentGrades);
โค้ดคืนค่า:
[26, 27, 23, 29]
เห็นว่าโค้ดเพิ่ม 1 ให้ทุกเกรดใน grades array
สรุป
Arrow functions เป็นฟีเจอร์ที่มาพร้อม ES6 JavaScript ใช้เขียนโค้ดได้มีประสิทธิภาพและสั้นกระชับขึ้น Arrow functions อนุญาตให้ใช้ => arrow แทน function statement และช่วยเขียน one-line functions ในบางกรณี
ในบทช่วยสอนนี้ เราสำรวจ basics ของฟังก์ชันใน JavaScript แล้วอภิปรายวิธีเขียน arrow functions นอกจากนี้ เรายังสำรวจ implicit returns, การลบ parentheses, และการใช้ arrow functions กับ map, filter, และ reduce functions
ตอนนี้คุณพร้อมเขียน arrow function แบบมืออาชีพแล้ว!
