วิธีแสดง Flowchart ของ If...Else Statement ใน JavaScript

คำสั่ง If Statement

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

Flowchart ของ If...Else

ภาพด้านล่างแสดงแผนผังไหลของคำสั่ง if...else:

คำอธิบาย Flowchart

• Start: จุดเริ่มต้น
• Condition: ประเมินเงื่อนไข (true/false)
• True Branch: รันบล็อกโค้ดเมื่อเงื่อนไขเป็นจริง
• False Branch: รันบล็อกโค้ด else เมื่อเงื่อนไขเป็นเท็จ (ถ้ามี)
• Merge/End: จุดรวม/สิ้นสุด

รูปแบบต่างๆของ If Statement

1. If แบบง่าย

if (condition) {
  // รันเมื่อ condition เป็น true
}

2. If...Else

if (condition) {
  // รันเมื่อ true
} else {
  // รันเมื่อ false
}

3. If...Else If...Else

if (condition1) {
  // ...
} else if (condition2) {
  // ...
} else {
  // ...
}

4. Ternary Operator (สำหรับเงื่อนไขง่าย)

var result = condition ? valueIfTrue : valueIfFalse;

ตัวอย่างโค้ด

var score = 85;

if (score >= 90) {
  console.log("Grade A");
} else if (score >= 80) {
  console.log("Grade B");
} else if (score >= 70) {
  console.log("Grade C");
} else {
  console.log("Grade D/F");
}

แนวทางปฏิบัติที่ดี

• ใช้วงเล็บปีกกา { } เสมอแม้คำสั่งเดียว เพื่อป้องกันบั๊ก
• จัดเรียงเงื่อนไขจากเฉพาะเจาะจงไปทั่วไป
• หลีกเลี่ยง Nested If ลึกเกินไป (ควรใช้ Early Return หรือ Switch)