# พื้นฐาน JavaScript: การตัดสินใจ ![JavaScript Basics - Making decisions](../../../../translated_images/th/webdev101-js-decisions.69e1b20f272dd1f0.webp) > สเก็ตช์โน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title การผจญภัยในการตัดสินใจด้วย JavaScript ของคุณ section พื้นฐาน ค่า Boolean: 5: You ตัวดำเนินการเปรียบเทียบ: 4: You การคิดเชิงตรรกะ: 5: You section การตัดสินใจพื้นฐาน คำสั่ง If: 4: You ตรรกะ If-Else: 5: You คำสั่ง Switch: 4: You section ตรรกะขั้นสูง ตัวดำเนินการทางตรรกะ: 5: You เงื่อนไขซับซ้อน: 4: You นิพจน์แบบ Ternary: 5: You ``` คุณเคยสงสัยไหมว่าแอปพลิเคชันทำไมถึงตัดสินใจได้อย่างชาญฉลาด? เช่น ระบบนำทางเลือกเส้นทางที่เร็วที่สุดอย่างไร หรือเทอร์โมสตัทตัดสินใจเปิดความร้อนไปเมื่อไหร่? นี่คือแนวคิดพื้นฐานของการตัดสินใจในการเขียนโปรแกรม เช่นเดียวกับที่เครื่องมือวิเคราะห์ของ 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)! ```mermaid mindmap root((การตัดสินใจ)) Boolean Logic จริง/เท็จ ผลการเปรียบเทียบ นิพจน์ตรรกะ Conditional Statements if statements เงื่อนไขเดียว การทำงานของโค้ด if-else สองทางเลือก การกระทำทางเลือก switch ตัวเลือกหลายตัว โครงสร้างที่ชัดเจน Operators Comparison === !== < > <= >= ความสัมพันธ์ของค่า Logical && || ! รวมเงื่อนไข Advanced Patterns Ternary ? : ไวยากรณ์ การตัดสินใจแบบบรรทัดเดียว Complex Logic เงื่อนไขซ้อน หลายเกณฑ์ ``` ## ทบทวนย่อ ๆ เกี่ยวกับบูลีน ก่อนที่จะสำรวจการตัดสินใจ มาทบทวนค่าบูลีนที่เรียนมาก่อนหน้านี้ ชื่อค่าบูลีนตั้งตามนักคณิตศาสตร์ 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` | ✅ ตรวจสอบความเข้าใจโดยการเขียนการเปรียบเทียบบางอย่างในคอนโซลของเบราว์เซอร์ คุณพบค่าที่แปลกใจไหม? ```mermaid flowchart LR A["🔢 ค่าต่างๆ"] --> B["⚖️ การเปรียบเทียบ"] B --> C["✅ ผลลัพธ์บูลีน"] D["5"] --> E["< 6"] E --> F["จริง"] G["10"] --> H["=== '10'"] H --> I["เท็จ"] J["'สวัสดี'"] --> K["!== 'โลก'"] K --> L["จริง"] M["📋 ประเภทตัวดำเนินการ"] --> M1["ความเท่าเทียม: === !=="] M --> M2["ความสัมพันธ์: < > <= >="] M --> M3["เข้มงวด vs หลวม"] style A fill:#e3f2fd style C fill:#e8f5e8 style M fill:#fff3e0 ``` ### 🧠 **ทดสอบความชำนาญการเปรียบเทียบ: เข้าใจตรรกะบูลีน** **ทดสอบความเข้าใจของคุณเกี่ยวกับการเปรียบเทียบ:** - ทำไมถึงนิยมใช้ `===` (เท่ากันอย่างเคร่งครัด) มากกว่า `==` (เท่ากันแบบหย่อนยาน)? - คุณคาดเดาได้ไหมว่า `5 === '5'` จะให้ค่าอะไร? แล้ว `5 == '5'` ล่ะ? - ความแตกต่างระหว่าง `!==` กับ `!=` คืออะไร? ```mermaid stateDiagram-v2 [*] --> Comparison: ค่าทั้งสอง Comparison --> StrictEqual: === หรือ !== Comparison --> Relational: < > <= >= StrictEqual --> TypeCheck: ตรวจสอบประเภทและค่า Relational --> NumberCompare: แปลงเป็นตัวเลข TypeCheck --> BooleanResult: จริง หรือ เท็จ NumberCompare --> BooleanResult note right of StrictEqual วิธีที่แนะนำ ไม่มีการแปลงประเภท end note note right of Relational มีประโยชน์สำหรับช่วง การเปรียบเทียบตัวเลข end note ``` > **เคล็ดลับมือโปร**: ใช้ `===` และ `!==` เสมอสำหรับตรวจสอบความเท่าเทียมเว้นแต่คุณจะต้องการการแปลงชนิดข้อมูลโดยเฉพาะ เพื่อป้องกันพฤติกรรมที่ไม่คาดคิด! ## คำสั่ง If คำสั่ง `if` เปรียบเสมือนการถามคำถามในโค้ดของคุณ "ถ้าเงื่อนไขนี้เป็นจริง ให้ทำสิ่งนี้" เป็นเครื่องมือที่สำคัญที่สุดที่คุณจะใช้ในการตัดสินใจใน JavaScript วิธีการทำงานคือ: ```javascript if (condition) { // เงื่อนไขเป็นจริง โค้ดในบล็อกนี้จะทำงาน } ``` เงื่อนไขจะอยู่ในวงเล็บ และถ้าเป็น `true` JavaScript จะรันโค้ดในวงเล็บปีกกานั้น ถ้าเป็น `false` JavaScript จะข้ามบล็อกนั้นไปเลย คุณจะใช้ตัวดำเนินการเปรียบเทียบเพื่อสร้างเงื่อนไขเหล่านี้ ดูตัวอย่างใช้งานจริงด้านล่าง: ```javascript let currentMoney = 1000; let laptopPrice = 800; if (currentMoney >= laptopPrice) { // เงื่อนไขเป็นจริง โค้ดในบล็อกนี้จะทำงาน. console.log("Getting a new laptop!"); } ``` เนื่องจาก `1000 >= 800` ประเมินเป็น `true` โค้ดในบล็อกจะรันแสดงผล "Getting a new laptop!" ในคอนโซล ```mermaid flowchart TD A["🚀 เริ่มโปรแกรม"] --> B{"💰 currentMoney >= laptopPrice?"} B -->|true| C["🎉 'กำลังจะได้แล็ปท็อปใหม่!'"] B -->|false| D["⏭️ ข้ามบล็อกโค้ด"] C --> E["📋 ดำเนินโปรแกรมต่อ"] D --> E F["📊 โครงสร้างคำสั่ง If"] --> F1["if (condition) {"] F1 --> F2[" // โค้ดที่จะรันถ้าเป็นจริง"] F2 --> F3["}"] style B fill:#fff3e0 style C fill:#e8f5e8 style D fill:#ffebee style F fill:#e3f2fd ``` ## คำสั่ง If..Else แต่ถ้าคุณอยากให้โปรแกรมทำอย่างอื่นเมื่อเงื่อนไขเป็นเท็จล่ะ? นี่คือที่มาของ `else` – เหมือนมีแผนสำรอง คำสั่ง `else` ให้คุณบอกว่า "ถ้าเงื่อนไขนี้ไม่เป็นจริง ให้ทำอย่างอื่นแทน" ```javascript let currentMoney = 500; let laptopPrice = 800; if (currentMoney >= laptopPrice) { // เงื่อนไขเป็นจริง โค้ดในบล็อกนี้จะทำงาน console.log("Getting a new laptop!"); } else { // เงื่อนไขเป็นเท็จ โค้ดในบล็อกนี้จะทำงาน 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()` ### 🎯 **ตรวจสอบตรรกะ If-Else: เส้นทางแยก** **ประเมินความเข้าใจตรรกะเชิงเงื่อนไขของคุณ:** - จะเกิดอะไรขึ้นถ้า `currentMoney` เท่ากับ `laptopPrice` พอดี? - คุณคิดสถานการณ์จริงที่ตรรกะ if-else จะมีประโยชน์ไหม? - คุณจะขยายตรรกะนี้อย่างไรเพื่อจัดการช่วงราคาหลายระดับ? ```mermaid flowchart TD A["🔍 ประเมินเงื่อนไข"] --> B{"เงื่อนไขเป็นจริง?"} B -->|ใช่| C["📤 รันบล็อก IF"] B -->|ไม่ใช่| D["📥 รันบล็อก ELSE"] C --> E["✅ เลือกเส้นทางเดียว"] D --> E F["🌐 ตัวอย่างในโลกความเป็นจริง"] --> F1["สถานะการเข้าสู่ระบบของผู้ใช้"] F --> F2["การยืนยันอายุ"] F --> F3["การตรวจสอบแบบฟอร์ม"] F --> F4["การเปลี่ยนสถานะเกม"] style B fill:#fff3e0 style C fill:#e8f5e8 style D fill:#e3f2fd style F fill:#f3e5f5 ``` > **ข้อสังเกตสำคัญ**: if-else ทำให้แน่ใจว่าจะมีเส้นทางเดียวที่ถูกเลือก วิธีนี้รับประกันว่าโปรแกรมของคุณจะมีการตอบสนองต่อทุกเงื่อนไขเสมอ! ## คำสั่ง Switch บางครั้งคุณอาจต้องเปรียบเทียบค่าหนึ่งกับตัวเลือกหลายค่า แม้ว่าจะใช้ if..else หลาย ๆ บรรทัดได้ แต่วิธีนั้นจะยุ่งยาก คำสั่ง `switch` จึงเป็นโครงสร้างที่สะอาดกว่าในการจัดการค่าหลายค่าแยกกัน แนวคิดคล้ายกับระบบสวิตช์เชิงกลที่ใช้ในสถานีโทรศัพท์สมัยก่อน – ค่าอินพุตตัวเดียวกำหนดเส้นทางที่การทำงานจะไป ```javascript switch (expression) { case x: // บล็อกโค้ด break; case y: // บล็อกโค้ด break; default: // บล็อกโค้ด } ``` นี่คือโครงสร้าง: - JavaScript ประเมินนิพจน์ครั้งเดียว - ตรวจสอบแต่ละกรณี `case` เพื่อหาตรงกัน - เมื่อเจอตรงกัน จะรันโค้ดในบล็อกนั้น - `break` บอกให้ JavaScript หยุดและออกจาก switch - หากไม่มีกรณีใดตรงกัน จะรันบล็อก `default` (ถ้ามี) ```javascript // โปรแกรมที่ใช้คำสั่งสวิตช์สำหรับวันในสัปดาห์ 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" แสดงในคอนโซล ```mermaid flowchart TD A["📥 switch(นิพจน์)"] --> B["🔍 ประเมินค่าเพียงครั้งเดียว"] B --> C{"ตรงกับเคส 1?"} C -->|ใช่| D["📋 ดำเนินการเคส 1"] C -->|ไม่ใช่| E{"ตรงกับเคส 2?"} E -->|ใช่| F["📋 ดำเนินการเคส 2"] E -->|ไม่ใช่| G{"ตรงกับเคส 3?"} G -->|ใช่| H["📋 ดำเนินการเคส 3"] G -->|ไม่ใช่| I["📋 ดำเนินการดีฟอลต์"] D --> J["🛑 หยุด"] F --> K["🛑 หยุด"] H --> L["🛑 หยุด"] J --> M["✅ ออกจากสวิตช์"] K --> M L --> M I --> M style A fill:#e3f2fd style B fill:#fff3e0 style M fill:#e8f5e8 ``` ✅ ทดสอบความเข้าใจโค้ดนี้และถัดไปด้วยการรันในคอนโซลเบราว์เซอร์ เปลี่ยนค่าตัวแปร a เพื่อดูผลลัพธ์ใน `console.log()` ### 🔄 **ทดสอบความชำนาญคำสั่ง Switch: ตัวเลือกหลายทาง** **ลองทดสอบความเข้าใจ switch:** - จะเกิดอะไรขึ้นถ้าคุณลืมใส่คำสั่ง `break`? - คุณจะเลือกใช้ `switch` แทน if-else หลาย ๆ ครั้งเมื่อไหร่? - ทำไมถึงต้องมีกรณี `default` ถึงแม้ว่าคุณคิดว่าครอบคลุมทุกกรณีแล้ว? ```mermaid pie title "เมื่อใดควรใช้โครงสร้างตัดสินใจแต่ละแบบ" "ถ้า-อื่นๆ ง่ายๆ" : 40 "โครงสร้างถ้า-อื่นๆ แบบซับซ้อน" : 25 "คำสั่งสวิตช์" : 20 "ตัวดำเนินการเทอร์นารี" : 15 ``` > **แนวทางปฏิบัติที่ดีที่สุด**: ใช้ `switch` เมื่อเปรียบเทียบตัวแปรหนึ่งกับค่าหลายค่าเฉพาะ ใช้ if-else สำหรับการตรวจสอบช่วงค่าหรือเงื่อนไขซับซ้อน! ## ตัวดำเนินการตรรกะและบูลีน การตัดสินใจที่ซับซ้อนมักต้องประเมินหลายเงื่อนไขพร้อมกัน เช่นเดียวกับพีชคณิตบูลีนที่ให้นักคณิตศาสตร์รวมเชิงตรรกะต่าง ๆ การเขียนโปรแกรมมีตัวดำเนินการตรรกะที่เชื่อมเงื่อนไขบูลีนหลาย ๆ เงื่อนไขเข้าด้วยกัน ตัวดำเนินการเหล่านี้ช่วยให้ตรรกะเชิงเงื่อนไขซับซ้อนโดยรวมการประเมิน true/false อย่างง่ายได้ | สัญลักษณ์ | คำอธิบาย | ตัวอย่าง | | ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | `&&` | **ตรรกะ AND**: เปรียบเทียบสองนิพจน์บูลีน คืนค่า true **ก็ต่อเมื่อ** ทั้งสองฝั่งเป็น true | `(5 > 3) && (5 < 10) // ทั้งสองฝั่งเป็นจริง คืนค่า true` | | `\|\|` | **ตรรกะ OR**: เปรียบเทียบสองนิพจน์บูลีน คืนค่า true ถ้ามีฝั่งใดฝั่งหนึ่งเป็นจริง | `(5 > 10) \|\| (5 < 10) // ฝั่งหนึ่งเป็นเท็จ อีกฝั่งเป็นจริง คืนค่า true` | | `!` | **ตรรกะ NOT**: คืนค่าตรงข้ามของนิพจน์บูลีน | `!(5 > 10) // 5 ไม่มากกว่า 10 ดังนั้น "!" ทำให้เป็น true` | ตัวดำเนินการเหล่านี้ช่วยให้คุณรวมเงื่อนไขในแบบมีประโยชน์: - AND (`&&`) หมายความว่าเงื่อนไขทั้งสองต้องเป็นจริง - OR (`||`) หมายความว่ามีเงื่อนไขหนึ่งอย่างน้อยต้องเป็นจริง - NOT (`!`) เปลี่ยนค่า true เป็น false (และในทางกลับกัน) ```mermaid flowchart LR A["🔗 ตัวดำเนินการตรรกะ"] --> B["&& และ"] A --> C["|| หรือ"] A --> D["! ไม่"] B --> B1["ทั้งคู่ต้องเป็นจริง"] B --> B2["จริง && จริง = จริง"] B --> B3["จริง && เท็จ = เท็จ"] C --> C1["อย่างน้อยหนึ่งเป็นจริง"] C --> C2["จริง || เท็จ = จริง"] C --> C3["เท็จ || เท็จ = เท็จ"] D --> D1["กลับค่าของค่า"] D --> D2["!จริง = เท็จ"] D --> D3["!เท็จ = จริง"] E["🌍 ตัวอย่างจริง"] --> E1["อายุ >= 18 && มีใบอนุญาต"] E --> E2["เป็นวันหยุดสุดสัปดาห์ || เป็นวันหยุดราชการ"] E --> E3["!ยังไม่ได้เข้าสู่ระบบ"] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` ## เงื่อนไขและการตัดสินใจกับตัวดำเนินการตรรกะ มาดูตัวดำเนินการตรรกะนี้ในตัวอย่างที่สมจริงมากขึ้น: ```javascript let currentMoney = 600; let laptopPrice = 800; let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // ราคาคอมพิวเตอร์โน้ตบุ๊คลด 20 เปอร์เซ็นต์ if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) { // เงื่อนไขเป็นจริง โค้ดในบล็อกนี้จะทำงาน console.log("Getting a new laptop!"); } else { // เงื่อนไขเป็นเท็จ โค้ดในบล็อกนี้จะทำงาน console.log("Can't afford a new laptop, yet!"); } ``` ในตัวอย่างนี้: เราคำนวณราคาลด 20% (640) แล้วประเมินว่ากองทุนของเราครอบคลุมราคาทั้งหมด OR ราคาลดหรือไม่ เนื่องจาก 600 ไม่ถึงเกณฑ์ราคาลด 640 เงื่อนไขประเมินเป็น false ### 🧮 **ตรวจสอบตัวดำเนินการตรรกะ: การรวมเงื่อนไข** **ทดสอบความเข้าใจตัวดำเนินการตรรกะ:** - ในนิพจน์ `A && B` เกิดอะไรขึ้นถ้า A เป็นเท็จ? B จะถูกประเมินไหม? - คุณนึกสถานการณ์ที่ต้องใช้ตัวดำเนินการทั้งสาม (`&&`, `||`, `!`) พร้อมกันได้ไหม? - ความแตกต่างระหว่าง `!user.isActive` กับ `user.isActive !== true` คืออะไร? ```mermaid stateDiagram-v2 [*] --> EvaluateA: A && B EvaluateA --> CheckB: A เป็นจริง EvaluateA --> ReturnFalse: A เป็นเท็จ CheckB --> ReturnTrue: B เป็นจริง CheckB --> ReturnFalse: B เป็นเท็จ [*] --> EvaluateC: A || B EvaluateC --> ReturnTrue: A เป็นจริง EvaluateC --> CheckD: A เป็นเท็จ CheckD --> ReturnTrue: B เป็นจริง CheckD --> ReturnFalse: B เป็นเท็จ note right of EvaluateA การประเมินแบบ short-circuit: ถ้า A เป็นเท็จ จะไม่ตรวจสอบ B end note ``` > **เคล็ดลับประสิทธิภาพ**: JavaScript ใช้ "การประเมินแบบสั้น" – ใน `A && B` ถ้า A เป็นเท็จ B จะไม่ถูกประเมิน ใช้จุดนี้ให้เป็นประโยชน์! ### ตัวดำเนินการปฏิเสธ (Negation) บางครั้งง่ายกว่าที่จะคิดว่าเมื่อไรบางอย่างไม่ใช่ความจริง เช่นแทนที่จะถามว่า "ผู้ใช้เข้าสู่ระบบหรือไม่?" คุณอาจจะถามว่า "ผู้ใช้ยังไม่ได้เข้าสู่ระบบหรือเปล่า?" เครื่องหมายตกใจ (`!`) จะเปลี่ยนตรรกะให้คุณ ```javascript if (!condition) { // ทำงานถ้าสภาวะเป็นเท็จ } else { // ทำงานถ้าสภาวะเป็นจริง } ``` ตัวดำเนินการ `!` เปรียบเสมือนพูดว่า "ตรงข้ามกับ..." – ถ้าบางอย่างเป็น `true` ตัว `!` จะทำให้เป็น `false` และในทางกลับกัน ### นิพจน์เทอร์นารี (Ternary Expressions) สำหรับการกำหนดเงื่อนไขอย่างง่าย JavaScript มี **ตัวดำเนินการเทอร์นารี** ไวยากรณ์นี้กระทัดรัดช่วยให้เขียนนิพจน์เงื่อนไขในบรรทัดเดียว เหมาะสำหรับการกำหนดค่าหนึ่งในสองค่าโดยขึ้นกับเงื่อนไข ```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`" ตัวดำเนินการเทอร์นารีเป็นวิธีสั้น ๆ ในการเขียนคำสั่ง `if..else` แบบดั้งเดิมนี้: ```javascript let biggestNumber; if (firstNumber > secondNumber) { biggestNumber = firstNumber; } else { biggestNumber = secondNumber; } ``` ทั้งสองวิธีให้ผลลัพธ์เหมือนกัน ตัวดำเนินการเทอร์นารีกระชับกว่า ในขณะที่โครงสร้าง if-else แบบดั้งเดิมอ่านง่ายกว่าในกรณีเงื่อนไขซับซ้อน ```mermaid flowchart LR A["🤔 ตัวดำเนินการแบบเทอร์นารี"] --> B["เงื่อนไข ?"] B --> C["ค่าถ้าจริง :"] C --> D["ค่าถ้าผิด"] E["📝 if-else แบบดั้งเดิม"] --> F["if (เงื่อนไข) {"] F --> G[" return ค่าถ้าจริง"] G --> H["} else {"] H --> I[" return ค่าถ้าผิด"] I --> J["}"] K["⚡ เมื่อไหร่ควรใช้"] --> K1["การกำหนดค่าที่ง่าย"] K --> K2["เงื่อนไขที่สั้น"] K --> K3["การตัดสินใจแบบบรรทัดเดียว"] K --> K4["คำสั่ง return"] style A fill:#e3f2fd style E fill:#fff3e0 style K fill:#e8f5e8 ``` --- ## 🚀 ความท้าทาย สร้างโปรแกรมที่เขียนด้วยตัวดำเนินการตรรกะก่อน แล้วเขียนใหม่โดยใช้นิพจน์เทอร์นารี คุณชอบไวยากรณ์แบบไหนมากกว่ากัน? --- ## ความท้าทาย GitHub Copilot Agent 🚀 ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้: **คำอธิบาย:** สร้างเครื่องคำนวณเกรดอย่างครบถ้วนที่แสดงให้เห็นแนวคิดหลายอย่างของการตัดสินใจในบทเรียนนี้ รวมถึงคำสั่ง if-else, switch, ตัวดำเนินการตรรกะ และนิพจน์เทอร์นารี **คำสั่ง:** เขียนโปรแกรม JavaScript ที่รับคะแนนตัวเลขของนักเรียน (0-100) แล้วกำหนดเกรดตัวอักษรตามเกณฑ์เหล่านี้: - A: 90-100 - B: 80-89 - C: 70-79 - D: 60-69 - F: ต่ำกว่า 60 ข้อกำหนด: 1. ใช้คำสั่ง if-else เพื่อกำหนดเกรดตัวอักษร 2. ใช้ตัวดำเนินการเชิงตรรกะเพื่อตรวจสอบว่านักเรียนผ่าน (grade >= 60) และได้รับเกียรตินิยม (grade >= 90) 3. ใช้คำสั่ง switch เพื่อนำเสนอความคิดเห็นเฉพาะสำหรับแต่ละเกรดตัวอักษร 4. ใช้ตัวดำเนินการ ternary เพื่อกำหนดว่านักเรียนมีสิทธิ์เข้าเรียนหลักสูตรถัดไปหรือไม่ (grade >= 70) 5. รวมการตรวจสอบอินพุตเพื่อให้แน่ใจว่าคะแนนอยู่ระหว่าง 0 ถึง 100 ทดสอบโปรแกรมของคุณด้วยคะแนนต่างๆ รวมถึงกรณีขอบเช่น 59, 60, 89, 90, และอินพุตที่ไม่ถูกต้อง เรียนรู้เพิ่มเติมเกี่ยวกับ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ได้ที่นี่ ## Post-Lecture Quiz [Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/12) ## Review & Self Study อ่านเพิ่มเติมเกี่ยวกับตัวดำเนินการมากมายที่มีให้ผู้ใช้ [บน MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators) ลองดู [operator lookup](https://joshwcomeau.com/operator-lookup/) อันยอดเยี่ยมของ Josh Comeau! ## Assignment [Operators](assignment.md) --- ## 🧠 **สรุปชุดเครื่องมือการตัดสินใจของคุณ** ```mermaid graph TD A["🎯 การตัดสินใจใน JavaScript"] --> B["🔍 ตรรกะบูลีน"] A --> C["📊 คำสั่งเงื่อนไข"] A --> D["🔗 ตรรกะตัวดำเนินการ"] A --> E["⚡ รูปแบบขั้นสูง"] B --> B1["ค่าจริง/เท็จ"] B --> B2["ตัวดำเนินการเปรียบเทียบ"] B --> B3["แนวคิดความเป็นจริง"] C --> C1["คำสั่ง if"] C --> C2["โซ่ if-else"] C --> C3["คำสั่ง switch"] D --> D1["&& (และ)"] 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 นาทีถัดไป** - [ ] ฝึกใช้ตัวดำเนินการเปรียบเทียบในคอนโซลเบราว์เซอร์ของคุณ - [ ] เขียน if-else ง่ายๆ เพื่อตรวจสอบอายุของคุณ - [ ] ลองทำโจทย์: เขียน if-else ใหม่โดยใช้ตัวดำเนินการ ternary - [ ] ทดสอบสิ่งที่จะเกิดขึ้นกับค่าที่เป็น "truthy" และ "falsy" ต่างๆ ### 🎯 **สิ่งที่คุณทำสำเร็จได้ในหนึ่งชั่วโมงนี้** - [ ] ทำแบบทดสอบหลังบทเรียนและทบทวนแนวคิดที่สับสน - [ ] สร้างเครื่องคิดเลขเกรดแบบครบวงจรจากความท้าทาย GitHub Copilot - [ ] สร้างต้นไม้การตัดสินใจง่ายๆ สำหรับสถานการณ์จริง (เช่น เลือกเสื้อผ้าที่จะใส่) - [ ] ฝึกการรวมเงื่อนไขหลายๆ อย่างด้วยตัวดำเนินการเชิงตรรกะ - [ ] ทดลองใช้คำสั่ง switch สำหรับกรณีการใช้งานต่างๆ ### 📅 **ความชำนาญตรรกะตลอดสัปดาห์ของคุณ** - [ ] ทำงานมอบหมายเกี่ยวกับตัวดำเนินการพร้อมตัวอย่างสร้างสรรค์ - [ ] สร้างแอปทดสอบขนาดเล็กโดยใช้โครงสร้างเงื่อนไขหลากหลาย - [ ] สร้างตัวตรวจสอบฟอร์มที่เช็คหลายเงื่อนไขของอินพุต - [ ] ฝึกทำแบบฝึกหัด [operator lookup](https://joshwcomeau.com/operator-lookup/) ของ Josh Comeau - [ ] ปรับปรุงโค้ดที่มีอยู่ให้ใช้โครงสร้างเงื่อนไขที่เหมาะสมขึ้น - [ ] ศึกษาการประเมินสั้นวงจรและผลกระทบต่อประสิทธิภาพ ### 🌟 **การเปลี่ยนแปลงตลอดเดือนของคุณ** - [ ] เชี่ยวชาญเงื่อนไขซ้อนซับซ้อนและรักษาความอ่านง่ายของโค้ด - [ ] สร้างแอปที่มีตรรกะการตัดสินใจซับซ้อน - [ ] มีส่วนร่วมกับโครงการโอเพ่นซอร์สโดยปรับปรุงตรรกะเงื่อนไขในโปรเจกต์ที่มีอยู่ - [ ] สอนคนอื่นเกี่ยวกับโครงสร้างเงื่อนไขต่างๆ และเมื่อไหร่ควรใช้แต่ละแบบ - [ ] สำรวจแนวทางการเขียนโปรแกรมเชิงฟังก์ชันกับตรรกะเงื่อนไข - [ ] สร้างคู่มืออ้างอิงส่วนตัวเกี่ยวกับแนวปฏิบัติที่ดีที่สุดของเงื่อนไข ### 🏆 **เช็คอินแชมป์การตัดสินใจขั้นสุดท้าย** **ฉลองความชำนาญการคิดเชิงตรรกะของคุณ:** - ตรรกะการตัดสินใจที่ซับซ้อนที่สุดที่คุณเคยนำไปใช้ได้สำเร็จคืออะไร? - โครงสร้างเงื่อนไขไหนที่คุณรู้สึกว่าเป็นธรรมชาติมากที่สุดและเพราะเหตุใด? - การเรียนรู้เกี่ยวกับตัวดำเนินการเชิงตรรกะเปลี่ยนวิธีแก้ปัญหาของคุณอย่างไร? - แอปพลิเคชันในโลกจริงใดที่จะได้รับประโยชน์จากตรรกะการตัดสินใจที่ซับซ้อนได้บ้าง? ```mermaid journey title การพัฒนาการคิดเชิงตรรกะของคุณ section วันนี้ ความสับสนเกี่ยวกับบูลีน: 3: คุณ ความเข้าใจใน If-Else: 4: คุณ การจดจำโอเปอเรเตอร์: 5: คุณ section สัปดาห์นี้ เงื่อนไขที่ซับซ้อน: 4: คุณ ความชำนาญในการใช้ Switch: 5: คุณ การผสมผสานทางตรรกะ: 5: คุณ section เดือนหน้า รูปแบบขั้นสูง: 5: คุณ ความตระหนักถึงประสิทธิภาพ: 5: คุณ การสอนผู้อื่น: 5: คุณ ``` > 🧠 **คุณเชี่ยวชาญศิลปะการตัดสินใจในโลกดิจิทัลแล้ว!** แอปพลิเคชันเชิงโต้ตอบทุกชนิดขึ้นอยู่กับตรรกะเงื่อนไขเพื่อตอบสนองอย่างชาญฉลาดต่อการกระทำของผู้ใช้และสภาพแวดล้อมที่เปลี่ยนแปลง คุณเข้าใจแล้วว่าจะทำให้โปรแกรมของคุณคิด ประเมิน และเลือกตอบสนองอย่างเหมาะสมได้อย่างไร พื้นฐานตรรกะนี้จะขับเคลื่อนทุกแอปพลิเคชันแบบไดนามิกที่คุณสร้าง! 🎉 --- **คำปฏิเสธความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาอัตโนมัติ [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้มีความถูกต้อง โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความคลาดเคลื่อน เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่น่าเชื่อถือ สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลโดยมนุษย์มืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่อาจเกิดขึ้นจากการใช้การแปลนี้