ฟังก์ชันลูกศร JavaScript:คำแนะนำทีละขั้นตอน

ฟังก์ชันลูกศร JavaScript เป็นวิธีการประกาศฟังก์ชัน สามารถใช้ฟังก์ชันลูกศรเพื่อเขียนฟังก์ชัน JavaScript ได้อย่างมีประสิทธิภาพและใช้ไวยากรณ์ที่รัดกุมยิ่งขึ้น ไวยากรณ์ของฟังก์ชัน Arrow รองรับการส่งคืนโดยนัยสำหรับนิพจน์เดี่ยว

ฟังก์ชันคือบล็อกของโค้ดที่ดำเนินการบางอย่างและ/หรือส่งกลับค่า โปรแกรมเมอร์ใช้ฟังก์ชันต่างๆ เพื่อสร้างโค้ดที่สามารถนำมาใช้ซ้ำได้หลายครั้ง ซึ่งช่วยลดจำนวนบรรทัดในโปรแกรม ทำให้มีประสิทธิภาพมากขึ้น

ตามเนื้อผ้า JavaScript เสนอวิธีหนึ่งในการประกาศฟังก์ชัน:โดยใช้ function คำสำคัญ. อย่างไรก็ตาม เนื่องจาก ES6 JavaScript รองรับ arrow functions ซึ่งสามารถใช้เพื่อกำหนดฟังก์ชันได้อย่างมีประสิทธิภาพมากขึ้น

ในคู่มือนี้ เราจะมาสำรวจพื้นฐานของฟังก์ชันใน JavaScript และอภิปรายถึงวิธีการใช้ฟังก์ชันลูกศร JavaScript เรายังจะหารือกันถึงตำแหน่งที่คุณอาจต้องการใช้ฟังก์ชันลูกศร และสำรวจตัวอย่างบางส่วนเพื่อสาธิตวิธีการใช้ฟังก์ชันลูกศรในทางปฏิบัติ

ทบทวนฟังก์ชัน JavaScript

วิธีที่ใช้บ่อยที่สุดในการประกาศฟังก์ชันใน JavaScript คือการใช้ function ปกติ คำสำคัญ. function คีย์เวิร์ดช่วยให้ผู้เขียนโค้ดประกาศฟังก์ชันที่อ้างอิงได้ตลอดทั้งโค้ด

นี่คือไวยากรณ์สำหรับฟังก์ชัน JavaScript:

function nameOfTheFunction() {
   // Code
  }

หน้าที่ของเราประกอบด้วยหลายส่วน ประการแรก เราใช้ function คีย์เวิร์ดเพื่อบอกโปรแกรมของเราว่าเราจะประกาศฟังก์ชัน จากนั้น เราระบุชื่อฟังก์ชันของเรา ซึ่งในตัวอย่างข้างต้นคือ nameOfTheFunction . สิ่งสำคัญคือต้องสังเกตว่าชื่อฟังก์ชันใช้กฎเดียวกันกับตัวแปร ดังนั้นมันจึงถูกเขียนในกรณีอูฐ

จากนั้น ฟังก์ชันของเราจะตามด้วยชุดของวงเล็บ ซึ่งสามารถเลือกใช้เพื่อแยกวิเคราะห์พารามิเตอร์ได้ จากนั้น รหัสของเราอยู่ในชุดวงเล็บปีกกา ({} )

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ลองใช้ตัวอย่างเพื่อแสดงให้เห็นว่าฟังก์ชันทำงานอย่างไรใน JavaScript รหัสต่อไปนี้สร้างฟังก์ชันที่เรียกว่า wakeUpRoutine ซึ่งพิมพ์ข้อความตอนเช้าไปที่คอนโซล:

function wakeUpRoutine() {
   console.log("Good morning! Today is a great day.");
  }

ตอนนี้ถ้าเรารันโปรแกรมจะไม่มีอะไรเกิดขึ้น นี่เป็นเพราะว่าฟังก์ชันของเราได้รับการประกาศแล้ว แต่เรายังไม่ได้เรียกใช้ฟังก์ชันนี้ หากเราต้องการเรียกใช้ฟังก์ชันของเรา เราสามารถเรียกมันได้โดยการเขียนชื่อฟังก์ชัน:

wakeUpRoutine();

โปรแกรมของเรากลับมา:

Good morning! Today is a great day.

