לולאות While ב-JavaScript: while, do...while, break ו-continue

כשלא יודעים כמה איטרציות צריך

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

הצורה מינימלית:

let count = 0;

while (count < 5) {
    console.log("count is", count);
    count++;
}

JavaScript מחשבת את התנאי שבסוגריים. אם הוא truthy, הבלוק רץ. אחר כך היא בודקת את התנאי שוב, ושוב, עד שהוא הופך ל-falsy. אם שוכחים את count++, התנאי אף פעם לא משתנה, וברוכים הבאים ללולאה אינסופית.

המודל המחשבתי: בדיקה, הרצה, חזרה

שלושה דברים חייבים להתקיים כדי שללולאת while יהיה היגיון:

1. משהו שהתנאי תלוי בו.
2. דרך שבה הגוף משנה את אותו משהו.
3. בסופו של דבר, התנאי הופך ל-false.

אם אחד מהם חסר, אתם בצרות. הבאג הקלאסי הוא לשכוח את שלב 2:

let count = 0;

while (count < 5) {
    console.log(count);
    // forgot to increment count - loops forever
}

זה רץ עד שהורגים את התהליך. נזק אמיתי כשזה קורה על שרת. שאלו את עצמכם תמיד: מה בגוף הלולאה יגרום לתנאי להיות false?

שימוש אמיתי: נקודת עצירה לא ידועה

כאן while מנצח את for. אתם צורכים פריטים ממקור כלשהו ולא יודעים כמה יש עד שרוקנתם אותו:

const queue = ["email", "sms", "push", "webhook"];

while (queue.length > 0) {
    const job = queue.shift();
    console.log("מעבד:", job);
}

console.log("התור ריק");

shift() מסיר ומחזיר את הפריט הראשון. הלולאה רצה כל עוד יש משהו בתור, ויוצאת באופן טבעי כשהוא ריק. אפשר לכתוב את זה עם לולאת for, אבל אז נלחמים בצורה של הבעיה: while נקרא כמו הכוונה.

do...while: קודם מריצים, אחר כך שואלים

do...while הופך את הסדר: מריץ את הגוף ו_אז_ בודק את התנאי. זה מבטיח לפחות איטרציה אחת:

let input;

do {
    input = Math.floor(Math.random() * 10);
    console.log("יצא", input);
} while (input !== 7);

console.log("סוף סוף יצא 7");

הגוף תמיד רץ פעם אחת, גם אם התנאי false כבר מההתחלה. השוו את זה ל-while רגיל, שבו תנאי false פירושו אפס איטרציות.

המקרה היומיומי: לבקש מהמשתמש קלט, לאמת את התשובה ולבקש שוב אם היא לא טובה. תמיד רוצים לשאול לפחות פעם אחת, ולכן do...while מתאים.

שימו לב לנקודה-פסיק אחרי ה-) הסוגר: בשונה מ-while ומ-for, do...while צריך אותה.

break: לצאת מוקדם

break יוצא מיד מהלולאה הקרובה ביותר. כך עוצרים כשהתנאי הטבעי לא בדיוק מתאים למשימה:

const numbers = [3, 7, 2, 9, 4, 11, 6];
let firstBigOne = null;

let i = 0;
while (i < numbers.length) {
    if (numbers[i] > 10) {
        firstBigOne = numbers[i];
        break;
    }
    i++;
}

console.log("נמצא:", firstBigOne);

ברגע ש-break רץ, שום דבר נוסף בלולאה לא מתבצע: לא שאר הגוף ולא בדיקת תנאי נוספת. אתם בחוץ.

while (true) עם break

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

let attempts = 0;

while (true) {
    attempts++;
    const roll = Math.floor(Math.random() * 6) + 1;

    if (roll === 6) {
        console.log(`יצא 6 אחרי ${attempts} ניסיונות`);
        break;
    }

    if (attempts >= 100) {
        console.log("מוותרים");
        break;
    }
}

שתי יציאות: הצלחה ותקרת ביטחון. תקרת הביטחון חשובה. while (true) בלי מסלול break מובטח הוא לולאה אינסופית שמחכה לקרות.

continue: לדלג לאיטרציה הבאה

continue קופץ לבדיקת התנאי הבאה ומדלג על שאר הגוף של האיטרציה הנוכחית:

let n = 0;

while (n < 10) {
    n++;
    if (n % 2 === 0) continue;
    console.log(n, "אי-זוגי");
}

מלכודת אחת: אם מה שמקדם את הלולאה נמצא אחרי ה-continue, בניתם הרגע לולאה אינסופית. בדוגמה למעלה, n++ נמצא לפני ה-continue, אז אנחנו בטוחים. שימו אותו אחרי, ו-n נתקע לנצח על מספר זוגי.

while מול for: במה להשתמש

כלל אצבע מכני:

• ספירה או מעבר לפי אינדקס על טווח ידוע: for. for (let i = 0; i < arr.length; i++) שומר את אתחול המונה, התנאי והצעד בשורה אחת.
• מעבר על אוסף: for...of. נקי יותר מניהול אינדקס.
• לולאה עד שמצב כלשהו משתנה: while. עיבוד תור, polling, צריכת stream, ניסיון חוזר עד הצלחה.
• תמיד לרוץ לפחות פעם אחת: do...while.

בתיאוריה הן ניתנות להחלפה: כל for אפשר לכתוב מחדש כ-while ולהפך. אבל בחירה במה שמתאים לצורה של הבעיה הופכת את הקוד למתעד את עצמו.

לולאות אינסופיות: הכלל האחד

כל לולאת while צריכה תשובה ברורה לשאלה: מה גורם לזה לעצור?

או שהתנאי בכותרת יהפוך בסופו של דבר ל-false, או שיש break שבוודאות ירוץ. אם אי אפשר להצביע על אחד מהם, הלולאה עוד לא גמורה.

// לא טוב: התנאי אף פעם לא משתנה
let ready = false;
while (!ready) {
    console.log("מחכים...");
    // שום דבר כאן לא משנה את `ready`
}

// טוב: הגוף משפיע על התנאי
let ready = false;
let checks = 0;
while (!ready) {
    checks++;
    if (checks >= 3) ready = true;
}

בדפדפן, לולאה אינסופית מקפיאה את הלשונית. ב-Node, היא מעמיסה ליבת CPU עד שהורגים את התהליך. שווה לתפוס אותן לפני שהן מגיעות לפרודקשן.

הבא בתור: for...of ו-for...in

while מטפל במקרה של "עד שמשהו משתנה". למעבר על מערכים, מחרוזות ואובייקטים פריט אחרי פריט, ל-JavaScript יש עוד שתי צורות של לולאה שתוכננו בדיוק בשביל זה: for...of ו-for...in, שמגיעות מיד.