# พื้นฐาน JavaScript: เมธอดและฟังก์ชัน  > สเก็ตโน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) ## แบบทดสอบก่อนเรียน [แบบทดสอบก่อนเรียน](https://ff-quizzes.netlify.app) เมื่อเราคิดถึงการเขียนโค้ด เรามักต้องการให้โค้ดของเราอ่านง่าย แม้ว่ามันอาจฟังดูขัดแย้ง แต่โค้ดถูกอ่านบ่อยกว่าที่มันถูกเขียน หนึ่งในเครื่องมือสำคัญในกล่องเครื่องมือของนักพัฒนาเพื่อให้โค้ดดูแลรักษาได้ง่ายคือ **ฟังก์ชัน** [](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions") > 🎥 คลิกที่ภาพด้านบนเพื่อดูวิดีโอเกี่ยวกับเมธอดและฟังก์ชัน > คุณสามารถเรียนบทเรียนนี้ได้ที่ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)! ## ฟังก์ชัน ในแก่นแท้ ฟังก์ชันคือบล็อกของโค้ดที่เราสามารถเรียกใช้งานได้ตามต้องการ สิ่งนี้เหมาะสำหรับสถานการณ์ที่เราต้องทำงานเดิมซ้ำๆ แทนที่จะคัดลอกตรรกะไปไว้ในหลายๆ ที่ (ซึ่งจะทำให้ยากต่อการอัปเดตในอนาคต) เราสามารถรวมศูนย์ไว้ในที่เดียว และเรียกใช้งานเมื่อเราต้องการดำเนินการนั้น - คุณยังสามารถเรียกฟังก์ชันจากฟังก์ชันอื่นได้อีกด้วย! สิ่งที่สำคัญไม่แพ้กันคือความสามารถในการตั้งชื่อฟังก์ชัน แม้ว่าสิ่งนี้อาจดูเหมือนเป็นเรื่องเล็กน้อย แต่ชื่อของฟังก์ชันช่วยให้เราเข้าใจโค้ดได้อย่างรวดเร็ว คุณอาจคิดว่ามันเหมือนกับป้ายบนปุ่ม ถ้าฉันคลิกปุ่มที่เขียนว่า "ยกเลิกตัวจับเวลา" ฉันก็จะรู้ว่ามันจะหยุดการทำงานของนาฬิกา ## การสร้างและการเรียกใช้งานฟังก์ชัน ไวยากรณ์ของฟังก์ชันมีลักษณะดังนี้: ```javascript function nameOfFunction() { // function definition // function definition/body } ``` ถ้าฉันต้องการสร้างฟังก์ชันเพื่อแสดงคำทักทาย มันอาจมีลักษณะดังนี้: ```javascript function displayGreeting() { console.log('Hello, world!'); } ``` เมื่อใดก็ตามที่เราต้องการเรียก (หรือใช้งาน) ฟังก์ชันของเรา เราใช้ชื่อฟังก์ชันตามด้วย `()` สิ่งที่ควรทราบคือฟังก์ชันของเราสามารถถูกกำหนดก่อนหรือหลังจากที่เราตัดสินใจเรียกใช้งานได้ ตัวคอมไพเลอร์ของ JavaScript จะค้นหาให้คุณ ```javascript // calling our function displayGreeting(); ``` > **NOTE:** มีฟังก์ชันประเภทพิเศษที่เรียกว่า **เมธอด** ซึ่งคุณได้ใช้งานไปแล้ว! ในความเป็นจริง เราเห็นสิ่งนี้ในตัวอย่างด้านบนเมื่อเราใช้ `console.log` สิ่งที่ทำให้เมธอดแตกต่างจากฟังก์ชันคือเมธอดจะผูกติดอยู่กับออบเจ็กต์ (`console` ในตัวอย่างของเรา) ในขณะที่ฟังก์ชันเป็นอิสระ คุณจะได้ยินนักพัฒนาหลายคนใช้คำเหล่านี้แทนกันได้ ### แนวทางปฏิบัติที่ดีที่สุดสำหรับฟังก์ชัน มีแนวทางปฏิบัติที่ดีที่สุดบางประการที่ควรคำนึงถึงเมื่อสร้างฟังก์ชัน - เช่นเคย ใช้ชื่อที่อธิบายได้ชัดเจนเพื่อให้คุณรู้ว่าฟังก์ชันจะทำอะไร - ใช้ **camelCasing** เพื่อรวมคำ - ทำให้ฟังก์ชันของคุณมุ่งเน้นไปที่งานเฉพาะ ## การส่งข้อมูลไปยังฟังก์ชัน เพื่อให้ฟังก์ชันสามารถนำกลับมาใช้ใหม่ได้มากขึ้น คุณมักต้องการส่งข้อมูลเข้าไปในฟังก์ชัน หากเราพิจารณาตัวอย่าง `displayGreeting` ด้านบน มันจะแสดงเพียง **Hello, world!** ซึ่งไม่ใช่ฟังก์ชันที่มีประโยชน์ที่สุดที่เราสามารถสร้างได้ หากเราต้องการทำให้มันยืดหยุ่นขึ้น เช่น อนุญาตให้ระบุชื่อของคนที่เราต้องการทักทาย เราสามารถเพิ่ม **พารามิเตอร์** ได้ พารามิเตอร์ (บางครั้งเรียกว่า **อาร์กิวเมนต์**) คือข้อมูลเพิ่มเติมที่ส่งไปยังฟังก์ชัน พารามิเตอร์จะถูกระบุในส่วนการกำหนดฟังก์ชันภายในวงเล็บและคั่นด้วยเครื่องหมายจุลภาค ดังนี้: ```javascript function name(param, param2, param3) { } ``` เราสามารถอัปเดต `displayGreeting` ของเราให้รับชื่อและแสดงผลได้ ```javascript function displayGreeting(name) { const message = `Hello, ${name}!`; console.log(message); } ``` เมื่อเราต้องการเรียกฟังก์ชันและส่งพารามิเตอร์เข้าไป เราระบุไว้ในวงเล็บ ```javascript displayGreeting('Christopher'); // displays "Hello, Christopher!" when run ``` ## ค่าดีฟอลต์ เราสามารถทำให้ฟังก์ชันของเรายืดหยุ่นมากขึ้นโดยการเพิ่มพารามิเตอร์เพิ่มเติม แต่ถ้าเราไม่ต้องการให้ระบุค่าทุกครั้งล่ะ? ในตัวอย่างการทักทายของเรา เราอาจปล่อยให้ชื่อเป็นค่าที่จำเป็น (เราต้องรู้ว่าเรากำลังทักทายใคร) แต่เราต้องการอนุญาตให้ปรับแต่งคำทักทายได้ตามต้องการ หากไม่มีการปรับแต่ง เราจะให้ค่าดีฟอลต์แทน การให้ค่าดีฟอลต์กับพารามิเตอร์ เรากำหนดค่าในลักษณะเดียวกับที่เรากำหนดค่าตัวแปร - `parameterName = 'defaultValue'` ตัวอย่างเต็มมีดังนี้: ```javascript function displayGreeting(name, salutation='Hello') { console.log(`${salutation}, ${name}`); } ``` เมื่อเราเรียกฟังก์ชัน เราสามารถตัดสินใจได้ว่าเราต้องการกำหนดค่าของ `salutation` หรือไม่ ```javascript displayGreeting('Christopher'); // displays "Hello, Christopher" displayGreeting('Christopher', 'Hi'); // displays "Hi, Christopher" ``` ## ค่าที่ส่งกลับ จนถึงตอนนี้ ฟังก์ชันที่เราสร้างจะส่งผลลัพธ์ไปยัง [console](https://developer.mozilla.org/docs/Web/API/console) เสมอ บางครั้งนี่อาจเป็นสิ่งที่เราต้องการ โดยเฉพาะเมื่อเราสร้างฟังก์ชันที่เรียกใช้บริการอื่นๆ แต่ถ้าฉันต้องการสร้างฟังก์ชันช่วยเหลือเพื่อคำนวณและส่งค่ากลับมาเพื่อใช้งานที่อื่นล่ะ? เราสามารถทำได้โดยใช้ **ค่าที่ส่งกลับ** ค่าที่ส่งกลับจะถูกส่งกลับโดยฟังก์ชัน และสามารถเก็บไว้ในตัวแปรได้เหมือนกับที่เราสามารถเก็บค่าคงที่ เช่น สตริงหรือเลข หากฟังก์ชันส่งค่ากลับบางอย่าง คำสำคัญ `return` จะถูกใช้ คำสำคัญ `return` คาดหวังค่าหรือการอ้างอิงของสิ่งที่ถูกส่งกลับ ดังนี้: ```javascript return myVariable; ``` เราสามารถสร้างฟังก์ชันเพื่อสร้างข้อความทักทายและส่งค่ากลับไปยังผู้เรียก ```javascript function createGreetingMessage(name) { const message = `Hello, ${name}`; return message; } ``` เมื่อเรียกใช้ฟังก์ชันนี้ เราจะเก็บค่าที่ส่งกลับไว้ในตัวแปร วิธีนี้เหมือนกับการตั้งค่าตัวแปรให้กับค่าคงที่ (เช่น `const name = 'Christopher'`) ```javascript const greetingMessage = createGreetingMessage('Christopher'); ``` ## ฟังก์ชันเป็นพารามิเตอร์ของฟังก์ชัน เมื่อคุณก้าวหน้าในอาชีพการเขียนโปรแกรม คุณจะพบกับฟังก์ชันที่รับฟังก์ชันเป็นพารามิเตอร์ เทคนิคที่น่าสนใจนี้มักใช้เมื่อเราไม่รู้ว่าเมื่อใดบางสิ่งจะเกิดขึ้นหรือเสร็จสิ้น แต่เรารู้ว่าเราต้องดำเนินการบางอย่างเพื่อตอบสนอง ตัวอย่างเช่น พิจารณา [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) ซึ่งเริ่มตัวจับเวลาและจะดำเนินการโค้ดเมื่อเสร็จสิ้น เราจำเป็นต้องบอกมันว่าเราต้องการให้ดำเนินการโค้ดอะไร ฟังดูเหมือนเป็นงานที่เหมาะสำหรับฟังก์ชัน! หากคุณรันโค้ดด้านล่าง หลังจาก 3 วินาที คุณจะเห็นข้อความ **3 seconds has elapsed** ```javascript function displayDone() { console.log('3 seconds has elapsed'); } // timer value is in milliseconds setTimeout(displayDone, 3000); ``` ### ฟังก์ชันนิรนาม ลองดูสิ่งที่เราสร้างขึ้นอีกครั้ง เรากำลังสร้างฟังก์ชันที่มีชื่อซึ่งจะถูกใช้เพียงครั้งเดียว เมื่อแอปพลิเคชันของเราซับซ้อนขึ้น เราอาจสร้างฟังก์ชันจำนวนมากที่ถูกเรียกใช้เพียงครั้งเดียว สิ่งนี้ไม่เหมาะสม โชคดีที่เราไม่จำเป็นต้องตั้งชื่อเสมอไป! เมื่อเราส่งฟังก์ชันเป็นพารามิเตอร์ เราสามารถข้ามการสร้างล่วงหน้าและสร้างมันเป็นส่วนหนึ่งของพารามิเตอร์แทน เราใช้คำสำคัญ `function` เหมือนเดิม แต่สร้างมันเป็นพารามิเตอร์ ลองเขียนโค้ดด้านบนใหม่เพื่อใช้ฟังก์ชันนิรนาม: ```javascript setTimeout(function() { console.log('3 seconds has elapsed'); }, 3000); ``` หากคุณรันโค้ดใหม่ของเรา คุณจะสังเกตเห็นว่าเราได้ผลลัพธ์เหมือนเดิม เราได้สร้างฟังก์ชัน แต่ไม่ต้องตั้งชื่อให้มัน! ### ฟังก์ชันลูกศร (Fat Arrow Functions) หนึ่งในทางลัดที่พบได้ทั่วไปในหลายภาษาโปรแกรม (รวมถึง JavaScript) คือความสามารถในการใช้สิ่งที่เรียกว่า **ฟังก์ชันลูกศร** หรือ **ฟังก์ชัน Fat Arrow** มันใช้ตัวบ่งชี้พิเศษ `=>` ซึ่งดูเหมือนลูกศร - จึงเป็นที่มาของชื่อ! โดยการใช้ `=>` เราสามารถข้ามคำสำคัญ `function` ได้ ลองเขียนโค้ดของเราใหม่อีกครั้งเพื่อใช้ฟังก์ชันลูกศร: ```javascript setTimeout(() => { console.log('3 seconds has elapsed'); }, 3000); ``` ### เมื่อใดควรใช้แต่ละกลยุทธ์ ตอนนี้คุณได้เห็นแล้วว่าเรามีสามวิธีในการส่งฟังก์ชันเป็นพารามิเตอร์ และอาจสงสัยว่าเมื่อใดควรใช้แต่ละวิธี หากคุณรู้ว่าคุณจะใช้ฟังก์ชันมากกว่าหนึ่งครั้ง ให้สร้างมันตามปกติ หากคุณจะใช้มันเพียงตำแหน่งเดียว โดยทั่วไปแล้วควรใช้ฟังก์ชันนิรนาม ส่วนการเลือกใช้ฟังก์ชันลูกศรหรือไวยากรณ์ `function` แบบดั้งเดิมนั้นขึ้นอยู่กับคุณ แต่คุณจะสังเกตเห็นว่านักพัฒนาสมัยใหม่ส่วนใหญ่นิยมใช้ `=>` --- ## 🚀 ความท้าทาย คุณสามารถอธิบายความแตกต่างระหว่างฟังก์ชันและเมธอดในประโยคเดียวได้หรือไม่? ลองดูสิ! ## แบบทดสอบหลังเรียน [แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app) ## ทบทวนและศึกษาด้วยตนเอง ควร [อ่านเพิ่มเติมเกี่ยวกับฟังก์ชันลูกศร](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) เนื่องจากมันถูกใช้งานมากขึ้นในโค้ดเบส ลองฝึกเขียนฟังก์ชัน และเขียนใหม่ด้วยไวยากรณ์นี้ ## การบ้าน [สนุกกับฟังก์ชัน](assignment.md) --- **ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามอย่างเต็มที่เพื่อความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้บริการแปลภาษามนุษย์ที่เป็นมืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดซึ่งเกิดจากการใช้การแปลนี้