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

JavaScript Basics: Methods and Functions

Sketchnote by Tomomi Imura

journey
    title การผจญภัยฟังก์ชัน JavaScript ของคุณ
    section พื้นฐาน
      ไวยากรณ์ฟังก์ชัน: 5: คุณ
      การเรียกฟังก์ชัน: 4: คุณ
      พารามิเตอร์ & อาร์กิวเมนต์: 5: คุณ
    section แนวคิดขั้นสูง
      การคืนค่าของฟังก์ชัน: 4: คุณ
      พารามิเตอร์เริ่มต้น: 5: คุณ
      การประกอบฟังก์ชัน: 4: คุณ
    section JavaScript สมัยใหม่
      ฟังก์ชันลูกศร: 5: คุณ
      ฟังก์ชันไม่ระบุชื่อ: 4: คุณ
      ฟังก์ชันชั้นสูง: 5: คุณ

Pre-Lecture Quiz

แบบทดสอบก่อนบรรยาย

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

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

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

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

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

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

ลองดูวิธีสร้างฟังก์ชันกัน ซินแท็กซ์จะเป็นรูปแบบที่สม่ำเสมอดังนี้:

function nameOfFunction() { // นิยามฟังก์ชัน
 // นิยาม/เนื้อหาฟังก์ชัน
}

มาทำความเข้าใจกัน:

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

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

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

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

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

// เรียกใช้ฟังก์ชันของเรา
displayGreeting();

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

🧠 ฟังก์ชันเบื้องต้น: สร้างฟังก์ชันแรกของคุณ

มาลองตรวจสอบความเข้าใจฟังก์ชันพื้นฐานของคุณ:

• ทำไมเราถึงใช้เครื่องหมายปีกกา {} ในการกำหนดฟังก์ชัน?
• จะเกิดอะไรขึ้นถ้าคุณเขียน displayGreeting โดยไม่มีวงเล็บ?
• ทำไมคุณถึงอยากเรียกใช้ฟังก์ชันเดียวกันหลาย ๆ ครั้ง?

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!" เท่านั้น พารามิเตอร์ช่วยให้ฟังก์ชันยืดหยุ่นและมีประโยชน์มากขึ้น

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

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

function name(param, param2, param3) {

}

แต่ละพารามิเตอร์จะทำหน้าที่เป็นตัวแทน — เมื่อใครสักคนเรียกใช้ฟังก์ชัน จะส่งค่าจริงมาแทนที่เหล่านี้

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

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

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

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

displayGreeting('Christopher');
// แสดง "Hello, Christopher!" เมื่อรัน

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

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" แทน เราสามารถกำหนดค่าดีฟอลต์ได้ด้วยเครื่องหมายเท่ากับเหมือนการตั้งตัวแปร:

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

ที่นี่ name ยังจำเป็นต้องใส่ แต่ salutation มีค่าดีฟอลต์เป็น 'Hello' ถ้าไม่มีใครป้อนคำทักทายมา

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

displayGreeting('Christopher');
// แสดงข้อความ "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// แสดงข้อความ "Hi, Christopher"

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

🎛️ ตรวจสอบความเข้าใจพารามิเตอร์: ทำให้ฟังก์ชันยืดหยุ่น

ทดสอบความเข้าใจเรื่องพารามิเตอร์:

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

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 ตามด้วยค่าที่ต้องการส่งกลับ:

return myVariable;

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

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

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

ตอนนี้ฟังก์ชันนี้ไม่ได้แสดงข้อความ แต่สร้างข้อความแล้วส่งกลับมาแทน

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

const greetingMessage = createGreetingMessage('Christopher');

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

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 ในฟังก์ชันจะเกิดอะไรขึ้น?
• ทำไมการส่งค่าคืนถึงดีกว่าการแสดงผลแค่ในคอนโซล?
• ฟังก์ชันสามารถส่งค่ากลับหลายประเภทได้ไหม (เช่น สตริง ตัวเลข บูลีน)?

pie title "ประเภทค่าที่ส่งกลับที่พบบ่อย"
    "สตริง" : 30
    "ตัวเลข" : 25
    "วัตถุ" : 20
    "บูลีน" : 15
    "อาเรย์" : 10

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

Functions as parameters for functions

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

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

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

ลองโค้ดนี้ — ผ่านไป 3 วินาที คุณจะเห็นข้อความ:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// ค่าตัวจับเวลาเป็นมิลลิวินาที
setTimeout(displayDone, 3000);

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

Anonymous functions

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

JavaScript ให้คุณสร้าง ฟังก์ชันไร้ชื่อ (anonymous functions) — ฟังก์ชันที่ไม่มีชื่อที่คุณกำหนดไว้ตรงที่ใช้งานเลย

นี่คือตัวอย่างการเขียน timer ใหม่โดยใช้ฟังก์ชันไร้ชื่อ:

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

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

Fat arrow functions

JavaScript สมัยใหม่มีวิธีเขียนฟังก์ชันสั้นกว่าที่เรียกว่า arrow functions ใช้สัญลักษณ์ => (เหมือนลูกศร — จำง่าย!) และเป็นที่นิยมในกลุ่มนักพัฒนา

Arrow functions ช่วยข้ามคีย์เวิร์ด function และเขียนโค้ดให้น้อยลง

นี่คือตัวอย่างโค้ดไทม์เมอร์โดยใช้ arrow function:

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

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

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 มากกว่าฟังก์ชันแบบดั้งเดิม?
• ข้อดีหลักของฟังก์ชันไร้ชื่อคืออะไร?
• คุณนึกสถานการณ์ที่ควรใช้ฟังก์ชันมีชื่อดีกว่าฟังก์ชันไร้ชื่อได้ไหม?

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 ได้ที่นี่

Post-Lecture Quiz

แบบทดสอบหลังบรรยาย

Review & Self Study

ควร อ่านเพิ่มเติมเกี่ยวกับ arrow functions เพราะกำลังถูกใช้มากขึ้นในฐานโค้ด ลองฝึกเขียนฟังก์ชันและเขียนใหม่โดยใช้ซินแท็กซ์นี้ดู

Assignment

Fun with Functions

---

🧰 สรุปเครื่องมือฟังก์ชัน JavaScript ของคุณ

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
• สร้างไลบรารีฟังก์ชันส่วนตัวที่นำกลับมาใช้ใหม่ได้สำหรับโปรเจกต์อนาคต

🏆 การตรวจสอบแชมป์ฟังก์ชันขั้นสุดท้าย

เฉลิมฉลองความชำนาญด้านฟังก์ชันของคุณ:

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

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 ถึงแม้เราจะพยายามให้มีความถูกต้องสูงสุด กรุณาทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้องได้ เอกสารต้นฉบับในภาษาต้นทางถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลสำคัญ แนะนำให้ใช้บริการแปลโดยมืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดพลาดที่เกิดขึ้นจากการใช้การแปลนี้