Control Flow

Ternary Operator คืออะไร

Ternary Operator คือ if/else ที่เขียนในบรรทัดเดียว ใช้เมื่อต้องการเลือกค่าจากสองตัวเลือกตามเงื่อนไข รูปแบบ: condition ? valueIfTrue : valueIfFalse

// ternary
let result = condition ? valueA : valueB;

// เทียบเท่ากับ if/else
let result2;
if (condition) {
  result2 = valueA;
} else {
  result2 = valueB;
}

ตัวอย่างที่ 1 — ตรวจผ่าน/ไม่ผ่าน

let score = 75;
let status = score >= 60 ? "ผ่าน" : "ไม่ผ่าน";
console.log(status); // "ผ่าน"

let age = 15;
let label = age >= 18 ? "ผู้ใหญ่" : "เยาวชน";
console.log(label);  // "เยาวชน"

ตัวอย่างที่ 2 — คำนวณส่วนลด

let isMember = true;
let price = 1000;

let discountRate = isMember ? 0.1 : 0;        // 0.1 ถ้าเป็นสมาชิก
let finalPrice = price - price * discountRate; // 900

console.log("ราคาสุดท้าย:", finalPrice);       // 900

⚠️ ระวัง — Nested Ternary อ่านยาก

หลีกเลี่ยงการซ้อน ternary หลายชั้น เพราะอ่านยากและ debug ยาก ถ้ามีมากกว่า 2 ตัวเลือก ให้ใช้ if/else if หรือ switch แทน

// ❌ อ่านยาก
let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";

// ✅ ดีกว่า — ใช้ if/else if
let grade2;
if (score >= 90) grade2 = "A";
else if (score >= 80) grade2 = "B";
else if (score >= 70) grade2 = "C";
else grade2 = "F";

สรุป

• ternary: condition ? valueIfTrue : valueIfFalse
• ใช้เมื่อมีแค่สองตัวเลือก และเงื่อนไขสั้น อ่านออกในบรรทัดเดียว
• ผลลัพธ์ใช้เก็บในตัวแปร หรือส่งเป็นค่าได้ทันที
• หลีกเลี่ยง nested ternary — ใช้ if/else if แทน

Lab 1: ตรวจสอบส่วนลดด้วย ternary

เป้าหมาย: ฝึกใช้ ternary เพื่อเลือกค่าจากสองทางเลือกในบรรทัดเดียว มีให้แล้ว: `isMember = true` และ `price = 500` สิ่งที่ต้องทำ: สร้าง `discount` จากสถานะสมาชิก แล้วคำนวณ `finalPrice` ผลที่ควรเห็น: ได้ค่า discount = 50 และ finalPrice = 450

Lab 2: สถานะการ login

เป้าหมาย: ฝึกใช้ ternary เพื่อเลือกข้อความต้อนรับจากค่า Boolean มีให้แล้ว: `isLoggedIn = false` และ `username = "อาร์ยา"` สิ่งที่ต้องทำ: ถ้า login แล้วให้ทักชื่อผู้ใช้ ถ้ายังไม่ login ให้บอกให้เข้าสู่ระบบ ผลที่ควรเห็น: output แสดง "กรุณาเข้าสู่ระบบ"

Lab 3: สถานะผ่านหรือไม่ผ่าน

เป้าหมาย: ฝึกใช้ ternary เปรียบเทียบค่ากับเกณฑ์ผ่าน มีให้แล้ว: `score = 72` และ `passScore = 60` สิ่งที่ต้องทำ: สร้าง `status` ให้เป็น "ผ่าน" หรือ "ไม่ผ่าน" ผลที่ควรเห็น: output แสดง "ผ่าน"

Lab 4: เลือกค่าจัดส่ง

เป้าหมาย: ใช้ ternary เลือกตัวเลข แล้วนำไปคำนวณต่อ มีให้แล้ว: `orderTotal = 850` และ `freeShippingMinimum = 700` สิ่งที่ต้องทำ: สร้าง `shippingFee` จากเกณฑ์ส่งฟรี แล้วคำนวณ `finalTotal` ผลที่ควรเห็น: shippingFee = 0 และ finalTotal = 850

Lab 5: เลือก label สำหรับปุ่ม

เป้าหมาย: ฝึกใช้ ternary เลือกข้อความ UI จากสถานะเดียว มีให้แล้ว: `isSaving = false` สิ่งที่ต้องทำ: สร้าง `buttonLabel` ให้เปลี่ยนตามสถานะการบันทึก ผลที่ควรเห็น: output แสดง "บันทึก"

Lab 6: สร้างข้อความสรุปคะแนน

เป้าหมาย: ฝึกใช้ ternary สร้างค่ากลาง แล้วนำไปต่อข้อความ มีให้แล้ว: `name = "มิน"`, `score = 88`, และ `passScore = 60` สิ่งที่ต้องทำ: สร้าง `resultText` ก่อน แล้วค่อยนำไปประกอบเป็น `message` ผลที่ควรเห็น: output แสดง "มิน ได้ 88 คะแนน: ผ่าน"

Lab 7: เลือกค่าส่งด้วย ternary

เป้าหมาย: ฝึกใช้ ternary เลือกค่าตัวเลข แล้วแปลงเป็นข้อความ มีให้แล้ว: `total = 850` สิ่งที่ต้องทำ: สร้าง `deliveryFee` และต่อข้อความเป็น `message` ผลที่ควรเห็น: output แสดง "ค่าส่ง: 50 บาท"

Lab 8: เลือกชื่อที่จะแสดง

เป้าหมาย: ใช้ ternary เลือกค่าระหว่างข้อมูลสองชุด มีให้แล้ว: `nickname = ""` และ `fullName = "มินตรา"` สิ่งที่ต้องทำ: ถ้ามี nickname ให้ใช้ nickname ถ้าไม่มีให้ใช้ fullName ผลที่ควรเห็น: output แสดง "มินตรา"

Lab 9: เลือกข้อความปุ่ม

เป้าหมาย: ฝึกใช้ ternary เลือกข้อความจากสถานะที่เปลี่ยนได้ มีให้แล้ว: `isSaved = true` สิ่งที่ต้องทำ: สร้าง `buttonText` ให้สะท้อนว่าบันทึกแล้วหรือยัง ผลที่ควรเห็น: output แสดง "บันทึกแล้ว"

Lab 10: สร้างข้อความจากผล ternary

เป้าหมาย: ฝึกใช้ ternary ตัดสินผลก่อน แล้วค่อยประกอบข้อความสุดท้าย มีให้แล้ว: `age = 17` และ `name = "ฟ้า"` สิ่งที่ต้องทำ: สร้าง `accessText` ก่อน แล้วต่อเป็น `message` ผลที่ควรเห็น: output แสดง "ฟ้า: ต้องมีผู้ปกครอง"