เราสามารถใช้ฟังก์ชันของเราได้บ่อยเท่าที่ต้องการตลอดทั้งโปรแกรม โดยการเรียกฟังก์ชันนี้ในจุดที่เราต้องการให้ดำเนินการ

ฟังก์ชัน JavaScript สามารถรับพารามิเตอร์ได้เช่นกัน พารามิเตอร์คืออินพุตที่ส่งผ่านไปยังฟังก์ชันและทำหน้าที่เป็นตัวแปรภายในฟังก์ชัน สมมติว่าเราต้องการให้ข้อความปลุกรวมชื่อของเราด้วย เราสามารถใช้รหัสต่อไปนี้เพื่อรวมชื่อของเราในข้อความปลุก:

function wakeUpRoutine(name) {
   console.log(`Good morning, ${name}! Today is a great day.`);
}

ในโค้ดของเรา เรายังไม่ได้กำหนด name . ของเรา พารามิเตอร์. นั่นเป็นเพราะเรากำหนดค่าเมื่อเราเรียกใช้ฟังก์ชันของเรา สมมุติว่าเราชื่อ Peter . เพื่อให้ข้อความของเราปรากฏพร้อมกับชื่อของเรา เราจะใช้รหัสต่อไปนี้:

wakeUpRoutine("Peter");

โปรแกรมของเรากลับมา:

Good morning, Peter! Today is a great day.

ค่าของ name . ของเรา พารามิเตอร์จะถูกส่งไปยังฟังก์ชัน wakeUpRoutine ซึ่งในกรณีนี้คือ Peter . จากนั้นเราก็ใช้ name ตัวแปรในฟังก์ชันของเราเพื่ออ้างอิงชื่อที่โปรแกรมของเรากำหนดไว้

ฟังก์ชันลูกศร JavaScript

ฟังก์ชันลูกศร JavaScript บางครั้งเรียกว่า fat arrow ฟังก์ชัน เป็นหนึ่งในคุณสมบัติยอดนิยมที่นำมาใช้ใน ES6 สามารถใช้นิพจน์ฟังก์ชันเหล่านี้เพื่อเขียนฟังก์ชันได้อย่างมีประสิทธิภาพและใช้ไวยากรณ์ที่กระชับยิ่งขึ้น

ไวยากรณ์สำหรับฟังก์ชันลูกศร JavaScript มีดังต่อไปนี้:

functionName = (parameters) => {
   // Code
  }

ลองใช้ตัวอย่างกิจวัตรการปลุกเพื่อแสดงให้เห็นว่าลูกศร JavaScript ทำงานอย่างไร ในโค้ดด้านบนนี้ เราต้องใช้คีย์เวิร์ด "ฟังก์ชัน" อย่างไรก็ตาม ด้วยฟังก์ชันลูกศร เราใช้ => ไวยากรณ์แทน ต่อไปนี้คือตัวอย่างฟังก์ชัน Wake up Routine ของเราที่เขียนเป็นฟังก์ชันลูกศร:

wakeUpRoutine = (name) => {
   console.log(`Good morning, ${name}! Today is a great day.`);
  }

ในการเรียกฟังก์ชันของเรา เราใช้ไวยากรณ์เดียวกันกับที่เราเรียกกับฟังก์ชันดั้งเดิม:

wakeUpRoutine("Sophia")

ฟังก์ชันของเราส่งคืน:

Good morning, Sophia! Today is a great day.

โครงสร้างสำหรับฟังก์ชันลูกศรคล้ายกับฟังก์ชันดั้งเดิมมาก ข้อแตกต่างเพียงอย่างเดียวคือเราไม่ใช้ function คีย์เวิร์ดในฟังก์ชันลูกศร และเราใช้ => . แทน ลูกศร

นอกจากนี้ โปรดทราบว่าเราไม่จำเป็นต้องใช้ return คีย์เวิร์ดในฟังก์ชันลูกศร ซึ่งทำให้โค้ดของเรากระชับยิ่งขึ้น

ผลตอบแทนโดยนัย

ฟังก์ชันลูกศรมีประโยชน์อย่างยิ่งหากเนื้อหาของฟังก์ชันเป็นนิพจน์เดียว หากเนื้อความของฟังก์ชันเป็นนิพจน์เดียว คุณสามารถลบวงเล็บปีกกาและสร้างการส่งคืนโดยปริยายเพื่อทำให้ฟังก์ชันของคุณง่ายขึ้น ซึ่งแตกต่างจากฟังก์ชันดั้งเดิมที่จำนวนบรรทัดที่ใช้ในฟังก์ชันของคุณไม่ส่งผลต่อการกำหนดฟังก์ชัน

