<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "90a3c32c3377f83ab750c2447c77ab98",
  "translation_date": "2025-10-23T20:44:55+00:00",
  "source_file": "2-js-basics/3-making-decisions/README.md",
  "language_code": "th"
}
-->
# พื้นฐาน JavaScript: การตัดสินใจ

![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.th.png)

> ภาพสเก็ตโน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac)

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

เช่นเดียวกับเครื่อง Analytical Engine ของ Charles Babbage ที่ถูกออกแบบมาให้ทำงานตามลำดับของการดำเนินการที่แตกต่างกันตามเงื่อนไข โปรแกรม JavaScript สมัยใหม่ก็ต้องการความสามารถในการเลือกทางตามสถานการณ์ที่เปลี่ยนแปลง ความสามารถในการแยกและตัดสินใจนี้คือสิ่งที่เปลี่ยนโค้ดที่นิ่งเฉยให้กลายเป็นแอปพลิเคชันที่ตอบสนองและฉลาด

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

## แบบทดสอบก่อนเรียน

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

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

[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")

> 🎥 คลิกที่ภาพด้านบนเพื่อดูวิดีโอเกี่ยวกับการตัดสินใจ

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

## ทบทวนเรื่องบูลีนอย่างย่อ

ก่อนที่จะสำรวจการตัดสินใจ ลองมาทบทวนค่าบูลีนจากบทเรียนก่อนหน้านี้กัน ค่าบูลีนตั้งชื่อตามนักคณิตศาสตร์ George Boole ซึ่งค่าบูลีนแสดงถึงสถานะสองแบบ – `true` หรือ `false` ไม่มีความคลุมเครือ ไม่มีพื้นที่ตรงกลาง

ค่าบูลีนเหล่านี้เป็นพื้นฐานของตรรกะการคำนวณทั้งหมด ทุกการตัดสินใจที่โปรแกรมของคุณทำในที่สุดจะลดลงเหลือการประเมินค่าบูลีน

การสร้างตัวแปรบูลีนทำได้ง่าย:

```javascript
let myTrueBool = true;
let myFalseBool = false;
```

นี่คือการสร้างตัวแปรสองตัวที่มีค่าบูลีนที่ชัดเจน

✅ ค่าบูลีนตั้งชื่อตาม George Boole นักคณิตศาสตร์ นักปรัชญา และนักตรรกศาสตร์ชาวอังกฤษ (1815–1864)

## ตัวดำเนินการเปรียบเทียบและค่าบูลีน

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

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

| สัญลักษณ์ | คำอธิบาย                                                                                                                                                   | ตัวอย่าง            |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `<`        | **น้อยกว่า**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน `true` หากค่าด้านซ้ายมีค่าน้อยกว่าด้านขวา                                                              | `5 < 6 // true`      |
| `<=`       | **น้อยกว่าหรือเท่ากับ**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน `true` หากค่าด้านซ้ายมีค่าน้อยกว่าหรือเท่ากับด้านขวา                                       | `5 <= 6 // true`     |
| `>`        | **มากกว่า**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน `true` หากค่าด้านซ้ายมีค่ามากกว่าด้านขวา                                                                | `5 > 6 // false`     |
| `>=`       | **มากกว่าหรือเท่ากับ**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน `true` หากค่าด้านซ้ายมีค่ามากกว่าหรือเท่ากับด้านขวา                                         | `5 >= 6 // false`    |
| `===`      | **เท่ากันแบบเคร่งครัด**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีน `true` หากค่าด้านขวาและด้านซ้ายเท่ากัน **และ** เป็นประเภทข้อมูลเดียวกัน                   | `5 === 6 // false`   |
| `!==`      | **ไม่เท่ากัน**: เปรียบเทียบค่าทั้งสองและคืนค่าบูลีนตรงข้ามกับที่ตัวดำเนินการเท่ากันแบบเคร่งครัดจะคืนค่า                                                  | `5 !== 6 // true`    |

✅ ทดสอบความรู้ของคุณโดยการเขียนการเปรียบเทียบในคอนโซลของเบราว์เซอร์ มีข้อมูลที่คืนค่ามาอันไหนที่ทำให้คุณประหลาดใจหรือไม่?

## คำสั่ง If

คำสั่ง `if` เหมือนกับการตั้งคำถามในโค้ดของคุณ "ถ้าเงื่อนไขนี้เป็นจริง ให้ทำสิ่งนี้" มันอาจเป็นเครื่องมือที่สำคัญที่สุดที่คุณจะใช้ในการตัดสินใจใน JavaScript

นี่คือวิธีการทำงาน:

```javascript
if (condition) {
  // Condition is true. Code in this block will run.
}
```

เงื่อนไขจะอยู่ในวงเล็บ และถ้ามันเป็น `true` JavaScript จะรันโค้ดในวงเล็บปีกกา ถ้ามันเป็น `false` JavaScript จะข้ามบล็อกนั้นไป

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

```javascript
let currentMoney = 1000;
let laptopPrice = 800;

if (currentMoney >= laptopPrice) {
  // Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
}
```

เนื่องจาก `1000 >= 800` ประเมินค่าเป็น `true` โค้ดในบล็อกจึงถูกดำเนินการ โดยจะแสดงข้อความ "Getting a new laptop!" ในคอนโซล

## คำสั่ง If..Else

แต่ถ้าคุณต้องการให้โปรแกรมของคุณทำสิ่งอื่นเมื่อเงื่อนไขเป็นเท็จล่ะ? นั่นคือที่มาของ `else` – มันเหมือนกับการมีแผนสำรอง

คำสั่ง `else` ให้คุณสามารถบอกว่า "ถ้าเงื่อนไขนี้ไม่เป็นจริง ให้ทำสิ่งอื่นแทน"

```javascript
let currentMoney = 500;
let laptopPrice = 800;

if (currentMoney >= laptopPrice) {
  // Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  // Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}
```

ตอนนี้เนื่องจาก `500 >= 800` เป็น `false` JavaScript จะข้ามบล็อกแรกและรันบล็อก `else` แทน คุณจะเห็นข้อความ "Can't afford a new laptop, yet!" ในคอนโซล

✅ ทดสอบความเข้าใจของคุณเกี่ยวกับโค้ดนี้และโค้ดต่อไปนี้โดยการรันในคอนโซลของเบราว์เซอร์ เปลี่ยนค่าของตัวแปร currentMoney และ laptopPrice เพื่อเปลี่ยนค่าที่คืนใน `console.log()`

## คำสั่ง Switch

บางครั้งคุณจำเป็นต้องเปรียบเทียบค่าหนึ่งกับตัวเลือกหลายตัว แม้ว่าคุณจะสามารถเชื่อมโยงคำสั่ง `if..else` หลายตัวได้ แต่แนวทางนี้อาจทำให้โค้ดดูยุ่งยาก คำสั่ง `switch` ให้โครงสร้างที่สะอาดกว่าในการจัดการค่าที่แตกต่างกันหลายค่า

แนวคิดนี้คล้ายกับระบบสวิตช์กลไกที่ใช้ในระบบแลกเปลี่ยนโทรศัพท์ในยุคแรก – ค่าป้อนเข้าหนึ่งค่าจะกำหนดเส้นทางการทำงานเฉพาะที่ต้องดำเนินการ

```javascript
switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}
```

นี่คือโครงสร้างของมัน:
- JavaScript จะประเมินนิพจน์เพียงครั้งเดียว
- มันจะดูแต่ละ `case` เพื่อหาค่าที่ตรงกัน
- เมื่อพบค่าที่ตรงกัน มันจะรันโค้ดในบล็อกนั้น
- คำสั่ง `break` จะบอก JavaScript ให้หยุดและออกจาก switch
- หากไม่มี case ใดตรงกัน มันจะรันบล็อก `default` (ถ้าคุณมี)

```javascript
// Program using switch statement for day of week
let dayNumber = 2;
let dayName;

switch (dayNumber) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  default:
    dayName = "Unknown day";
    break;
}
console.log(`Today is ${dayName}`);
```

ในตัวอย่างนี้ JavaScript เห็นว่า `dayNumber` เป็น `2` พบ `case 2` ที่ตรงกัน ตั้งค่า `dayName` เป็น "Tuesday" และจากนั้นก็ออกจาก switch ผลลัพธ์คือ "Today is Tuesday" ถูกแสดงในคอนโซล

✅ ทดสอบความเข้าใจของคุณเกี่ยวกับโค้ดนี้และโค้ดต่อไปนี้โดยการรันในคอนโซลของเบราว์เซอร์ เปลี่ยนค่าของตัวแปร a เพื่อเปลี่ยนค่าที่คืนใน `console.log()`

## ตัวดำเนินการทางตรรกะและค่าบูลีน

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

ตัวดำเนินการเหล่านี้ช่วยให้คุณสร้างตรรกะเงื่อนไขที่ซับซ้อนโดยการรวมการประเมิน true/false แบบง่าย ๆ

| สัญลักษณ์ | คำอธิบาย                                                                                     | ตัวอย่าง                                                                 |
| ---------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| `&&`       | **AND ทางตรรกะ**: เปรียบเทียบการแสดงออกทางบูลีนสองตัว คืนค่า true **เฉพาะเมื่อ** ทั้งสองด้านเป็น true | `(5 > 3) && (5 < 10) // ทั้งสองด้านเป็น true คืนค่า true` |
| `\|\|`     | **OR ทางตรรกะ**: เปรียบเทียบการแสดงออกทางบูลีนสองตัว คืนค่า true หากมีอย่างน้อยหนึ่งด้านเป็น true     | `(5 > 10) \|\| (5 < 10) // ด้านหนึ่งเป็น false อีกด้านเป็น true คืนค่า true` |
| `!`        | **NOT ทางตรรกะ**: คืนค่าตรงข้ามของการแสดงออกทางบูลีน                             | `!(5 > 10) // 5 ไม่มากกว่า 10 ดังนั้น "!" ทำให้เป็น true`         |

ตัวดำเนินการเหล่านี้ช่วยให้คุณรวมเงื่อนไขในรูปแบบที่มีประโยชน์:
- AND (`&&`) หมายถึงเงื่อนไขทั้งสองต้องเป็นจริง
- OR (`||`) หมายถึงอย่างน้อยหนึ่งเงื่อนไขต้องเป็นจริง  
- NOT (`!`) เปลี่ยน true เป็น false (และในทางกลับกัน)

## เงื่อนไขและการตัดสินใจด้วยตัวดำเนินการทางตรรกะ

ลองดูตัวดำเนินการทางตรรกะเหล่านี้ในตัวอย่างที่สมจริง:

```javascript
let currentMoney = 600;
let laptopPrice = 800;
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Laptop price at 20 percent off

if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
  // Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  // Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}
```

ในตัวอย่างนี้: เราคำนวณราคาส่วนลด 20% (640) จากนั้นประเมินว่าเงินที่เรามีอยู่ครอบคลุมทั้งราคาปกติ **หรือ** ราคาส่วนลดหรือไม่ เนื่องจาก 600 ครอบคลุมราคาส่วนลดที่ 640 เงื่อนไขจึงประเมินค่าเป็น true

### ตัวดำเนินการปฏิเสธ

บางครั้งมันง่ายกว่าที่จะคิดเกี่ยวกับสิ่งที่ **ไม่** เป็นจริง เช่น แทนที่จะถามว่า "ผู้ใช้เข้าสู่ระบบหรือยัง?" คุณอาจต้องการถามว่า "ผู้ใช้ **ยังไม่ได้** เข้าสู่ระบบหรือเปล่า?" ตัวดำเนินการเครื่องหมายอัศเจรีย์ (`!`) จะช่วยพลิกตรรกะให้คุณ

```javascript
if (!condition) {
  // runs if condition is false
} else {
  // runs if condition is true
}
```

ตัวดำเนินการ `!` เหมือนกับการพูดว่า "ตรงข้ามกับ..." – ถ้าบางสิ่งเป็น `true` `!` จะทำให้มันเป็น `false` และในทางกลับกัน

### นิพจน์แบบ Ternary

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

```javascript
let variable = condition ? returnThisIfTrue : returnThisIfFalse;
```

มันอ่านเหมือนคำถาม: "เงื่อนไขนี้เป็นจริงหรือไม่? ถ้าใช่ ใช้ค่านี้ ถ้าไม่ ใช้ค่านั้น"

ด้านล่างคือตัวอย่างที่จับต้องได้มากขึ้น:

```javascript
let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
```

✅ ใช้เวลาสักครู่เพื่ออ่านโค้ดนี้หลายครั้ง คุณเข้าใจวิธีการทำงานของตัวดำเนินการเหล่านี้หรือไม่?

นี่คือสิ่งที่บรรทัดนี้กำลังพูดว่า: "ตัวเลขแรก (`firstNumber`) มากกว่าตัวเลขที่สอง (`secondNumber`) หรือไม่? ถ้าใช่ ใส่ `firstNumber` ใน `biggestNumber` ถ้าไม่ ใส่ `secondNumber` ใน `biggestNumber`"

ตัวดำเนินการ ternary เป็นเพียงวิธีที่สั้นกว่าในการเขียนคำสั่ง `if..else` แบบดั้งเดิม:

```javascript
let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}
```

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

---

## 🚀 ความท้าทาย

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

---

## ความท้าทาย GitHub Copilot Agent 🚀

ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้:

**คำอธิบาย:** สร้างโปรแกรมคำนวณเกรดที่ครอบคลุมซึ่งแสดงแนวคิดการตัดสินใจหลายอย่างจากบทเรียนนี้ รวมถึงคำสั่ง if-else, switch, ตัวดำเนินการทางตรรกะ และนิพจน์ ternary

**คำสั่ง:** เขียนโปรแกรม JavaScript ที่รับคะแนนตัวเลขของนักเรียน (0-100) และกำหนดเกรดตัวอักษรของพวกเขาโดยใช้เกณฑ์ต่อไปนี้:
- A: 90-100
- B: 80-89  
- C: 70-79
- D: 60-69
- F: ต่ำกว่า 60

ข้อกำหนด:
1. ใช้คำสั่ง if-else เพื่อกำหนดเกรดตัวอักษร
2. ใช้ตัวดำเนินการทางตรรกะเพื่อตรวจสอบว่านักเรียนผ่าน (เกรด >= 60) **และ** ได้เกียรตินิยม (เกรด >= 90)
3. ใช้คำสั่ง switch เพื่อให้ข้อเสนอแนะเฉพาะสำหรับแต่ละเกรดตัวอักษร
4. ใช้ตัวดำเนินการ ternary เพื่อกำหนดว่านักเรียนมีสิทธิ์เรียนหลักสูตรถัดไปหรือไม่ (เกรด >= 70)
5. รวมการตรวจสอบข้อมูลเพื่อให้แน่ใจว่าคะแนนอยู่ระหว่าง 0 ถึง 100

ทดสอบโปรแกรมของคุณด้วยคะแนนต่าง ๆ รวมถึงกรณีขอบเช่น 59, 60, 89, 90 และข้อมูลที่ไม่ถูกต้อง

เรียนรู้เพิ่มเติมเกี่ยวกับ [โหมด Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่

## แบบทดสอบหลังเรียน

[แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app/web/quiz/12)

## ทบทวนและศึกษาด้วยตัวเอง

อ่านเพิ่มเติมเกี่ยวกับตัวดำเนินการที่มีให้ผู้ใช้ [บน MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)

ลองดู [operator lookup](https://joshwcomeau.com/operator-lookup/) ที่ยอดเยี่ยมของ Josh Comeau!

## งานที่ได้รับมอบหมาย

[Operators](assignment.md)

---

**ข้อจำกัดความรับผิดชอบ**:  
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้