20 KiB

Raw Permalink 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) คือความสามารถในการใช้สิ่งที่เรียกว่า ฟังก์ชันลูกศร หรือ ฟังก์ชันลูกศรอ้วน มันใช้ตัวบ่งชี้พิเศษ => ซึ่งดูเหมือนลูกศร - จึงเป็นที่มาของชื่อ! โดยการใช้ => เราสามารถข้ามคำสำคัญ function ได้

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

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

ควรใช้กลยุทธ์ใดในแต่ละกรณี

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

🚀 ความท้าทาย

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

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

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

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

การบ้าน

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

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

20 KiB Raw Permalink Blame History