การวนลูป (Loops)

ทำไมต้องมีลูป?

ลองนึกถึงการแสดงเลข 1 ถึง 5:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

แล้วถ้าต้องแสดง 1 ถึง 1000 ล่ะ? พิมพ์ไม่ไหวแน่ ๆ นี่คือเหตุผลที่ต้องมี ลูป (loop) — ทำซ้ำอัตโนมัติ

1. ลูป for (รู้จำนวนรอบ)

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

โครงสร้าง:

for (เริ่มต้น; เงื่อนไขวนต่อ; เปลี่ยนแปลง) {
    โค้ดที่ทำซ้ำ
}

• let i = 1 — เริ่มต้นตัวนับ
• i <= 5 — วนต่อถ้ายังจริง
• i++ — เพิ่มค่า i ทีละ 1 หลังแต่ละรอบ

ลองเปลี่ยนค่าดู: ให้วน 0 ถึง 10, หรือลดลงทีละ 1 (i--)

2. ลูป while (รู้แค่เงื่อนไขหยุด)

let count = 1;
while (count <= 5) {
  console.log(count);
  count++;
}
// แสดง 1 2 3 4 5

ใช้เมื่อ ไม่รู้จำนวนรอบที่แน่นอน แต่รู้เงื่อนไขว่าเมื่อไหร่ควรหยุด

⚠️ ระวัง infinite loop! ถ้าลืม count++ ด้านใน โปรแกรมจะวนไม่รู้จบ และค้าง ถ้าเกิดขึ้นในเบราว์เซอร์ ให้ปิดแท็บแล้วเปิดใหม่

3. ลูป do...while (ทำก่อนตรวจอย่างน้อย 1 รอบ)

let num = 1;
do {
  console.log(num);
  num++;
} while (num <= 5);

ต่างจาก while ตรงที่ ทำก่อน แล้วค่อยตรวจเงื่อนไข จึงทำอย่างน้อย 1 ครั้งเสมอ

4. ลูป for...of (วนใน array — ใช้บ่อยที่สุด)

let fruits = ["แอปเปิ้ล", "กล้วย", "ส้ม"];

for (let fruit of fruits) {
  console.log(fruit);
}
// แอปเปิ้ล
// กล้วย
// ส้ม

อ่านง่ายกว่า for ปกติมาก ใช้ตอนวนข้อมูลแบบกลุ่ม (เรียน array ในบทถัดไป)

คำสั่งควบคุมลูป

break — หยุดลูปทันที

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;   // หยุดเมื่อ i = 5
  }
  console.log(i);
}
// แสดง 1 2 3 4 (หยุดก่อนถึง 5)

continue — ข้ามรอบนี้ ไปรอบต่อไป

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;   // ข้ามเลข 3
  }
  console.log(i);
}
// แสดง 1 2 4 5

ตัวอย่างจริง: รวมเลข 1-100

let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log(sum);   // 5050

ตัวอย่าง: แสดงเฉพาะเลขคู่

for (let i = 1; i <= 10; i++) {
  if (i % 2 !== 0) continue;   // ข้ามเลขคี่
  console.log(i);
}
// แสดง 2 4 6 8 10

เลือกลูปแบบไหนดี?

สรุป

• for = รู้จำนวนรอบ
• while = รู้แค่เงื่อนไข
• for...of = วนข้อมูลใน array
• break = หยุดลูป
• continue = ข้ามรอบ

จบโมดูลพื้นฐาน JS แล้ว! บทหน้าเราจะเรียน ฟังก์ชัน — วิธีแพ็กโค้ดให้ใช้ซ้ำได้ 🧩