לולאות - for, continue, break

לולאת for בג'אווה סקריפט

לעיתים, נרצה לבצע רצף של פעולות מספר פעמים. נוכל לעשות זאת בקלות על ידי לולאת for.

נניח לדוגמה שיש לנו מערך של שמות בשם names ואנו רוצים להדפיסו על המסך. ללא שימוש בלולאות, הקוד שלנו יראה כך:

<script>
const names = ["Zamir", "Yariv", "Eli", "Sandra", "Sivan"];
document.write("Name number " + 1 + ": " + names[0] + "<br />");
document.write("Name number " + 2 + ": " + names[1] + "<br />");
document.write("Name number " + 3 + ": " + names[2] + "<br />");
document.write("Name number " + 4 + ": " + names[3] + "<br />");
document.write("Name number " + 5 + ": " + names[4] + "<br />");
</script>

נשים לב כי פקודת ההדפסה document.write משוכפלת 5 פעמים, פעם אחת עבור כל איבר במערך. אבל מה יקרה אם יהיו לנו 100 שורות במערך? נצטרך לשכפל אותה 100 פעמים.

שכפול קוד באופן כללי הוא רע בתכנות, כיוון שהוא מקשה על תחזוק הקוד ומהווה מקור גדול לטעויות, שהרי אם למשל נרצה לשנות את אופן ההדפסה, נצטרך לשנותו בכל אחת מהשורות המשוכפלות, שזו כמובן פעולה מתישה ושיכולה להכניס טעויות.

לכן, נרצה להציג את פקודת ההדפסה פעם אחת בלבד, ולבקש להפעילה מספר פעמים. את זה נעשה באמצעות לולאת for.

ככה הקוד יעבוד עם לולאת for:

<script>
const names = ["Zamir", "Yariv", "Eli", "Sandra", "Sivan"];

for (var i=0; i<names.length; i++) {
	document.write("Name number " + (i+1) + ": " + names[i] + "<br />");
}
</script>

ניתן לראות כי אם נשנה את ערכו של names לא נצטרך לעשות כל שינוי בקטע הקוד שאחראי על ההדפסה.

נסביר את הלולאה שבדוגמה:

בתוך הסוגריים שממוקמים אחרי המילה השמורה for, יש 3 חלקים המופרדים בסימן ;.

החלק הראשון - חלק האתחול. חלק זה מופעל פעם אחת ומטרתו לאתחל (כלומר לקבוע ערך התחלה) משתנים.

החלק השני - תנאי עצירה. חלק זה נבדק בסיום כל ריצת הקוד שבין הסוגריים המסולסלים { ... }.

החלק השלישי - חלק הקידום. חלק זה מקדם את המשתנים שאותם איתחלנו.

בדוגמה שלנו, אתחלנו את המשתנה i שישמש כאינדקס, בערך 0. בסיום כל ריצה של הקוד בסוגריים המסולסלים, נבדק אם מתקיים i<names.length ואם כן, הלולאה מסתיימת. אם היא לא מסתיימת, מקודם הערך i באחד (פקודת i++).

כל סבב ריצה של הקוד בסוגריים המסולסלים מכונה איטרציה. המשתנה שמונה את הסבבים (במקרה של המשתנה i, כפי שנהוג לבחור) מכונה איטרטור.

לולאות מתקדמות ומקוננות

ניתן להפעיל את לולאת ה-for כאשר אחד החלקים ריקים, נניח ללא אתחול משתנים, ללא תנאי עצירה או ללא חלק קידום. זה פחות נפוץ לעשות כך, אך זה אפשרי.

ניתן לאתחל מספר משתנים בחלק האתחול.

ניתן גם לקנן לולאה בתוך לולאה.

נראה דוגמה ללולאה מקוננת עם חלק אתחול כפול וחלק אתחול חסר:

<script>
const names = ["Zamir", "Yariv", "Eli", "Sandra", "Sivan"];

for (var i=0, c=names.length; i<c; i++) {
	var j=0;
	for (; j<3; j++) {
		document.write("Name number " + (i+1) + ": " + names[i] + " (execution number " + (j+1) + ")<br />");
	}
}

/*
output:
Name number 1: Zamir (execution number 1)
Name number 1: Zamir (execution number 2)
Name number 1: Zamir (execution number 3)
Name number 2: Yariv (execution number 1)
Name number 2: Yariv (execution number 2)
Name number 2: Yariv (execution number 3)
Name number 3: Eli (execution number 1)
Name number 3: Eli (execution number 2)
Name number 3: Eli (execution number 3)
Name number 4: Sandra (execution number 1)
Name number 4: Sandra (execution number 2)
Name number 4: Sandra (execution number 3)
Name number 5: Sivan (execution number 1)
Name number 5: Sivan (execution number 2)
Name number 5: Sivan (execution number 3)
*/
</script>

בדוגמה הגדרנו לולאה שהאיטרטור שלה הוא i ובתוכה לולאה שהאיטרטור שלה הוא j. הלולאה החיצונית מופעלת names.length פעמים, כלומר תרוץ 5 איטרציות, והלולאה הפנימית מופעלת 3 פעמים (עבור הערכים j=0, j=1, j=2).

בלולאה החיצונית, אתחלנו גם את הערך של המשתנה i שמהווה איטרטור ללולאה וגם את הערך של המשתנה c שמאותחל בערך של names.length.

בלולאה הפנימית, לא ביצענו כל אתחול למשתנה j וחלק האתחול הוא ריק. נשים לב כי קבענו את הערך של j להיות 0 בתוך הלולאה החיצונית.

שימוש ב-continue וב-break

המילה השמורה continue מסיימת את ריצת הסבב הנוכחי של הקוד שבסוגריים המסולסלים ומדלגת מיד לשלב בדיקת תנאי העצירה.

המילה השמורה break עוצרת את ריצת הלולאה לגמרי.

דוגמה לשימוש ב-continue וב-break:

<script>
const names = ["Zamir", "Yariv", "Eli", "Sandra", "Sivan"];

for (var i=0; i<names.length; i++) {
	// skip Yariv
	if (names[i] == "Yariv") {
		continue;
	}

	document.write("Name number " + (i+1) + ": " + names[i] + "<br />");

	// exit the loop after Sandra
	if (names[i] == "Sandra") {
		break;
	}
}
</script>

לולאת ה-for מופעלת על כל אחד מ-5 השמות במערך names.

אם השם הנוכחי (כלומר names[i] בריצה הקוד בסוגריים המסולסלים) הוא "Yariv" מדלגים על יתר הקוד בסוגריים המסולסלים לשם הבא, וכך השם "Yariv" לא מודפס על המסך.

אם השם הנוכחי הוא "Sandra", מסיימים מיד את ריצת הלולאה. נשים לב שהבדיקה אם השם הנוכחי הוא "Sandra" נעשית לאחר ההדפסה של השם הזה על המסך, ולכן, השם "Sandra" יודפס, בעוד השם "Sivan" כבר לא יודפס (כי סיימנו את ריצת הלולאה).