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

คำสั่ง for loop ประกอบด้วย 3 ส่วนหลัก: Initialization (รันครั้งแรก), Test Condition (เช็คก่อนแต่ละรอบ), Iteration (รันหลังแต่ละรอบ) Flowchart ช่วยแสดงลำดับการทำงานที่ซับซ้อนกว่า While Loop

For Loop Flowchart

คำอธิบาย Flowchart แบบขั้นตอน

1. Start
2. Initialization (รันครั้งเดียวตอนเริ่ม): let i = 0
3. Condition Check: i < 10
   • True → ไป Body
   • False → ไป End
4. Body: รันคำสั่งในลูป
5. Iteration: i++ (อัปเดตตัวนับ)
6. Loop Back ไป Condition Check (ข้าม Initialization)
7. End

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

// Flowchart Logic
// Start
// → Initialization (i=0)
// → Check Condition (i < 10)
//   → True → Body → Iteration (i++) → Loop to Check
//   → False → End

// JavaScript Code
for (let i = 0; i < 10; i++) {  // Init; Condition; Iteration
  console.log(i);               // Body
}
// End

เปรียบเทียบ For vs While Flowchart

Text-based Flowchart

  ┌─────────────┐
  │   START     │
  └──────┬──────┘
         │
         ▼
  ┌─────────────┐
  │ INITIALIZE  │  (i = 0)  ← รันครั้งเดียว
  └──────┬──────┘
         │
         ▼
  ┌─────────────┐
  │ CONDITION?  │  (i < 10)
  └──────┬──────┘
    Yes  │  No
         ▼      │
  ┌─────────────┐  │
  │    BODY     │  │
  └──────┬──────┘  │
         │         │
         ▼         │
  ┌─────────────┐  │
  │  ITERATE    │  │  (i++)
  └──────┬──────┘  │
         │         │
         └─────────┘ (Loop Back)

For Loop Variations

// Standard
for (let i = 0; i < n; i++) { }

// Multiple Variables
for (let i = 0, j = n; i < j; i++, j--) { }

// No Init (Variable Exists)
let i = 0;
for (; i < n; i++) { }

// No Condition (Infinite + Break)
for (let i = 0; ; i++) { if (i > 10) break; }

// No Iteration (Manual in Body)
for (let i = 0; i < n; ) { body; i++; }