20 KiB

Raw Blame History

พื้นฐาน JavaScript: เมธอดและฟังก์ชัน

สเก็ตโน้ตโดย Tomomi Imura

แบบทดสอบก่อนเรียน

เมื่อเราคิดถึงการเขียนโค้ด เรามักต้องการให้โค้ดของเราอ่านง่าย แม้ว่ามันอาจฟังดูขัดแย้ง แต่โค้ดถูกอ่านบ่อยกว่าที่มันถูกเขียน หนึ่งในเครื่องมือสำคัญในกล่องเครื่องมือของนักพัฒนาเพื่อให้โค้ดดูแลรักษาได้ง่ายคือ ฟังก์ชัน

🎥 คลิกที่ภาพด้านบนเพื่อดูวิดีโอเกี่ยวกับเมธอดและฟังก์ชัน

คุณสามารถเรียนบทเรียนนี้ได้ที่ Microsoft Learn!

ฟังก์ชัน

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

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

การสร้างและการเรียกใช้งานฟังก์ชัน

ไวยากรณ์ของฟังก์ชันมีลักษณะดังนี้:

function nameOfFunction() { // function definition
 // function definition/body
}

ถ้าฉันต้องการสร้างฟังก์ชันเพื่อแสดงคำทักทาย มันอาจมีลักษณะดังนี้:

function displayGreeting() {
  console.log('Hello, world!');
}

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

// calling our function
displayGreeting();

NOTE: มีฟังก์ชันประเภทพิเศษที่เรียกว่า เมธอด ซึ่งคุณได้ใช้งานไปแล้ว! ในความเป็นจริง เราเห็นสิ่งนี้ในตัวอย่างด้านบนเมื่อเราใช้ console.log สิ่งที่ทำให้เมธอดแตกต่างจากฟังก์ชันคือเมธอดจะผูกติดอยู่กับออบเจ็กต์ (console ในตัวอย่างของเรา) ในขณะที่ฟังก์ชันเป็นอิสระ คุณจะได้ยินนักพัฒนาหลายคนใช้คำเหล่านี้แทนกันได้

แนวทางปฏิบัติที่ดีที่สุดสำหรับฟังก์ชัน

มีแนวทางปฏิบัติที่ดีที่สุดบางประการที่ควรคำนึงถึงเมื่อสร้างฟังก์ชัน

เช่นเคย ใช้ชื่อที่อธิบายได้ชัดเจนเพื่อให้คุณรู้ว่าฟังก์ชันจะทำอะไร
ใช้ camelCasing เพื่อรวมคำ
ทำให้ฟังก์ชันของคุณมุ่งเน้นไปที่งานเฉพาะ

การส่งข้อมูลไปยังฟังก์ชัน

เพื่อให้ฟังก์ชันสามารถนำกลับมาใช้ใหม่ได้มากขึ้น คุณมักต้องการส่งข้อมูลเข้าไปในฟังก์ชัน หากเราพิจารณาตัวอย่าง displayGreeting ด้านบน มันจะแสดงเพียง Hello, world! ซึ่งไม่ใช่ฟังก์ชันที่มีประโยชน์ที่สุดที่เราสามารถสร้างได้ หากเราต้องการทำให้มันยืดหยุ่นขึ้น เช่น อนุญาตให้ระบุชื่อของคนที่เราต้องการทักทาย เราสามารถเพิ่ม พารามิเตอร์ ได้ พารามิเตอร์ (บางครั้งเรียกว่า อาร์กิวเมนต์) คือข้อมูลเพิ่มเติมที่ส่งไปยังฟังก์ชัน

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

function name(param, param2, param3) {

}

เราสามารถอัปเดต displayGreeting ของเราให้รับชื่อและแสดงผลได้

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

เมื่อเราต้องการเรียกฟังก์ชันและส่งพารามิเตอร์เข้าไป เราระบุไว้ในวงเล็บ

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

ค่าดีฟอลต์

