การวนลูปแบบ for ในภาษา Javascript

for loop จะมีการใช้งานคล้าย ๆ กับ while loop แต่จะง่ายกว่าสำหรับการใช้งาน และมีค่า index ให้ใช้ได้ด้วย เพราะ for loop จะมีการรวมของ 3 องค์ประกอบของ loop โดยทั่วไป นั่นคือ ค่าเริ่มต้น การตรวจสอบ และการเพิ่มของค่า

การใช้งาน loop for เป็นการใช้งานการวนลูปที่เหมาะสำหรับการวนที่มีจำนวนครั้งที่แน่นอน

ก่อนอื่น เรามาดู flowchart กันก่อนดีกว่าครับ ตามรูปด้านล่างเลยครับ



จากรูป จะเห็นว่า อันกับแรกเราต้องกำหนดค่าเริ่มต้นก่อน จากนั้นจะเข้าสู่กระบวนการตัดสินใจ ถ้าเป็นจริง ก็จะทำงานในส่วนของ loop body หรือ block ของ loop for นั่นเอง เมื่อทำเสร็จ ก็จะไป update นั่นคือ การเพิ่มค่า หรือลดค่า ตามที่เรากำหนด จากนั้นก็ไปสู่กระบวนการตัดสินใจอีก เป็นแบบนี้ไปเรื่อย ๆ จนกว่าจะเป็นเท็จ ถ้าเป็นเท็จเมื่อไหร่ ก็จะออกจาก loop เมื่อนั้น

ดู flowchart และได้รู้จักกันไปบ้างแล้ว ต่อไปเรามาดู Syntax กันต่อดีกว่า ตามโค้ดด้านล่างเลยครับ

for(init-stmt; condition; next-stmt)
{
	body code
}


จาก Syntax ข้างบน เรามีส่วนประกอบที่สำคัญอยู่ 3 ส่วน นั่นคือ

	- init-stmt คือคำสั่งแรกที่จะทำก่อนที่จะเริ่มต้น loop เปรียบเทียบกับ flowchart ข้างบนก็คือช่องสี่เหลี่ยม INITIALIZATION นั่นเอง ค่านี้มักจะใช้เป็นค่าในการกำหนดตัวแปรเริ่มต้น

	- condition คือนิพจน์เงื่อนไขที่จะต้องทดสอบทุก ๆ ครั้ง ก่อนจะทำในลูป หรือออกจากลูป นิพจน์นี้จะคืนค่าจริงหรือเท็ยเท่านั้น ถ้าเป็นจริงก็จะทำในลป ถ้าเป็นเท็จก็จะออกจากลูป

	- next-stmt คือคำสั่งที่ใช้ในการเพิ่มหรือลดค่าในแต่ละลูป

ต่อไปเรามาดูตัวอย่างกันดีกว่า ตามด้านล่างเลยครับ

ตัวอย่างที่ 1 ของการใช้ for ใน javascript





จากโค้ดข้างบนเราจะเห็นว่า มีสามส่วนที่สำคัญ

- init-stmt นั่นก็คือส่วนแรก ซึ่งก็คือ กำหนด i ที่มีค่าเริ่มต้น เท่ากับ 0

- condition นั่นก็คือส่วนที่สอง ซึ่งก็คือ เช็คกว่า i น้อยกว่า 5 หรือไม่ ถ้าใช่ก็ทำต่อ ถ้าไม่ใช่ ก็ออกจากลูป

- next-stmt นั่นก็คือส่วนที่สาม ซึ่งก็คือ การเพิ่ม i ขึ้นหนึ่งในแต่ละรอบ


ตัวอย่างที่ 2 ของการใช้ for ใน javascript





ตัวอย่างนี้ เหมือนกับตัวอย่างข้างบน เพียงเปลี่ยนแต่ค่าเริ่มต้นเป็น 2 เท่านั้น

ตัวอย่างที่ 3 ของการใช้ for ใน javascript





ตัวอย่างนี้ ก็เหมือนกัน เพียงแต่เปลี่ยนค่าในการเพิ่มขึ้นแต่ละลูป โดยเพิ่มขึ้นทีละ 2