ต่อไปนี้คือตัวอย่างฟังก์ชันลูกศรหนึ่งบรรทัด:

const multiplyNumbers = (a, b) => a * b;
multiplyNumbers(2, 2);

รหัสของเราส่งคืน:4 . อย่างที่คุณเห็น ฟังก์ชันลูกศรได้คูณตัวเลขสองตัวของเรา

โดยปกติแล้ว ไวยากรณ์การส่งคืนโดยปริยายมักใช้หากคุณกำลังส่งคืนค่า เช่นเดียวกับที่เราทำข้างต้น อย่างไรก็ตาม คุณยังสามารถใช้ไวยากรณ์เพื่อรันโค้ดที่จะไม่คืนค่าใดๆ ดังนั้น หากคุณต้องการใช้ไวยากรณ์โดยนัยเพื่อสร้างฟังก์ชันการทำงานประจำที่ตื่นขึ้นใหม่ คุณสามารถใช้รหัสนี้:

const wakeUpRoutine = name => console.log(`Good morning, ${name}! Today is a great day.`);
wakeUpRoutine("Ava");

รหัสของเราส่งคืนดังต่อไปนี้:

Good morning, Ava! Today is a great day.

การลบวงเล็บ

ฟังก์ชันลูกศร JavaScript ต้องการวงเล็บรอบพารามิเตอร์เท่านั้น หากไม่มีพารามิเตอร์หรือมากกว่าหนึ่งพารามิเตอร์ ดังนั้น หากฟังก์ชันลูกศรของคุณมีพารามิเตอร์เพียงตัวเดียว คุณสามารถลบวงเล็บดังนี้:

wakeUpRoutine = name => {
   console.log(`Good morning, ${name}! Today is a great day.`);
}

อย่างที่คุณเห็น name .ของเรา พารามิเตอร์จะไม่ถูกล้อมรอบด้วยวงเล็บอีกต่อไป

ฟังก์ชันลูกศรพร้อมแผนที่ ตัวกรอง และลดขนาด

ฟังก์ชันลูกศรมักใช้กับแผนที่ กรอง และย่อวิธีอาร์เรย์ JavaScript เนื่องจากฟังก์ชันลูกศรช่วยให้คุณแปลงอาร์เรย์ในบรรทัดเดียวได้

สมมติว่าเรามีเกรดนักเรียนหลายระดับ เราต้องการเพิ่ม 1 ของนักเรียนแต่ละคนเนื่องจากมีข้อผิดพลาดในการทดสอบเมื่อเร็วๆ นี้ ซึ่งหมายความว่านักเรียนไม่สามารถตอบคำถามบางข้อได้ ดังนั้นจึงไม่มีใครได้คะแนนเต็ม 30 . ต่อไปนี้คือตัวอย่างฟังก์ชันลูกศรที่เราสามารถใช้แก้ไขคะแนนการทดสอบได้

const grades = [25, 26, 22, 28];
const fixStudentGrades = grades.map( score => score + 1 );
console.log(fixStudentGrades);

รหัสของเราส่งคืน:

[26, 27, 23, 29]

อย่างที่คุณเห็น รหัสของเราได้เพิ่ม 1 ในแต่ละเกรดใน grades . ของเรา อาร์เรย์

บทสรุป

ฟังก์ชันลูกศรเป็นคุณลักษณะที่นำมาใช้ใน ES6 JavaScript ที่สามารถใช้เขียนโค้ดที่มีประสิทธิภาพและรัดกุมยิ่งขึ้น ฟังก์ชั่นลูกศรช่วยให้คุณใช้ => ลูกศรแทนที่ function คำสั่ง และยังอำนวยความสะดวกในการเขียนฟังก์ชันบรรทัดเดียวในบางสถานการณ์

ในบทช่วยสอนนี้ เราได้สำรวจพื้นฐานของการทำงานของฟังก์ชันใน JavaScript จากนั้นจึงพูดถึงวิธีเขียนฟังก์ชันลูกศร นอกจากนี้ เรายังสำรวจการส่งคืนโดยนัย การลบวงเล็บ และการใช้ฟังก์ชันลูกศรด้วย map , filter และ reduce ฟังก์ชั่น.

ตอนนี้คุณมีความรู้ที่จำเป็นในการเขียนฟังก์ชันลูกศรอย่างผู้เชี่ยวชาญแล้ว!