เราสามารถทำให้ฟังก์ชันของเรายืดหยุ่นมากขึ้นโดยการเพิ่มพารามิเตอร์เพิ่มเติม แต่ถ้าเราไม่ต้องการให้ระบุค่าทุกครั้งล่ะ? ในตัวอย่างการทักทายของเรา เราอาจปล่อยให้ชื่อเป็นค่าที่จำเป็น (เราต้องรู้ว่าเรากำลังทักทายใคร) แต่เราต้องการอนุญาตให้ปรับแต่งคำทักทายได้ตามต้องการ หากไม่มีการปรับแต่ง เราจะให้ค่าดีฟอลต์แทน การให้ค่าดีฟอลต์กับพารามิเตอร์ เรากำหนดค่าในลักษณะเดียวกับที่เรากำหนดค่าตัวแปร - parameterName = 'defaultValue' ตัวอย่างเต็มมีดังนี้:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

เมื่อเราเรียกฟังก์ชัน เราสามารถตัดสินใจได้ว่าเราต้องการกำหนดค่าของ salutation หรือไม่

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

ค่าที่ส่งกลับ

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

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

หากฟังก์ชันส่งค่ากลับบางอย่าง คำสำคัญ return จะถูกใช้ คำสำคัญ return คาดหวังค่าหรือการอ้างอิงของสิ่งที่ถูกส่งกลับ ดังนี้:

return myVariable;

เราสามารถสร้างฟังก์ชันเพื่อสร้างข้อความทักทายและส่งค่ากลับไปยังผู้เรียก

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

เมื่อเรียกใช้ฟังก์ชันนี้ เราจะเก็บค่าที่ส่งกลับไว้ในตัวแปร วิธีนี้เหมือนกับการตั้งค่าตัวแปรให้กับค่าคงที่ (เช่น const name = 'Christopher')

const greetingMessage = createGreetingMessage('Christopher');

ฟังก์ชันเป็นพารามิเตอร์ของฟังก์ชัน

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

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

หากคุณรันโค้ดด้านล่าง หลังจาก 3 วินาที คุณจะเห็นข้อความ 3 seconds has elapsed

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

ฟังก์ชันนิรนาม

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

เมื่อเราส่งฟังก์ชันเป็นพารามิเตอร์ เราสามารถข้ามการสร้างล่วงหน้าและสร้างมันเป็นส่วนหนึ่งของพารามิเตอร์แทน เราใช้คำสำคัญ function เหมือนเดิม แต่สร้างมันเป็นพารามิเตอร์

ลองเขียนโค้ดด้านบนใหม่เพื่อใช้ฟังก์ชันนิรนาม:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

หากคุณรันโค้ดใหม่ของเรา คุณจะสังเกตเห็นว่าเราได้ผลลัพธ์เหมือนเดิม เราได้สร้างฟังก์ชัน แต่ไม่ต้องตั้งชื่อให้มัน!

ฟังก์ชันลูกศร (Fat Arrow Functions)

หนึ่งในทางลัดที่พบได้ทั่วไปในหลายภาษาโปรแกรม (รวมถึง JavaScript) คือความสามารถในการใช้สิ่งที่เรียกว่า ฟังก์ชันลูกศร หรือ ฟังก์ชัน Fat Arrow มันใช้ตัวบ่งชี้พิเศษ => ซึ่งดูเหมือนลูกศร - จึงเป็นที่มาของชื่อ! โดยการใช้ => เราสามารถข้ามคำสำคัญ function ได้

ลองเขียนโค้ดของเราใหม่อีกครั้งเพื่อใช้ฟังก์ชันลูกศร:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

เมื่อใดควรใช้แต่ละกลยุทธ์

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

🚀 ความท้าทาย

คุณสามารถอธิบายความแตกต่างระหว่างฟังก์ชันและเมธอดในประโยคเดียวได้หรือไม่? ลองดูสิ!

แบบทดสอบหลังเรียน

ทบทวนและศึกษาด้วยตนเอง

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

การบ้าน

สนุกกับฟังก์ชัน

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามอย่างเต็มที่เพื่อความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้บริการแปลภาษามนุษย์ที่เป็นมืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดซึ่งเกิดจากการใช้การแปลนี้

20 KiB Raw Blame History