# พื้นฐาน JavaScript: เมธอดและฟังก์ชัน  > สเก็ตโน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) ## แบบทดสอบก่อนเรียน [แบบทดสอบก่อนเรียน](https://ff-quizzes.netlify.app/web/quiz/9) เมื่อเราคิดถึงการเขียนโค้ด เรามักต้องการให้โค้ดของเราอ่านง่าย แม้ว่าจะฟังดูขัดแย้ง แต่โค้ดมักถูกอ่านมากกว่าถูกเขียนหลายเท่า หนึ่งในเครื่องมือสำคัญในกล่องเครื่องมือของนักพัฒนาเพื่อให้โค้ดดูแลรักษาได้ง่ายคือ **ฟังก์ชัน** [](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) คือความสามารถในการใช้สิ่งที่เรียกว่า **ฟังก์ชันลูกศร** หรือ **ฟังก์ชันลูกศรอ้วน** มันใช้ตัวบ่งชี้พิเศษ `=>` ซึ่งดูเหมือนลูกศร - จึงเป็นที่มาของชื่อ! โดยการใช้ `=>` เราสามารถข้ามคำสำคัญ `function` ได้ ลองเขียนโค้ดใหม่อีกครั้งโดยใช้ฟังก์ชันลูกศร: ```javascript setTimeout(() => { console.log('3 seconds has elapsed'); }, 3000); ``` ### ควรใช้กลยุทธ์ใดในแต่ละกรณี ตอนนี้คุณได้เห็นแล้วว่าเรามีสามวิธีในการส่งฟังก์ชันเป็นพารามิเตอร์ และอาจสงสัยว่าเมื่อใดควรใช้แต่ละวิธี หากคุณรู้ว่าคุณจะใช้ฟังก์ชันมากกว่าหนึ่งครั้ง ให้สร้างมันตามปกติ หากคุณจะใช้มันเพียงตำแหน่งเดียว โดยทั่วไปแล้วควรใช้ฟังก์ชันนิรนาม ส่วนการเลือกใช้ฟังก์ชันลูกศรหรือไวยากรณ์ `function` แบบดั้งเดิมนั้นขึ้นอยู่กับคุณ แต่คุณจะสังเกตเห็นว่านักพัฒนาสมัยใหม่ส่วนใหญ่นิยมใช้ `=>` --- ## 🚀 ความท้าทาย คุณสามารถอธิบายความแตกต่างระหว่างฟังก์ชันและเมธอดในประโยคเดียวได้หรือไม่? ลองดูสิ! ## แบบทดสอบหลังเรียน [แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app/web/quiz/10) ## ทบทวนและศึกษาด้วยตนเอง ควร [อ่านเพิ่มเติมเกี่ยวกับฟังก์ชันลูกศร](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) เนื่องจากมันถูกใช้งานมากขึ้นในโค้ดต่างๆ ฝึกเขียนฟังก์ชัน และลองเขียนใหม่ด้วยไวยากรณ์นี้ ## การบ้าน [สนุกกับฟังก์ชัน](assignment.md) --- **ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้