# JavaScript Basics: Methods and Functions  > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title การผจญภัยฟังก์ชัน JavaScript ของคุณ section พื้นฐาน ไวยากรณ์ฟังก์ชัน: 5: คุณ การเรียกฟังก์ชัน: 4: คุณ พารามิเตอร์ & อาร์กิวเมนต์: 5: คุณ section แนวคิดขั้นสูง การคืนค่าของฟังก์ชัน: 4: คุณ พารามิเตอร์เริ่มต้น: 5: คุณ การประกอบฟังก์ชัน: 4: คุณ section JavaScript สมัยใหม่ ฟังก์ชันลูกศร: 5: คุณ ฟังก์ชันไม่ระบุชื่อ: 4: คุณ ฟังก์ชันชั้นสูง: 5: คุณ ``` ## Pre-Lecture Quiz [แบบทดสอบก่อนบรรยาย](https://ff-quizzes.netlify.app) การเขียนโค้ดแบบเดิมซ้ำ ๆ เป็นหนึ่งในความน่าหงุดหงิดที่พบบ่อยที่สุดในการเขียนโปรแกรม ฟังก์ชันช่วยแก้ปัญหานี้ด้วยการให้คุณแพ็กโค้ดให้อยู่ในบล็อกที่ใช้ซ้ำได้ คิดถึงฟังก์ชันเหมือนกับชิ้นส่วนมาตรฐานที่ทำให้สายพานการประกอบของ Henry Ford ธรรมดากลายเป็นนวัตกรรม — เมื่อคุณสร้างส่วนประกอบที่เชื่อถือได้แล้ว คุณสามารถใช้ซ้ำได้ทุกที่โดยไม่ต้องสร้างใหม่จากศูนย์ ฟังก์ชันช่วยให้คุณรวบรวมชิ้นส่วนของโค้ดเพื่อให้สามารถใช้ซ้ำทั่วโปรแกรมของคุณ แทนที่จะคัดลอกและวางตรรกะเดียวกันซ้ำ ๆ คุณสามารถสร้างฟังก์ชันครั้งเดียวแล้วเรียกใช้เมื่อจำเป็น วิธีนี้ช่วยให้โค้ดของคุณเป็นระเบียบและทำให้อัปเดตง่ายขึ้นมาก ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีสร้างฟังก์ชันของคุณเอง ส่งข้อมูลให้ฟังก์ชัน และรับผลลัพธ์ที่มีประโยชน์กลับมา คุณจะได้ค้นพบความแตกต่างระหว่างฟังก์ชันและเมธอด เรียนรู้วิธีเขียนซินแท็กซ์แบบใหม่ และดูว่าฟังก์ชันสามารถทำงานร่วมกับฟังก์ชันอื่น ๆ ได้อย่างไร เราจะสร้างแนวคิดเหล่านี้ทีละขั้นตอน [](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)! ```mermaid mindmap root((ฟังก์ชัน JavaScript)) Basic Concepts Declaration ไวยากรณ์แบบดั้งเดิม ไวยากรณ์ฟังก์ชันลูกศร Calling ใช้วงเล็บ ต้องใช้วงเล็บ Parameters Input Values หลายพารามิเตอร์ ค่าปริยาย Arguments ค่าที่ส่งเข้าไป สามารถเป็นได้ทุกประเภท Return Values Output Data คำสั่ง return ออกจากฟังก์ชัน Use Results เก็บในตัวแปร ต่อฟังก์ชัน Advanced Patterns Higher-Order ฟังก์ชันเป็นพารามิเตอร์ คอลแบ็ก Anonymous ไม่ต้องการชื่อ นิยามแบบแทรก ``` ## Functions ฟังก์ชันคือบล็อกโค้ดที่แยกตัวออกเองและทำงานเฉพาะเจาะจง มันบรรจุตรรกะที่คุณสามารถเรียกใช้ได้เมื่อจำเป็น แทนที่จะเขียนโค้ดเดียวกันซ้ำหลายครั้งทั่วโปรแกรม คุณสามารถแพ็กโค้ดนี้ลงในฟังก์ชันแล้วเรียกใช้ฟังก์ชันเมื่อใดก็ได้ที่ต้องการ วิธีนี้ช่วยให้โค้ดของคุณสะอาดและทำให้อัปเดตง่ายขึ้น ลองนึกภาพความท้าทายในการบำรุงรักษาหากคุณต้องเปลี่ยนตรรกะที่กระจายอยู่ทั่วโค้ดโค้ดของคุณถึง 20 จุด การตั้งชื่อฟังก์ชันให้บรรยายความหมายเป็นสิ่งสำคัญ ฟังก์ชันที่มีชื่อดีจะสื่อความหมายของมันได้ชัดเจน — เมื่อคุณเห็น `cancelTimer()` คุณจะเข้าใจได้ทันทีว่าฟังก์ชันนี้ทำอะไร เหมือนกับปุ่มที่ติดป้ายไว้อย่างชัดเจนบอกคุณว่าเมื่อคลิกแล้วจะเกิดอะไรขึ้น ## Creating and calling a function ลองดูวิธีสร้างฟังก์ชันกัน ซินแท็กซ์จะเป็นรูปแบบที่สม่ำเสมอดังนี้: ```javascript function nameOfFunction() { // นิยามฟังก์ชัน // นิยาม/เนื้อหาฟังก์ชัน } ``` มาทำความเข้าใจกัน: - คีย์เวิร์ด `function` บอก JavaScript ว่า "เฮ้ ฉันกำลังสร้างฟังก์ชัน!" - `nameOfFunction` คือที่ที่คุณตั้งชื่อฟังก์ชันของคุณให้บ่งบอกความหมาย - วงเล็บ `()` คือที่วางพารามิเตอร์ (เราจะเรียนรู้เรื่องนี้เร็ว ๆ นี้) - เครื่องหมายปีกกา `{}` คือส่วนของโค้ดจริงที่จะทำงานเมื่อคุณเรียกฟังก์ชัน ลองสร้างฟังก์ชันทักทายง่าย ๆ เพื่อดูตัวอย่าง: ```javascript function displayGreeting() { console.log('Hello, world!'); } ``` ฟังก์ชันนี้จะแสดง "Hello, world!" ในคอนโซล เมื่อคุณกำหนดฟังก์ชันนี้แล้ว คุณสามารถใช้ได้หลายครั้งตามต้องการ เพื่อเรียกใช้ (หรือ "call") ฟังก์ชัน ให้เขียนชื่อฟังก์ชันตามด้วยวงเล็บ JavaScript อนุญาตให้คุณกำหนดฟังก์ชันก่อนหรือหลังการเรียกใช้งาน — เครื่องยนต์ JavaScript จะจัดลำดับการทำงานให้เอง ```javascript // เรียกใช้ฟังก์ชันของเรา displayGreeting(); ``` เมื่อคุณรันบรรทัดนี้ มันจะทำงานโค้ดทั้งหมดที่อยู่ภายในฟังก์ชัน `displayGreeting` โดยแสดงข้อความ "Hello, world!" ในคอนโซลเบราว์เซอร์ คุณสามารถเรียกฟังก์ชันนี้ซ้ำได้ตามต้องการ ### 🧠 **ฟังก์ชันเบื้องต้น: สร้างฟังก์ชันแรกของคุณ** **มาลองตรวจสอบความเข้าใจฟังก์ชันพื้นฐานของคุณ:** - ทำไมเราถึงใช้เครื่องหมายปีกกา `{}` ในการกำหนดฟังก์ชัน? - จะเกิดอะไรขึ้นถ้าคุณเขียน `displayGreeting` โดยไม่มีวงเล็บ? - ทำไมคุณถึงอยากเรียกใช้ฟังก์ชันเดียวกันหลาย ๆ ครั้ง? ```mermaid flowchart TD A["✏️ กำหนดฟังก์ชัน"] --> B["📦 บรรจุโค้ด"] B --> C["🏷️ ตั้งชื่อ"] C --> D["📞 เรียกใช้เมื่อจำเป็น"] D --> E["🔄 ใช้ซ้ำได้ทุกที่"] F["💡 ประโยชน์"] --> F1["ไม่ต้องเขียนโค้ดซ้ำ"] F --> F2["ง่ายต่อการดูแลรักษา"] F --> F3["การจัดการที่ชัดเจน"] F --> F4["ง่ายต่อการทดสอบ"] style A fill:#e3f2fd style E fill:#e8f5e8 style F fill:#fff3e0 ``` > **หมายเหตุ:** คุณใช้ **methods** ตลอดบทเรียนนี้ `console.log()` เป็นเมธอด — จริง ๆ แล้วคือฟังก์ชันที่ผูกกับอ็อบเจกต์ `console` ความแตกต่างสำคัญคือเมธอดผูกอยู่กับอ็อบเจกต์ ในขณะที่ฟังก์ชันแยกตัวเป็นอิสระ นักพัฒนาหลายคนใช้คำเหล่านี้แทนกันในบทสนทนาทั่วไป ### แนวทางปฏิบัติที่ดีสำหรับฟังก์ชัน นี่คือเคล็ดลับเล็กน้อยที่ช่วยให้คุณเขียนฟังก์ชันได้ดีขึ้น: - ตั้งชื่อฟังก์ชันให้ชัดเจนและบรรยายความหมาย – คุณในอนาคตจะขอบคุณ! - ใช้ **camelCasing** สำหรับชื่อหลายคำ (เช่น `calculateTotal` แทน `calculate_total`) - ให้ฟังก์ชันทำงานเพียงสิ่งเดียวอย่างมีประสิทธิภาพ ## Passing information to a function ฟังก์ชัน `displayGreeting` ของเราเอาไว้แสดง "Hello, world!" เท่านั้น พารามิเตอร์ช่วยให้ฟังก์ชันยืดหยุ่นและมีประโยชน์มากขึ้น **พารามิเตอร์** ทำหน้าที่เหมือนตัวแทนที่คุณจะใส่ค่าต่าง ๆ ลงไปในแต่ละครั้งที่ใช้ฟังก์ชัน วิธีนี้ทำให้ฟังก์ชันเดียวกันสามารถทำงานกับข้อมูลที่ต่างกันในแต่ละการเรียกใช้ เมื่อคุณกำหนดฟังก์ชัน ให้ระบุพารามิเตอร์ไว้ในวงเล็บ คั่นด้วยเครื่องหมายจุลภาคหากมีหลายพารามิเตอร์: ```javascript function name(param, param2, param3) { } ``` แต่ละพารามิเตอร์จะทำหน้าที่เป็นตัวแทน — เมื่อใครสักคนเรียกใช้ฟังก์ชัน จะส่งค่าจริงมาแทนที่เหล่านี้ ลองปรับฟังก์ชันทักทายให้รับชื่อคน: ```javascript function displayGreeting(name) { const message = `Hello, ${name}!`; console.log(message); } ``` สังเกตว่าตอนนี้เราใช้ backticks (`` ` ``) และ `${}` เพื่อแทรกชื่อคนตรง ๆ ในข้อความ — สิ่งนี้เรียกว่า template literal เป็นวิธีที่สะดวกมากในการสร้างสตริงที่มีตัวแปรผสมอยู่ ตอนนี้เมื่อเรียกฟังก์ชัน เราสามารถส่งชื่อใดก็ได้เข้าไป: ```javascript displayGreeting('Christopher'); // แสดง "Hello, Christopher!" เมื่อรัน ``` JavaScript จะเอาสตริง `'Christopher'` ไปกำหนดให้กับพารามิเตอร์ `name` และสร้างข้อความส่วนบุคคล "Hello, Christopher!" ขึ้นมา ```mermaid flowchart LR A["🎯 การเรียกฟังก์ชัน"] --> B["📥 พารามิเตอร์"] B --> C["⚙️ เนื้อหาฟังก์ชัน"] C --> D["📤 ผลลัพธ์"] A1["displayGreeting('Alice')"] --> A B1["name = 'Alice'"] --> B C1["เทมเพลตลิเทอรัล\n\`Hello, \${name}!\`"] --> C D1["'สวัสดี, Alice!'"] --> D E["🔄 ประเภทของพารามิเตอร์"] --> E1["สตริง"] E --> E2["ตัวเลข"] E --> E3["บูลีน"] E --> E4["ออบเจ็กต์"] E --> E5["ฟังก์ชัน"] style A fill:#e3f2fd style C fill:#e8f5e8 style D fill:#fff3e0 style E fill:#f3e5f5 ``` ## Default values ถ้าอยากให้บางพารามิเตอร์ไม่จำเป็นต้องใส่ (optional) เราทำได้ด้วยค่าเริ่มต้น! สมมติว่าอยากให้ผู้ใช้ปรับคำทักทายได้ แต่ถ้าไม่ระบุจะใช้คำว่า "Hello" แทน เราสามารถกำหนดค่าดีฟอลต์ได้ด้วยเครื่องหมายเท่ากับเหมือนการตั้งตัวแปร: ```javascript function displayGreeting(name, salutation='Hello') { console.log(`${salutation}, ${name}`); } ``` ที่นี่ `name` ยังจำเป็นต้องใส่ แต่ `salutation` มีค่าดีฟอลต์เป็น `'Hello'` ถ้าไม่มีใครป้อนคำทักทายมา ตอนนี้เราสามารถเรียกใช้ฟังก์ชันนี้ได้สองแบบ: ```javascript displayGreeting('Christopher'); // แสดงข้อความ "Hello, Christopher" displayGreeting('Christopher', 'Hi'); // แสดงข้อความ "Hi, Christopher" ``` การเรียกครั้งแรก JavaScript จะใช้ "Hello" ซึ่งเป็นค่าดีฟอลต์เพราะเราไม่ได้ส่งคำทักทายเข้ามา ครั้งที่สองจะใช้คำว่า "Hi" ที่เราส่งเข้าไป ฟีเจอร์นี้ทำให้ฟังก์ชันยืดหยุ่นกับสถานการณ์ที่แตกต่างกัน ### 🎛️ **ตรวจสอบความเข้าใจพารามิเตอร์: ทำให้ฟังก์ชันยืดหยุ่น** **ทดสอบความเข้าใจเรื่องพารามิเตอร์:** - ความแตกต่างระหว่างพารามิเตอร์กับอาร์กิวเมนต์คืออะไร? - ทำไมค่าดีฟอลต์จึงมีประโยชน์ในโปรแกรมจริง ๆ? - คุณคาดการณ์ได้ไหมว่าจะเกิดอะไรขึ้นถ้าส่งอาร์กิวเมนต์มากกว่าพารามิเตอร์? ```mermaid stateDiagram-v2 [*] --> NoParams: function greet() {} [*] --> WithParams: function greet(name) {} [*] --> WithDefaults: function greet(name, greeting='Hi') {} NoParams --> Static: ผลลัพธ์เดียวกันเสมอ WithParams --> Dynamic: เปลี่ยนตามอินพุต WithDefaults --> Flexible: ปรับแต่งได้ตามต้องการ Static --> [*] Dynamic --> [*] Flexible --> [*] note right of WithDefaults วิธีที่ยืดหยุ่นที่สุด เข้ากันได้กับเวอร์ชันเก่า end note ``` > **คำแนะนำระดับโปร:** การใช้ค่าเริ่มต้นช่วยทำให้ฟังก์ชันของคุณใช้งานง่าย ผู้ใช้เริ่มต้นได้รวดเร็วด้วยค่าดีฟอลต์ที่สมเหตุสมผล แต่ก็ยังปรับแต่งได้เมื่อจำเป็น! ## Return values ฟังก์ชันที่เราสร้างจนถึงตรงนี้แค่แสดงข้อความในคอนโซล แต่ถ้าคุณอยากให้ฟังก์ชันคำนวณสิ่งใดสิ่งหนึ่งแล้วคืนผลลัพธ์กลับมา? นี่แหละคือที่มาของ **ค่าคืน (return values)** แทนที่จะแค่แสดงข้อความ ฟังก์ชันสามารถส่งค่ากลับมาให้คุณเก็บไว้ในตัวแปรหรือใช้ในส่วนอื่นของโค้ดได้ ส่งค่ากลับได้โดยใช้คีย์เวิร์ด `return` ตามด้วยค่าที่ต้องการส่งกลับ: ```javascript return myVariable; ``` สิ่งสำคัญคือ เมื่อฟังก์ชันเจอ `return` ก็จะหยุดทำงานทันทีและส่งค่ากลับให้คนที่เรียกใช้งาน ลองดัดแปลงฟังก์ชันทักทายให้ส่งข้อความกลับแทนการแสดงผล: ```javascript function createGreetingMessage(name) { const message = `Hello, ${name}`; return message; } ``` ตอนนี้ฟังก์ชันนี้ไม่ได้แสดงข้อความ แต่สร้างข้อความแล้วส่งกลับมาแทน เพื่อใช้ค่าที่คืนมา เราสามารถเก็บไว้ในตัวแปรเหมือนกับค่าทั่วไปได้: ```javascript const greetingMessage = createGreetingMessage('Christopher'); ``` ตอนนี้ `greetingMessage` จะเก็บข้อความ "Hello, Christopher" และเราสามารถใช้มันที่ไหนก็ได้ในโค้ด — จะแสดงบนเว็บเพจ ส่งในอีเมล หรือส่งไปยังฟังก์ชันอื่น ```mermaid flowchart TD A["🔧 การประมวลผลฟังก์ชัน"] --> B{"มีคำสั่ง return ไหม?"} B -->|ใช่| C["📤 คืนค่ากลับ"] B -->|ไม่ใช่| D["📭 คืนค่า undefined"] C --> E["💾 เก็บในตัวแปร"] C --> F["🔗 ใช้ในนิพจน์"] C --> G["📞 ส่งต่อไปยังฟังก์ชัน"] D --> H["⚠️ โดยปกติไม่เป็นประโยชน์"] I["📋 การใช้งานค่าคืนกลับ"] --> I1["คำนวณผลลัพธ์"] I --> I2["ตรวจสอบข้อมูลนำเข้า"] I --> I3["เปลี่ยนแปลงข้อมูล"] I --> I4["สร้างออบเจ็กต์"] style C fill:#e8f5e8 style D fill:#ffebee style I fill:#e3f2fd ``` ### 🔄 **ตรวจสอบค่าคืน: รับผลลัพธ์กลับ** **ประเมินความเข้าใจค่าคืน:** - โค้ดหลังบรรทัด `return` ในฟังก์ชันจะเกิดอะไรขึ้น? - ทำไมการส่งค่าคืนถึงดีกว่าการแสดงผลแค่ในคอนโซล? - ฟังก์ชันสามารถส่งค่ากลับหลายประเภทได้ไหม (เช่น สตริง ตัวเลข บูลีน)? ```mermaid pie title "ประเภทค่าที่ส่งกลับที่พบบ่อย" "สตริง" : 30 "ตัวเลข" : 25 "วัตถุ" : 20 "บูลีน" : 15 "อาเรย์" : 10 ``` > **ข้อสังเกตสำคัญ:** ฟังก์ชันที่ส่งค่ากลับมีความยืดหยุ่นมากกว่า เพราะคนเรียกฟังก์ชันจะตัดสินใจว่าจะทำอะไรกับผลลัพธ์ ทำให้โค้ดของคุณยืดหยุ่นและใช้ซ้ำได้ง่าย! ## Functions as parameters for functions ฟังก์ชันสามารถถูกส่งเป็นพารามิเตอร์ให้ฟังก์ชันอื่นได้ แม้แนวคิดนี้จะดูซับซ้อนในตอนแรก แต่มันเป็นฟีเจอร์ที่ทรงพลังที่ช่วยให้โปรแกรมมีความยืดหยุ่นตามรูปแบบต่างๆ รูปแบบนี้พบได้บ่อยมากเวลาที่ต้องการพูดว่า "เมื่อบางสิ่งเกิดขึ้น ให้ทำสิ่งนี้" เช่น "เมื่อไทม์เมอร์หมดเวลา ให้รันโค้ดนี้" หรือ "เมื่อผู้ใช้คลิกปุ่ม ให้เรียกฟังก์ชันนี้" ลองดู `setTimeout` ฟังก์ชันในตัวที่รอเวลาหนึ่งแล้วจึงรันโค้ด เราต้องบอกมันว่าให้รันโค้ดอะไร — นี่แหละจุดที่ส่งฟังก์ชันไปเป็นพารามิเตอร์เหมาะมาก! ลองโค้ดนี้ — ผ่านไป 3 วินาที คุณจะเห็นข้อความ: ```javascript function displayDone() { console.log('3 seconds has elapsed'); } // ค่าตัวจับเวลาเป็นมิลลิวินาที setTimeout(displayDone, 3000); ``` สังเกตว่าเราไม่ได้เรียก `displayDone` (ไม่มีวงเล็บ) แต่ส่งชื่อฟังก์ชันไปยัง `setTimeout` พร้อมบอกว่า "เรียกใช้ฟังก์ชันนี้ใน 3 วินาที" ### Anonymous functions บางครั้งคุณแค่ต้องการฟังก์ชันเพื่องานเดียวเท่านั้นและไม่อยากตั้งชื่อ ถ้าคุณใช้งานฟังก์ชันนั้นแค่ครั้งเดียว การเพิ่มชื่อจะทำให้โค้ดรกไปโดยไม่จำเป็น JavaScript ให้คุณสร้าง **ฟังก์ชันไร้ชื่อ (anonymous functions)** — ฟังก์ชันที่ไม่มีชื่อที่คุณกำหนดไว้ตรงที่ใช้งานเลย นี่คือตัวอย่างการเขียน timer ใหม่โดยใช้ฟังก์ชันไร้ชื่อ: ```javascript setTimeout(function() { console.log('3 seconds has elapsed'); }, 3000); ``` ผลลัพธ์เหมือนเดิม แต่ฟังก์ชันถูกกำหนดในคำสั่ง `setTimeout` โดยตรงโดยไม่ต้องประกาศฟังก์ชันแยกต่างหาก ### Fat arrow functions JavaScript สมัยใหม่มีวิธีเขียนฟังก์ชันสั้นกว่าที่เรียกว่า **arrow functions** ใช้สัญลักษณ์ `=>` (เหมือนลูกศร — จำง่าย!) และเป็นที่นิยมในกลุ่มนักพัฒนา Arrow functions ช่วยข้ามคีย์เวิร์ด `function` และเขียนโค้ดให้น้อยลง นี่คือตัวอย่างโค้ดไทม์เมอร์โดยใช้ arrow function: ```javascript setTimeout(() => { console.log('3 seconds has elapsed'); }, 3000); ``` วงเล็บ `()` คือที่ใส่พารามิเตอร์ (ในกรณีนี้ว่างเปล่า) ตามด้วยลูกศร `=>` และส่วนของฟังก์ชันในเครื่องหมายปีกกา ฟังก์ชันนี้ทำงานเหมือนกับตัวอย่างก่อนหน้าแต่ซินแท็กซ์สั้นกว่า ```mermaid flowchart LR A["📝 รูปแบบฟังก์ชัน"] --> B["แบบดั้งเดิม"] A --> C["ลูกศร"] A --> D["ไม่ระบุชื่อ"] B --> B1["function name() {}"] B --> B2["ยกขึ้นก่อน"] B --> B3["มีชื่อ"] C --> C1["const name = () => {}"] C --> C2["ไวยากรณ์กระชับ"] C --> C3["สไตล์สมัยใหม่"] D --> D1["function() {}"] D --> D2["ไม่มีชื่อ"] D --> D3["ใช้ครั้งเดียว"] E["⏰ เมื่อไหร่ควรใช้"] --> E1["แบบดั้งเดิม: ฟังก์ชันที่ใช้ซ้ำได้"] E --> E2["ลูกศร: callback สั้นๆ"] E --> E3["ไม่ระบุชื่อ: ตัวจัดการเหตุการณ์"] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` ### เมื่อไหร่ควรใช้แต่ละวิธี ควรใช้วิธีไหน? คำแนะนำง่าย ๆ: ถ้าจะใช้ฟังก์ชันนั้นหลายครั้ง ให้ตั้งชื่อและประกาศแยกต่างหาก ถ้าจะใช้แค่ครั้งเดียว ให้พิจารณาฟังก์ชันไร้ชื่อ สำหรับ arrow functions และฟังก์ชันปกติเป็นทางเลือกที่ถูกต้องทั้งคู่ แม้ arrow functions กำลังเป็นที่นิยมในโค้ด JavaScript สมัยใหม่ ### 🎨 **ตรวจสอบความเข้าใจสไตล์ฟังก์ชัน: เลือกซินแท็กซ์ที่เหมาะสม** **ทดสอบความเข้าใจซินแท็กซ์:** - เมื่อไหร่คุณจะชอบใช้ arrow functions มากกว่าฟังก์ชันแบบดั้งเดิม? - ข้อดีหลักของฟังก์ชันไร้ชื่อคืออะไร? - คุณนึกสถานการณ์ที่ควรใช้ฟังก์ชันมีชื่อดีกว่าฟังก์ชันไร้ชื่อได้ไหม? ```mermaid quadrantChart title เมทริกซ์การตัดสินใจเลือกฟังก์ชัน x-axis ง่าย --> ซับซ้อน y-axis ใช้ครั้งเดียว --> ใช้ซ้ำได้ quadrant-1 ฟังก์ชันลูกศร quadrant-2 ฟังก์ชันที่มีชื่อ quadrant-3 ฟังก์ชันไม่ระบุชื่อ quadrant-4 ฟังก์ชันแบบดั้งเดิม Event Handlers: [0.3, 0.2] Utility Functions: [0.7, 0.8] Callbacks: [0.2, 0.3] Class Methods: [0.8, 0.7] Mathematical Operations: [0.4, 0.6] ``` > **เทรนด์สมัยใหม่:** Arrow functions กำลังกลายเป็นตัวเลือกมาตรฐานสำหรับนักพัฒนาหลายคนเพราะซินแท็กซ์ที่สั้นกว่า แต่ฟังก์ชันแบบดั้งเดิมก็ยังคงมีประโยชน์อยู่! --- ## 🚀 Challenge คุณสามารถอธิบายในประโยคเดียวได้ไหมว่าความแตกต่างระหว่างฟังก์ชันกับเมธอดคืออะไร? ลองดู! ## GitHub Copilot Agent Challenge 🚀 ใช้โหมด Agent เพื่อทำภารกิจต่อไปนี้: **คำอธิบาย:** สร้างไลบรารียูทิลิตี้ของฟังก์ชันคณิตศาสตร์ที่แสดงแนวคิดฟังก์ชันต่าง ๆ ที่ครอบคลุมในบทเรียนนี้ รวมถึงพารามิเตอร์, ค่าดีฟอลต์, ค่าคืน, และ arrow functions **พรอมต์:** สร้างไฟล์ JavaScript ชื่อ `mathUtils.js` ที่มีฟังก์ชันดังนี้: 1. ฟังก์ชัน `add` ที่รับสองพารามิเตอร์และคืนผลรวมของทั้งสอง 2. ฟังก์ชัน `multiply` ที่มีค่าพารามิเตอร์ดีฟอลต์ (พารามิเตอร์ที่สองดีฟอลต์เป็น 1) 3. ฟังก์ชันลูกศร `square` ที่รับเลขและคืนกำลังสองของเลขนั้น 4. ฟังก์ชัน `calculate` ที่รับฟังก์ชันอีกตัวเป็นพารามิเตอร์ และเลขสองตัว แล้วประยุกต์ใช้ฟังก์ชันกับตัวเลขเหล่านั้น 5. แสดงการเรียกใช้ฟังก์ชันแต่ละตัวด้วยกรณีทดสอบที่เหมาะสม เรียนรู้เพิ่มเติมเกี่ยวกับ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ได้ที่นี่ ## Post-Lecture Quiz [แบบทดสอบหลังบรรยาย](https://ff-quizzes.netlify.app) ## Review & Self Study ควร [อ่านเพิ่มเติมเกี่ยวกับ arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) เพราะกำลังถูกใช้มากขึ้นในฐานโค้ด ลองฝึกเขียนฟังก์ชันและเขียนใหม่โดยใช้ซินแท็กซ์นี้ดู ## Assignment [Fun with Functions](assignment.md) --- ## 🧰 **สรุปเครื่องมือฟังก์ชัน JavaScript ของคุณ** ```mermaid graph TD A["🎯 ฟังก์ชัน JavaScript"] --> B["📋 การประกาศฟังก์ชัน"] A --> C["📥 พารามิเตอร์"] A --> D["📤 ค่าที่ส่งกลับ"] A --> E["🎨 ไวยากรณ์สมัยใหม่"] B --> B1["function name() {}"] B --> B2["การตั้งชื่อที่บ่งบอกความหมาย"] B --> B3["บล็อกโค้ดที่นำกลับมาใช้ใหม่ได้"] C --> C1["ข้อมูลนำเข้า"] C --> C2["ค่าเริ่มต้น"] C --> C3["พารามิเตอร์หลายตัว"] D --> D1["คำสั่ง return"] D --> D2["ออกจากฟังก์ชัน"] D --> D3["ส่งข้อมูลกลับ"] E --> E1["ฟังก์ชันลูกศร: () =>"] E --> E2["ฟังก์ชันไม่มีชื่อ"] E --> E3["ฟังก์ชันระดับสูง"] F["⚡ ประโยชน์หลัก"] --> F1["นำโค้ดกลับมาใช้ใหม่ได้"] F --> F2["การจัดระเบียบที่ดีขึ้น"] F --> F3["ทดสอบได้ง่ายขึ้น"] F --> F4["การออกแบบแบบโมดูล"] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 style F fill:#fce4ec ``` --- ## 🚀 กรอบเวลาการเป็นผู้เชี่ยวชาญฟังก์ชัน JavaScript ของคุณ ### ⚡ **สิ่งที่คุณทำได้ใน 5 นาทีข้างหน้า** - [ ] เขียนฟังก์ชันง่าย ๆ ที่คืนค่าตัวเลขโปรดของคุณ - [ ] สร้างฟังก์ชันที่รับพารามิเตอร์สองตัวแล้วบวกกัน - [ ] ลองแปลงฟังก์ชันแบบดั้งเดิมเป็นไวยากรณ์ฟังก์ชันลูกศร - [ ] ฝึกทำชาเลนจ์: อธิบายความแตกต่างระหว่างฟังก์ชันและเมธอด ### 🎯 **สิ่งที่คุณสามารถทำได้ในชั่วโมงนี้** - [ ] ทำแบบทดสอบหลังบทเรียนให้เสร็จและทบทวนแนวคิดที่สับสน - [ ] สร้างไลบรารีเครื่องมือคณิตศาสตร์จากชาเลนจ์ GitHub Copilot - [ ] สร้างฟังก์ชันที่ใช้ฟังก์ชันอื่นเป็นพารามิเตอร์ - [ ] ฝึกเขียนฟังก์ชันที่มีพารามิเตอร์ค่าปริยาย - [ ] ทดลองใช้ template literals ในค่าที่ฟังก์ชันส่งกลับ ### 📅 **การฝึกฝนฟังก์ชันตลอดสัปดาห์ของคุณ** - [ ] ทำการบ้าน "สนุกกับฟังก์ชัน" อย่างสร้างสรรค์ - [ ] ปรับปรุงโค้ดที่เขียนซ้ำซากให้เป็นฟังก์ชันที่นำกลับมาใช้ซ้ำได้ - [ ] สร้างเครื่องคิดเลขเล็ก ๆ โดยใช้เฉพาะฟังก์ชัน (ไม่มีตัวแปร global) - [ ] ฝึกใช้ฟังก์ชันลูกศรกับเมธอดอาร์เรย์เช่น `map()` และ `filter()` - [ ] สร้างคอลเลกชันฟังก์ชันเครื่องมือสำหรับงานทั่วไป - [ ] ศึกษาฟังก์ชันระดับสูงและแนวคิดการเขียนโปรแกรมเชิงฟังก์ชัน ### 🌟 **การเปลี่ยนแปลงของคุณในเดือนนี้** - [ ] ฝึกฝนแนวคิดฟังก์ชันขั้นสูง เช่น closures และ scope - [ ] สร้างโปรเจกต์ที่ใช้ composition ของฟังก์ชันอย่างหนัก - [ ] มีส่วนร่วมในโอเพนซอร์สโดยพัฒนาการจัดทำเอกสารฟังก์ชัน - [ ] สอนผู้อื่นเกี่ยวกับฟังก์ชันและไวยากรณ์ที่แตกต่างกัน - [ ] สำรวจแนวทางการเขียนโปรแกรมเชิงฟังก์ชันใน JavaScript - [ ] สร้างไลบรารีฟังก์ชันส่วนตัวที่นำกลับมาใช้ใหม่ได้สำหรับโปรเจกต์อนาคต ### 🏆 **การตรวจสอบแชมป์ฟังก์ชันขั้นสุดท้าย** **เฉลิมฉลองความชำนาญด้านฟังก์ชันของคุณ:** - ฟังก์ชันที่มีประโยชน์ที่สุดที่คุณสร้างจนถึงตอนนี้คืออะไร? - การเรียนรู้เกี่ยวกับฟังก์ชันเปลี่ยนวิธีคิดในการจัดระเบียบโค้ดของคุณอย่างไร? - คุณชอบไวยากรณ์ฟังก์ชันแบบไหนและเพราะอะไร? - ปัญหาในโลกแห่งความจริงใดที่คุณจะแก้ได้ด้วยการเขียนฟังก์ชัน? ```mermaid journey title การพัฒนาความมั่นใจในการเขียนฟังก์ชันของคุณ section วันนี้ สับสนกับไวยากรณ์: 3: You เข้าใจพื้นฐาน: 4: You การเขียนฟังก์ชันง่าย ๆ: 5: You section สัปดาห์นี้ การใช้พารามิเตอร์: 4: You การส่งค่ากลับ: 5: You ไวยากรณ์สมัยใหม่: 5: You section เดือนหน้า การประสมฟังก์ชัน: 5: You รูปแบบขั้นสูง: 5: You การสอนผู้อื่น: 5: You ``` > 🎉 **คุณได้เชี่ยวชาญหนึ่งในแนวคิดที่ทรงพลังที่สุดของการเขียนโปรแกรมแล้ว!** ฟังก์ชันคือบล็อกก่อสร้างของโปรแกรมขนาดใหญ่ โปรแกรมทุกตัวที่คุณจะสร้างจะใช้ฟังก์ชันเพื่อจัดระเบียบ ใช้ซ้ำ และโครงสร้างโค้ด ตอนนี้คุณเข้าใจวิธีการบรรจุตรรกะลงในส่วนประกอบที่นำกลับมาใช้ซ้ำได้ ทำให้คุณเป็นโปรแกรมเมอร์ที่มีประสิทธิภาพและมีประสิทธิผลยิ่งขึ้น ยินดีต้อนรับสู่โลกของการเขียนโปรแกรมแบบโมดูลาร์! 🚀 --- **ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) ถึงแม้เราจะพยายามให้มีความถูกต้องสูงสุด กรุณาทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้องได้ เอกสารต้นฉบับในภาษาต้นทางถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลสำคัญ แนะนำให้ใช้บริการแปลโดยมืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดพลาดที่เกิดขึ้นจากการใช้การแปลนี้