Control Flow

1. while คืออะไร ใช้ตอนไหน

while เป็น loop ที่วนซ้ำตราบใดที่เงื่อนไขยังเป็น true — ใช้เมื่อไม่รู้จำนวนรอบล่วงหน้า ต่างจาก for loop ที่เหมาะกับจำนวนรอบคงที่ (เช่น วน 10 รอบ), while เหมาะกับงานที่รอจนกว่าบางอย่างจะเปลี่ยน เช่น รอ user ป้อนค่าถูก, รอ connection สำเร็จ, หรือค้นหาจนเจอ while จะตรวจเงื่อนไขก่อนทุกรอบ ถ้าตั้งแต่แรกเงื่อนไขเป็น false → body จะไม่ถูกรันเลยแม้แต่ครั้งเดียว

2. while — การทำงานทีละขั้น

while ตรวจเงื่อนไขก่อนเสมอ ถ้าเงื่อนไขเป็น false ตั้งแต่แรก body จะไม่ถูกรันเลย

while (condition) {
  // โค้ดที่ทำซ้ำ
  // ต้องเปลี่ยนค่าที่ทำให้ condition เป็น false ในที่สุด
}

let count = 5;

while (count > 0) {
  console.log(count);
  count--; // ลดค่า count เพื่อให้ condition มีวันเป็น false
}
// 5, 4, 3, 2, 1

console.log("ปล่อยจรวด!");

ขั้นตอนการทำงานของ while: 1. ตรวจ condition (count > 0) → true 2. รัน body: console.log(count) แล้ว count-- 3. กลับไปข้อ 1 4. เมื่อ count = 0 → condition เป็น false → ออกจาก loop ผลลัพธ์: พิมพ์ 5, 4, 3, 2, 1 แล้วตามด้วย "ปล่อยจรวด!"

3. กฎสำคัญของ while — ต้องมีทางออก

กฎข้อสำคัญที่สุดของ while: condition ต้องเปลี่ยนเป็น false ได้ในที่สุด — ไม่เช่นนั้นโปรแกรมจะติด infinite loop รันไม่หยุด ต้องมีโค้ดภายใน body ที่เปลี่ยนแปลงค่าที่อยู่ใน condition ทุกรอบ เช่น การบวก ลบ หรือเปลี่ยนค่าตัวแปรที่ใช้ในเงื่อนไข

let count = 5;

// ❌ Infinite loop — count ไม่เคยเปลี่ยน
while (count > 0) {
  console.log(count);
  // ลืม count-- !
}

• ต้องเปลี่ยนค่าที่อยู่ใน condition ภายใน body ทุกรอบ
• ระวัง condition ที่ซับซ้อนจนไม่มีทางเป็น false
• ถ้าใช้ while (true) ต้องมี break ภายใน body (ได้เรียน break แล้วในบท break / continue)
• ทดสอบด้วยค่าขอบเสมอ เช่น ค่าเริ่มต้นที่ทำให้ condition เป็น false ทันที

4. break และ continue ใน while

break และ continue ที่เรียนในบทก่อน ใช้กับ while ได้เหมือนกับ for — หลักการทำงานเหมือนกันทุกประการ: • break ใน while → หยุด loop ทันที • continue ใน while → ข้ามโค้ดที่เหลือในรอบนี้ กลับไปตรวจ condition ใหม่ ข้อแตกต่างสำคัญ: ใน for loop ตัวนับจะถูกอัปเดตอัตโนมัติหลังแต่ละรอบ แต่ใน while เราต้องอัปเดตค่าด้วยตัวเอง — ถ้าจะใช้ continue ใน while ต้องแน่ใจว่าอัปเดตตัวนับก่อน continue เสมอ

let value = 1;

while (true) {
  if (value % 7 === 0) {
    console.log("เจอเลขที่หาร 7 ลงตัวตัวแรก:", value);
    break; // เจอแล้ว หยุด loop
  }
  value++;
}
// "เจอเลขที่หาร 7 ลงตัวตัวแรก: 7"

let number = 0;

while (number < 10) {
  number++; // อัปเดตก่อนเสมอ

  if (number % 2 !== 0) {
    continue; // ข้ามเลขคี่
  }

  console.log(number);
}
// 2, 4, 6, 8, 10

**กฎสำคัญ**: เมื่อใช้ continue ใน while — ต้องอัปเดตตัวแปรที่ใช้ใน condition ก่อน continue เสมอ เพราะ while ไม่มีส่วน update อัตโนมัติแบบ for loop ถ้าอัปเดตหลัง continue โค้ดหลัง continue จะไม่ถูกรัน → ตัวแปรไม่เคยเปลี่ยน → infinite loop

5. do...while คืออะไร ใช้ตอนไหน

