You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
20 KiB
210 lines
20 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "b4612bbb9ace984f374fcc80e3e035ad",
|
|
"translation_date": "2025-08-26T21:43:06+00:00",
|
|
"source_file": "2-js-basics/2-functions-methods/README.md",
|
|
"language_code": "th"
|
|
}
|
|
-->
|
|
# พื้นฐาน 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) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |