for loop / javascript
for loop ใน JavaScript คือคำสั่งที่ใช้สำหรับวนซ้ำชุดคำสั่งหรือบล็อกของโค้ดซ้ำ ๆ ตามจำนวนครั้งที่กำหนด 🔁. มันเป็นหนึ่งในวิธีการหลักในการทำซ้ำ (iteration) ในภาษา JavaScript.
องค์ประกอบของ for loop
ไวยากรณ์ (Syntax) ของ for loop มี 3 ส่วนสำคัญที่อยู่ในวงเล็บคั่นด้วยเครื่องหม ายอัฒภาค (semicolon - ;) ดังนี้:
JavaScript
for ([การเริ่มต้น]; [เงื่อนไข]; [การเพิ่ม/ลดค่า]) {
// บล็อกของโค้ดที่จะทำงานซ้ำ
}
<hr>
1. การเริ่มต้น (Initialization)
ส่วนนี้จะถูกเรียกใช้ เพียงครั้งเดียว ก่อนการวนซ้ำจะเริ่มต้น.
มักใช้สำหรับประกาศและกำหนดค่าเริ่มต้นให้กับตัวนับ (counter variable) เช่น: let i = 0.
2. เงื่อนไข (Condition)
ส่วนนี้คือการตรวจสอบ ตรรกะ (Boolean expression) ที่จะทำทุกครั้งก่อนการวนซ้ำแต่ละรอบ.
ถ้าเงื่อนไขเป็น จริง (true) โค้ดในบล็อกจะถูกเรียกใช้.
ถ้าเงื่อนไขเป็น เท็จ (false) การวนซ้ำจะหยุดลงทันที.
ตัวอย่าง: i < 10 (วนซ้ำตราบใดที่ i น้อยกว่า 10).
3. การเพิ่ม/ลดค่า (Increment/Decrement)
ส่วนนี้จะถูกเรียกใช้ หลังจากการทำงานของบล็อกโค้ดในแต่ละรอบ เสร็จสิ้น.
มักใช้เพื่อปรับปรุงค่าของตัวนับ เช่น การเพิ่มค่าทีละ 1 (i++) หรือการลดค่า (i--).
<hr>
ตัวอย่างการใช้งาน
ตัวอย่างการวนซ้ำเพื่อพิมพ์ตัวเลขตั้งแต่ 0 ถึง 4:
JavaScript
for (let i = 0; i < 5; i++) {
console.log("รอบที่: " + i);
}
// ผลลัพธ์:
// รอบที่: 0
// รอบที่: 1
// รอบที่: 2
// รอบที่: 3
// รอบที่: 4
นอกจากโครงสร้างพื้นฐาน for ([การเริ่มต้น]; [เงื่อนไข]; [การเพิ่ม/ลดค่า]) { ... } แล้ว เวลาเอา for loop JavaScript ไปใช้จริง ๆ มักเจอ “เคสยอดฮิต” ที่คนเริ่มต้นสับสนอยู่บ่อย ๆ เลยขอสรุปเพิ่มแบบที่ผมใช้จำและใช้เขียนงานจริงให้ค่ะ 1) วน Array / List แบบอ่านง่าย ถ้าเรามีอาเรย์ เช่น cars = ["BMW", "Volvo", "Saab", "Ford"] หลักคิดคือวนด้วย index แล้วหยิบค่ามาใช้ for (let i = 0; i < cars.length; i++) { console.log(cars[i]); } จุดที่พลาดบ่อย: ใช้ i <= cars.length ทำให้รอบสุดท้าย index เกิน (ได้ undefined) ดังนั้นส่วนใหญ่ใช้ i < cars.length จะปลอดภัยกว่า 2) เริ่มที่ 1 ไม่ใช่ 0 ได้ไหม? ได้เลย แค่เปลี่ยนค่าเริ่มต้น เช่นอยากพิมพ์ 1 ถึง 5 for (let i = 1; i <= 5; i++) { console.log("รอบที่: " + i); } จำง่าย ๆ: ถ้าเริ่มที่ 1 และอยากให้ถึง 5 ให้ใช้เงื่อนไข i <= 5 3) i++ vs i-- และการกำหนด step มากกว่า 1 - i++ คือเพิ่มทีละ 1 - i-- คือลดทีละ 1 - เพิ่มทีละ 2 ก็ทำได้ เช่น i += 2 for (let i = 0; i < 10; i += 2) { console.log(i); // 0,2,4,6,8 } 4) หยุด loop ก่อนกำหนดด้วย break เคสนี้ใช้ตอน “เจอสิ่งที่ต้องการแล้วไม่ต้องวนต่อ” ประหยัดเวลา for (let i = 0; i < cars.length; i++) { if (cars[i] === "Saab") { break; } console.log(cars[i]); } ผลคือจะพิมพ์แค่ BMW, Volvo แล้วหยุดทันทีเมื่อเจอ Saab 5) ข้ามบางรอบด้วย continue ถ้าต้องการข้ามบางเงื่อนไข แต่ยังวนต่อรอบถัดไป for (let i = 0; i < 5; i++) { if (i === 2) continue; console.log("รอบที่: " + i); } รอบที่ 2 จะไม่ถูกพิมพ์ 6) ทริคกันงง: ลำดับการทำงานของ for loop จากประสบการณ์ ถ้าจำลำดับนี้ได้จะอ่านโค้ดง่ายขึ้น: - ทำ Initialization (ครั้งเดียว) - เช็ค Condition (ก่อนทุกครั้ง) - ทำในบล็อก { ... } - ทำ Increment/Decrement (หลังทุกครั้ง) ถ้าคุณกำลังฝึก for loop JavaScript แนะนำให้ลอง “ไล่ค่าด้วยกระดาษ” โดยเขียน i ในแต่ละรอบ หรือใส่ console.log(i) เพื่อตรวจสอบ จะช่วยลดบั๊กแบบ i เกิน/วนไม่หยุดได้มากค่ะ














