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

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

אם יש דברים שאני ממש מתקשה איתם זה לולאות מורכבות (וריקורסיה, אבל זה סיפור אחר) בג׳אווהסקריפט. הרבה פעמים קשה לעקוב אחר הלולאות האלו. אבל בג׳אווהסקריפט, כמו בג׳אווהסקריפט, יש לנו הרבה פעמים כל מיני פיצ׳רים שלא הרבה מכירים ויכולים לעשות לנו חיים קלים. אחד הפיצ׳רים האלו הוא סימון (בשפת גויי הים 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 מכל חלק בלולאות הפנימיות שהיא מריצה. שזה פיצ׳ר מאוד מעניין.

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

אהבתם? לא אהבתם? דרגו!



אל תשארו מאחור! יש עוד מה ללמוד!

8 comments on “סימון לולאות בג׳אווהסקריפט
  1. חזי הגיב:

    אין ספק ש javascript ממשיכה להיות השפה שאו שאתה אוהב אותה או שאתה שונא אותה, אין באמצע.

    אחרי למעלה מ 20 שנות הכרות איתה , אני עדיין בצד של השונאים.

  2. משתמש אנונימי (לא מזוהה) הגיב:

    סחטיין על ההיכרות, אבל הפיצ’ר הזה נראה פשוט כמו Goto (אפילו מסמנים את הלולאה כמו לייבל של שורה).
    כמו goto נראה שהוא שובר את ה Flow של הקוד ככה שהוא מונע מלהסתכל בלולאה הפנימית כאיבר נפרד.

  3. אסף הגיב:

    אם כבר השימוש שיותר טוב לעשות עם label זה יציאה מהלולאה הראשונה
    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
    break firstLoop;
    }
    console.log(`outerLoop: ${outerLoop}. innerLoop: ${innerLoop}`);
    }
    }

  4. Yirmiyahu הגיב:

    צריך להוסיף שהשימוש ב-GOTO לא כ”כ מקובל היום במקרה שאפשר להסתדר בלעדיו.

    ע”ע מאמרו הידוע של דייקסטרה: https://homepages.cwi.nl/~storm/teaching/reader/Dijkstra68.pdf

  5. זיו הגיב:

    תודה רבה, למדתי היום משהו חדש על השפה שאני עובד בה!

  6. יוסי הגיב:

    מגניב. קיים גם ב java, אגב

  7. זיו אחר הגיב:

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

  8. ינאי אדרי הגיב:

    דרך אגב svelet js (לפחות גרסא 3- ממה שיצא לי להכיר)
    אימץ את ה labels כשיטה לעידכון נתונים….

כתיבת תגובה

האימייל לא יוצג באתר.

רישום