การแสดง While Loop ด้วย Flowchart ใน JavaScript

คำสั่ง while loop ทำงานโดย ตรวจสอบเงื่อนไขก่อน (Pre-test) หากเป็น true รัน Body แล้ววนกลับเช็คใหม่ หาก false ออกจากลูป Flowchart ช่วยให้เห็นโครงสร้างการตัดสินใจได้ชัดเจน

While Loop Flowchart

คำอธิบาย Flowchart

1. Start: เริ่มต้น
2. Condition Check (Diamond): ประเมินเงื่อนไข
   • True (Yes): ไป Body
   • False (No): ไป End
3. Body (Rectangle): รันคำสั่งในลูป
4. Loop Back (Arrow): กลับไป Condition Check
5. End: จบลูป ทำคำสั่งต่อไป

โค้ดเทียบเท่า

// Flowchart Logic
// Start
// → Check Condition
//   → True → Execute Body → Loop Back to Check
//   → False → End

// JavaScript Code
let count = 0;
while (count < 5) {     // Condition Check
  console.log(count);   // Body
  count++;              // Update (ส่วนของ Loop Back)
}
// End

จุดสำคัญของ While Loop

• อาจ ไม่รันเลย (Zero Iterations) ถ้า Condition False ตั้งแต่แรก
• ต้องมี Logic เปลี่ยน Condition ใน Body ไม่งั้น Infinite Loop
• เหมาะกับ: ไม่รู้จำนวนรอบล่วงหน้า, รอ Event, ประมวลผล Stream

ตัวอย่าง Flowchart แบบข้อความ (Text-based)

  ┌─────────────┐
  │   START     │
  └──────┬──────┘
         │
         ▼
  ┌─────────────┐
  │ condition?  │───No───→ END
  └──────┬──────┘
         │Yes
         ▼
  ┌─────────────┐
  │   BODY      │
  └──────┬──────┘
         │
         ▼
  ┌─────────────┐
  │  UPDATE     │
  └──────┬──────┘
         │
         └──────→ (Loop Back to Condition)