סימון לולאות בג׳אווהסקריפט

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

בואו ונסתכל על הלולאה הזו למשל:

let str = '';

for (let i = 0; i < 10; i++) {
  if (i === 1) {
    continue;
  }
  str = str + i;
}

console.log(str); // 023456789

לא צריך להיות מתכנת ג׳אווהסקריפט גאון במיוחד כדי לנתח את הקוד. כל מה שיש לנו פה זו לולאה פשוטה שבפשוטות שמבצעת איטרציה על כל המספרים מ-0 עד 9 ומוסיפה אותם ל-str. א-מ-מ-ה-? אם המספר שווה אחד, מתבצע continue לפני שהלולאה מוסיפה את המספר ובגלל זה התוצאה היא 023456789 בלי 1.

אבל אני יכול לבצע label ללולאה הזו באופן הבא:

let str = '';

myLoop:
for (let i = 0; i < 10; i++) {
  if (i === 1) {
    continue myLoop;
  }
  str = str + i;
}

console.log(str); //023456789

שימו לב לשני הדברים שהוספתי פה – הראשון הוא הלייבל, ששמו הוא myLoop, שנוסף שורה לפני הלולאה. השני הוא myLoop שנכנס לפני ה-continue. מעכשיו ה-continue בעצם הוא ל-myLoop ואליו בלבד. אם אני אכתוב שגיאת כתיב, אני אקבל שגיאת סינטקס מסוג: SyntaxError: Undefined label

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

  for (let outerLoop = 0; outerLoop < 4; outerLoop++) {
    for (let innerLoop = 0; innerLoop < 4; innerLoop++) {
      console.log(`outerLoop: ${outerLoop}. innerLoop: ${innerLoop}`);
    }
  }

יש כאן שתי לולאות. הראשונה, לולאת האבא, רצה 4 פעמים. מ-0 עד 4. בכל ריצה שלה היא מריצה לולאה פנימית שגם היא רצה 4 פעמים מ-0 עד 4. הפלט של הלולאה הזו הוא:

outerLoop: 0. innerLoop: 0
outerLoop: 0. innerLoop: 1
outerLoop: 0. innerLoop: 2
outerLoop: 0. innerLoop: 3
outerLoop: 1. innerLoop: 0
outerLoop: 1. innerLoop: 1
outerLoop: 1. innerLoop: 2
outerLoop: 1. innerLoop: 3
outerLoop: 2. innerLoop: 0
outerLoop: 2. innerLoop: 1
outerLoop: 2. innerLoop: 2
outerLoop: 2. innerLoop: 3
outerLoop: 3. innerLoop: 0
outerLoop: 3. innerLoop: 1
outerLoop: 3. innerLoop: 2
outerLoop: 3. innerLoop: 3

אבל אם אני משתמש ב-label, אני יכול להשפיע על הלולאה החיצונית מהלולאה הפנימית. אני רוצה למשל שבכל פעם שהלולאה הפנימית מגיעה ל-2, אנו נקדם את הלולאה החיצונית באחד. כלומר continue. איך? ככה:

firstLoop:
   for (let outerLoop = 0; outerLoop < 4; outerLoop++) {
     secondLoop:
     for (let innerLoop = 0; innerLoop < 4; innerLoop++) {
       if (innerLoop === 2) {
         // Use continue to avoid runs 4 and 5
         continue firstLoop;
       }
       console.log(`outerLoop: ${outerLoop}. innerLoop: ${innerLoop}`);
     }
   }

אפשר לראות איך שבכל פעם שיש תנאי בלולאה הפנימית, אני משפיע על הלולאה החיצונית באמצעות continue firstLoop. הפלט יהיה כך:

outerLoop: 0. innerLoop: 0
outerLoop: 0. innerLoop: 1
outerLoop: 1. innerLoop: 0
outerLoop: 1. innerLoop: 1
outerLoop: 2. innerLoop: 0
outerLoop: 2. innerLoop: 1
outerLoop: 3. innerLoop: 0
outerLoop: 3. innerLoop: 1

מה שחשוב פה הוא לא הפעולה של הלולאות אלא להבין את עניין התיוג של הלולאה. כל לולאה יכולה לקבל שם ואנו יכולים לעשות לה break או continue מכל חלק בלולאות הפנימיות שהיא מריצה. שזה פיצ׳ר מאוד מעניין.