Web-Dev-For-Beginners/translations/th/2-js-basics/2-functions-methods/README.md

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

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

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

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

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

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

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

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

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

ฟังก์ชัน

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

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

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

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

มาดูวิธีการสร้างฟังก์ชันกัน รูปแบบไวยากรณ์มีความสม่ำเสมอ:

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

มาดูรายละเอียดกัน:

• คำสำคัญ function บอก JavaScript ว่า "เฮ้ ฉันกำลังสร้างฟังก์ชัน!"
• nameOfFunction คือที่ที่คุณตั้งชื่อฟังก์ชันให้สื่อความหมาย
• วงเล็บ () คือที่ที่คุณสามารถเพิ่มพารามิเตอร์ (เราจะพูดถึงเรื่องนี้เร็วๆ นี้)
• วงเล็บปีกกา {} คือที่ที่โค้ดจริงๆ จะทำงานเมื่อคุณเรียกใช้ฟังก์ชัน

มาสร้างฟังก์ชันทักทายง่ายๆ เพื่อดูตัวอย่าง:

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

ฟังก์ชันนี้จะแสดงข้อความ "Hello, world!" ในคอนโซล เมื่อคุณกำหนดมันแล้ว คุณสามารถใช้มันได้หลายครั้งตามต้องการ

ในการเรียกใช้ (หรือ "เรียก") ฟังก์ชันของคุณ ให้เขียนชื่อฟังก์ชันตามด้วยวงเล็บ JavaScript อนุญาตให้คุณกำหนดฟังก์ชันก่อนหรือหลังการเรียกใช้ – JavaScript engine จะจัดการลำดับการทำงานเอง

// calling our function
displayGreeting();

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

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

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

นี่คือเคล็ดลับบางประการที่จะช่วยให้คุณเขียนฟังก์ชันที่ดี:

• ตั้งชื่อฟังก์ชันให้ชัดเจนและสื่อความหมาย – ตัวคุณในอนาคตจะขอบคุณ!
• ใช้ camelCasing สำหรับชื่อที่มีหลายคำ (เช่น calculateTotal แทนที่จะเป็น calculate_total)
• ให้ฟังก์ชันแต่ละตัวมุ่งเน้นทำสิ่งหนึ่งให้ดี

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

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

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

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

function name(param, param2, param3) {

}

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

มาปรับปรุงฟังก์ชันทักทายของเราให้รับชื่อของใครบางคน:

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

