<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "ec43b53e8e015cdabfd3ad877b3c28e5",
  "translation_date": "2025-10-23T20:43:24+00:00",
  "source_file": "2-js-basics/2-functions-methods/README.md",
  "language_code": "th"
}
-->
# พื้นฐาน JavaScript: เมธอดและฟังก์ชัน

![พื้นฐาน JavaScript - ฟังก์ชัน](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.th.png)
> ภาพสเก็ตโน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac)

## แบบทดสอบก่อนเรียน
[แบบทดสอบก่อนเรียน](https://ff-quizzes.netlify.app)

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

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

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

[![เมธอดและฟังก์ชัน](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "เมธอดและฟังก์ชัน")

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

> คุณสามารถเรียนบทเรียนนี้ได้ที่ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!

## ฟังก์ชัน

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

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

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

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

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

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

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

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

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

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

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

```javascript
// calling our function
displayGreeting();
```

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

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

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

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

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

ฟังก์ชัน `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');
// displays "Hello, Christopher!" when run
```

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

## ค่าเริ่มต้น

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

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

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

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

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

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

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

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

## ค่ารีเทิร์น

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

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

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

```javascript
return myVariable;
```

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

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

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

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

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

```javascript
const greetingMessage = createGreetingMessage('Christopher');
```

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

```javascript
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](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่

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