Control Flow

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

for loop คือโครงสร้างที่ใช้ทำซ้ำชุดคำสั่งตามจำนวนรอบที่เรากำหนดไว้ล่วงหน้า — ใช้เมื่อรู้แน่ชัดว่าต้องการวนกี่รอบ ตัวอย่างสถานการณ์ที่ใช้ for loop: - นับเลข 1 ถึง 10 - ไล่เช็กคะแนนของนักเรียน 30 คน - แสดงตารางสูตรคูณแม่ 1 ถึง 12 - ทำงานบางอย่างซ้ำตามจำนวนที่กำหนด ถ้าไม่มี loop เราต้องเขียนโค้ดซ้ำทีละบรรทัด เช่น console.log(1); console.log(2); ... ซึ่งทั้งยาวและแก้ไขยาก

2. โครงสร้าง for loop — 3 ส่วนในวงเล็บ

for loop มี 3 ส่วนในวงเล็บ: init → check → body → update → กลับไป check ซ้ำ

for (initialization; condition; update) {
  // body — โค้ดที่ทำซ้ำ
}

3. ตัวอย่าง — นับ 0 ถึง 4 ทีละขั้น

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 0, 1, 2, 3, 4

ขั้นตอนการทำงานทีละรอบ: 1. let i = 0 → ตั้งค่า i เป็น 0 (ครั้งเดียว) 2. ตรวจ i < 5 → 0 < 5 = true → รัน body: console.log(0) 3. i++ → i = 1 4. ตรวจ i < 5 → 1 < 5 = true → รัน body: console.log(1) 5. ... ทำซ้ำจนถึง i = 4 6. i++ → i = 5 7. ตรวจ i < 5 → 5 < 5 = false → หยุด loop สังเกตว่า loop วิ่งทั้งหมด 5 รอบ (i = 0, 1, 2, 3, 4) แต่ condition เป็น i < 5 ทำให้หยุดเมื่อ i = 5

4. นับเพิ่มและนับถอยหลัง

for loop ยืดหยุ่นได้มาก — เรากำหนดค่าเริ่มต้น, เงื่อนไข, และทิศทางการนับได้อิสระ ไม่จำเป็นต้องเริ่มจาก 0 หรือเพิ่มทีละ 1 เสมอไป

for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// 1, 2, 3, 4, 5

for (let i = 5; i >= 1; i--) {
  console.log(i);
}
// 5, 4, 3, 2, 1

5. ใช้ if ร่วมกับ for loop

เราสามารถใช้ if ภายใน for loop เพื่อให้บางรอบทำงานตามเงื่อนไข และบางรอบถูกข้ามไป — ทำให้ loop เลือกทำเฉพาะค่าที่เราสนใจ ตัวอย่างการใช้ if ใน loop: - แสดงเฉพาะเลขคู่ - รวมเฉพาะค่าที่ผ่านเกณฑ์ - นับจำนวนค่าที่ตรงเงื่อนไข

for (let i = 1; i <= 6; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}
// 2, 4, 6

let sum = 0;

for (let i = 1; i <= 4; i++) {
  sum += i;
}

console.log(sum); // 10 (1 + 2 + 3 + 4)

6. การนับทีละมากกว่า 1 (step)

เราไม่จำเป็นต้องเพิ่มหรือลดทีละ 1 เสมอ — สามารถกำหนด step size ได้ตามต้องการด้วย i += 2, i += 5 หรือ i *= 2 เพื่อกระโดดข้ามค่าที่ไม่ต้องการ ตัวอย่างที่ใช้บ่อย: - นับเลขคู่: i += 2 จะได้ 2, 4, 6, 8, ... - นับทีละ 5: i += 5 จะได้ 0, 5, 10, 15, ... - นับถอยหลังทีละ 3: i -= 3 จะได้ 30, 27, 24, ...

for (let i = 2; i <= 10; i += 2) {
  console.log(i);
}
// 2, 4, 6, 8, 10

for (let i = 0; i <= 20; i += 5) {
  console.log(i);
}
// 0, 5, 10, 15, 20

ข้อดีของการกำหนด step: (1) ไม่ต้องใช้ if กรองค่าใน loop (2) จำนวนรอบน้อยลง ทำงานเร็วขึ้น (3) โค้ดอ่านง่ายขึ้นเมื่อ logic ชัดเจนว่าเราเดินทีละเท่าไหร่

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

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

• ลืม update — เช่น for (let i = 0; i < 5;) ลืม i++
• Update ผิดทิศทาง — เช่น i-- แทน i++ ทำให้ condition ไม่มีวันถึงจุดหยุด
• Condition ไม่มีทางเป็น false — เช่น i >= 0 เมื่อ i เริ่มที่ 0 และเพิ่มขึ้นเรื่อย ๆ
• เปลี่ยนค่าตัวนับผิด — เช่น เปลี่ยน i ภายใน body ทำให้ update ไม่ทำงานตามที่คิด

// ❌ Infinite Loop! อย่ารัน!
for (let i = 0; i < 5; ) {  // ไม่มี i++ !
  console.log(i);             // วน forever
}

ก่อนรัน for loop ทุกครั้ง ให้ถามตัวเองว่า: 1. ค่าเริ่มต้นคือเท่าไหร่? 2. ค่าสุดท้ายก่อนหยุดคือเท่าไหร่? 3. ระหว่างทาง condition จะเป็น false ได้เมื่อไหร่? 4. update ในแต่ละรอบเปลี่ยนค่าไปในทิศทางที่ถูกต้องหรือไม่? ถ้าตอบได้ครบ 4 ข้อ — โอกาสเกิด infinite loop ต่ำมาก

Lab 1: for loop พื้นฐาน — นับ 1 ถึง 5

Lab 2: นับถอยหลัง

Lab 3: สะสมผลรวม (accumulation)

Lab 4: รวมเฉพาะเลขคู่ (if + modulo)

Lab 5: นับจำนวนที่ผ่านเกณฑ์

Lab 6: หาค่าสูงสุดระหว่างวน (tracking pattern)

Lab 7: สร้างข้อความจากการวน (string building)