สังเกตว่าเรากำลังใช้ backticks (`) และ ${} เพื่อใส่ชื่อเข้าไปในข้อความโดยตรง – นี่เรียกว่า template literal และเป็นวิธีที่สะดวกในการสร้างสตริงที่มีตัวแปรผสมอยู่

ตอนนี้เมื่อเราเรียกใช้ฟังก์ชัน เราสามารถส่งชื่อใดๆ เข้าไปได้:

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

JavaScript จะนำสตริง 'Christopher' กำหนดให้กับพารามิเตอร์ name และสร้างข้อความส่วนตัว "Hello, Christopher!"

ค่าเริ่มต้น

ถ้าเราต้องการให้พารามิเตอร์บางตัวเป็นตัวเลือกล่ะ? นั่นคือที่ที่ค่าเริ่มต้นมีประโยชน์!

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

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

ที่นี่ name ยังคงเป็นสิ่งจำเป็น แต่ salutation มีค่าสำรองเป็น 'Hello' หากไม่มีใครระบุคำทักทายที่แตกต่างออกไป

ตอนนี้เราสามารถเรียกใช้ฟังก์ชันนี้ได้สองวิธี:

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

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

ในการเรียกครั้งแรก JavaScript ใช้ค่าเริ่มต้น "Hello" เนื่องจากเราไม่ได้ระบุคำทักทาย ในการเรียกครั้งที่สอง มันใช้คำทักทาย "Hi" ที่เรากำหนดเองแทน ความยืดหยุ่นนี้ทำให้ฟังก์ชันปรับตัวได้ในสถานการณ์ต่างๆ

ค่ารีเทิร์น

ฟังก์ชันของเราจนถึงตอนนี้แค่แสดงข้อความในคอนโซล แต่ถ้าคุณต้องการให้ฟังก์ชันคำนวณบางอย่างและส่งค่ากลับมาให้คุณล่ะ?

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

ในการส่งค่ากลับมา คุณใช้คำสำคัญ return ตามด้วยสิ่งที่คุณต้องการส่งกลับ:

return myVariable;

นี่คือสิ่งสำคัญ: เมื่อฟังก์ชันเจอคำสั่ง return มันจะหยุดทำงานทันทีและส่งค่ากลับไปยังผู้ที่เรียกใช้มัน

มาปรับปรุงฟังก์ชันทักทายของเราให้ส่งข้อความกลับมาแทนการแสดงผล:

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

ตอนนี้แทนที่จะแสดงข้อความทักทาย ฟังก์ชันนี้จะสร้างข้อความและส่งกลับมาให้เรา

ในการใช้ค่าที่ส่งกลับมา เราสามารถเก็บมันไว้ในตัวแปรเหมือนกับค่าปกติ:

const greetingMessage = createGreetingMessage('Christopher');

ตอนนี้ greetingMessage มีข้อความ "Hello, Christopher" และเราสามารถใช้มันได้ทุกที่ในโค้ดของเรา – เพื่อแสดงบนหน้าเว็บ รวมในอีเมล หรือส่งไปยังฟังก์ชันอื่น

ฟังก์ชันเป็นพารามิเตอร์สำหรับฟังก์ชัน

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

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

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

ลองโค้ดนี้ – หลังจาก 3 วินาที คุณจะเห็นข้อความ:

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

สังเกตว่าเราส่ง displayDone (โดยไม่มีวงเล็บ) ไปยัง setTimeout เราไม่ได้เรียกใช้ฟังก์ชันเอง – เราส่งมันไปยัง setTimeout และบอกว่า "เรียกใช้ฟังก์ชันนี้ใน 3 วินาที"

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

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

JavaScript ให้คุณสร้าง ฟังก์ชันนิรนาม – ฟังก์ชันที่ไม่มีชื่อที่คุณสามารถกำหนดได้ตรงที่คุณต้องการ

นี่คือวิธีที่เราสามารถเขียนตัวอย่างตัวจับเวลาใหม่โดยใช้ฟังก์ชันนิรนาม:

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

นี่ให้ผลลัพธ์เหมือนกัน แต่ฟังก์ชันถูกกำหนดโดยตรงในคำสั่ง setTimeout ทำให้ไม่ต้องประกาศฟังก์ชันแยกต่างหาก

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

JavaScript สมัยใหม่มีวิธีการเขียนฟังก์ชันที่สั้นลงเรียกว่า ฟังก์ชันลูกศร ฟังก์ชันเหล่านี้ใช้ => (ซึ่งดูเหมือนลูกศร – เข้าใจไหม?) และเป็นที่นิยมมากในหมู่นักพัฒนา

ฟังก์ชันลูกศรช่วยให้คุณข้ามคำสำคัญ function และเขียนโค้ดที่กระชับมากขึ้น

นี่คือตัวอย่างตัวจับเวลาของเราโดยใช้ฟังก์ชันลูกศร:

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

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

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

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

---

🚀 ความท้าทาย

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

ความท้าทาย GitHub Copilot Agent 🚀

ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้:

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

คำสั่ง: สร้างไฟล์ JavaScript ชื่อ mathUtils.js ที่มีฟังก์ชันดังนี้:

1. ฟังก์ชัน add ที่รับพารามิเตอร์สองตัวและส่งกลับผลรวมของมัน
2. ฟังก์ชัน multiply ที่มีค่าพารามิเตอร์เริ่มต้น (พารามิเตอร์ที่สองมีค่าเริ่มต้นเป็น 1)
3. ฟังก์ชันลูกศร square ที่รับตัวเลขและส่งกลับค่ากำลังสองของมัน
4. ฟังก์ชัน calculate ที่รับฟังก์ชันอื่นเป็นพารามิเตอร์และตัวเลขสองตัว จากนั้นใช้ฟังก์ชันนั้นกับตัวเลขเหล่านั้น
5. แสดงการเรียกใช้ฟังก์ชันแต่ละตัวพร้อมตัวอย่างที่เหมาะสม

เรียนรู้เพิ่มเติมเกี่ยวกับ โหมด Agent ที่นี่

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

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

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

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

งานที่ได้รับมอบหมาย

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

---

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