do...while เป็น loop ที่รัน body ก่อน แล้วค่อยตรวจเงื่อนไข — จึงรับประกันว่า body ถูกรันอย่างน้อย 1 ครั้งเสมอ ใช้เมื่อต้องทำอะไรสักอย่างก่อนอย่างน้อย 1 ครั้ง แล้วค่อยถามว่าจะทำต่อหรือไม่ เช่น: - แสดง prompt ให้ user กรอกข้อมูล → ตรวจว่าถูกหรือไม่ → ถ้าไม่ถูกให้วนกลับไปถามใหม่ - retry การเชื่อมต่อ → ลองก่อน 1 ครั้ง → ถ้าล้มเหลวค่อยลองอีก - เกมที่ต้องเล่นอย่างน้อย 1 รอบก่อนถามว่าจะเล่นต่อไหม

6. do...while — การทำงานทีละขั้น

do...while รัน body ก่อนเสมอ — แม้เงื่อนไขเป็น false ตั้งแต่แรกก็รัน 1 ครั้ง

do {
  // โค้ดที่ทำซ้ำ — รันก่อนอย่างน้อย 1 ครั้งเสมอ
} while (condition);

let attempts = 0;

do {
  attempts++;
  console.log("พยายามครั้งที่", attempts);
  // สมมติ: ลองส่งข้อมูล
} while (attempts < 3);

console.log("หยุด retry หลัง", attempts, "ครั้ง");
// "พยายามครั้งที่ 1"
// "พยายามครั้งที่ 2"
// "พยายามครั้งที่ 3"
// "หยุด retry หลัง 3 ครั้ง"

ขั้นตอนการทำงานของ do...while: 1. รัน body ทันที — attempts++ แล้ว console.log 2. ตรวจ condition (attempts < 3) → true → กลับไปข้อ 1 3. รัน body อีกครั้ง 4. เมื่อ attempts = 3 → condition เป็น false → ออกจาก loop ผลลัพธ์: พิมพ์ 1, 2, 3 ครบแล้วหยุด

7. เปรียบเทียบ while กับ do...while และ for

let x = 10;

// while — ตรวจก่อน: 10 < 5 เป็น false → ไม่รัน body เลย
while (x < 5) {
  console.log("while:", x); // ไม่ถูกพิมพ์เลย
}

// do...while — รันก่อน: พิมพ์ 10 → ตรวจ: 10 < 5 false → หยุด
do {
  console.log("do...while:", x); // พิมพ์ "do...while: 10" ครั้งเดียว
} while (x < 5);

8. ข้อควรระวัง — Infinite Loop

Infinite loop เกิดขึ้นเมื่อ condition ไม่มีทางเป็น false — โปรแกรมจะรันไม่หยุดจนกว่า browser จะหยุด script เอง สาเหตุที่พบบ่อย:

• ลืมเปลี่ยนค่าตัวแปรใน condition (เช่น ลืม i++ หรือ count--)
• เปลี่ยนค่าผิดทิศทาง — condition ยิ่งเป็น true มากขึ้นเรื่อย ๆ
• ใช้ while (true) โดยไม่มี break
• พิมพ์ผิดในชื่อตัวแปร — เปลี่ยนตัวแปรคนละตัวกับที่ใช้ใน condition
• ตรรกะเงื่อนไขผิด — เช่น while (x > 0) แต่ใน body ดันเพิ่ม x
• อย่าลืมอัปเดตตัวนับก่อน continue — ใน for loop ตัวนับอัปเดตอัตโนมัติหลังแต่ละรอบ แต่ใน while ต้องอัปเดตด้วยตัวเองก่อน continue ไม่เช่นนั้นจะติด infinite loop

let value = 1;

// ❌ Infinite Loop: value *= 2 ทำให้ value ไปถึง 16 แล้ว condition 16 < 10 เป็น false → หลุด!
// ✅ แต่ถ้า condition เป็น value > 0: นี่สิ infinite เพราะ value มีแต่เพิ่มขึ้น
while (value > 0) {
  console.log(value);
  value *= 2; // value มีแต่เพิ่ม → condition ไม่มีวันเป็น false → infinite loop
}

วิธีป้องกัน: 1. ตรวจสอบว่าใน body มีโค้ดที่เปลี่ยนค่าใน condition ทุกรอบจริง 2. ทดสอบด้วยค่าขอบที่ทำให้ condition เป็น false ทันที 3. ถ้าจำเป็นต้องใช้ while (true) ให้แน่ใจว่ามี break ในทุกเส้นทาง 4. ใช้ console.log ดูค่าที่เปลี่ยนในแต่ละรอบระหว่าง debug

Lab 1: while นับถอยหลัง

Lab 2: นับจำนวนที่หาร 3 ลงตัว (while + if)

Lab 3: do...while ลดพลังงานทีละรอบ

Lab 4: do...while รันอย่างน้อยหนึ่งครั้ง

Lab 5: while ตรวจสอบสถานะจนเสร็จ (sentinel pattern)

Lab 6: do...while retry จนสำเร็จ

Lab 7: while เพิ่มค่าแบบทวีคูณ

Lab 8: เปรียบเทียบ while กับ do...while