Switch ב-JavaScript: case, break ו-Fallthrough

Switch בוחר ענף אחד מתוך רבים

switch הוא משפט בקרת זרימה למצבים שבהם משווים ערך יחיד לקומץ אפשרויות ידועות. שרשרת של if/else if/else יכולה לעשות את אותה עבודה, אבל ברגע שבודקים את אותו משתנה שלוש או ארבע פעמים ברצף, switch קריא יותר.

הצורה הבסיסית:

const day = "Wed";

switch (day) {
    case "Mon":
        console.log("תחילת השבוע");
        break;
    case "Wed":
        console.log("אמצע השבוע");
        break;
    case "Fri":
        console.log("כמעט סוף שבוע");
        break;
    default:
        console.log("סתם יום אחר");
}

אם קוראים את זה מלמעלה למטה: JavaScript מחשבת את day, משווה אותו לכל תווית case ומריצה את הבלוק שמתאים. default תופס כל מה שלא התאים, כמו else אחרון. סדר הקריאה הוא ערך ← case ← קוד.

איך ההתאמה עובדת בפועל

switch משווה באמצעות שוויון קפדני, כלומר האופרטור ===. בלי המרת טיפוסים, בלי התאמות מקורבות. case 1: יתאים למספר 1 אבל לא למחרוזת "1".

const code = "1";

switch (code) {
    case 1:
        console.log("אחד כמספר");
        break;
    case "1":
        console.log("אחד כמחרוזת");
        break;
    default:
        console.log("אין התאמה");
}

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

break הוא מה שעוצר את הזרימה

זה החלק שמכשיל אנשים. תווית case היא יעד קפיצה, לא בלוק עצמאי. ברגע שהביצוע נוחת על case מתאים, הוא ממשיך לרוץ שורה אחרי שורה, ישר דרך התווית של ה-case הבא, עד שהוא פוגש break, return או את סוף ה-switch.

שימו לב מה קורה בלי break:

const role = "editor";

switch (role) {
    case "admin":
        console.log("גישה מלאה");
    case "editor":
        console.log("יכול לערוך");
    case "viewer":
        console.log("יכול לצפות");
    default:
        console.log("מחובר");
}

ההתאמה היא "editor", אבל עדיין מקבלים יכול לערוך, יכול לצפות ו-מחובר. זה fallthrough: הביצוע נפל דרך כל אחד מה-cases הבאים כי שום דבר לא אמר לו לעצור.

הוסיפו break והוא מתנהג כמו שצריך:

const role = "editor";

switch (role) {
    case "admin":
        console.log("גישה מלאה");
        break;
    case "editor":
        console.log("יכול לערוך");
        break;
    case "viewer":
        console.log("יכול לצפות");
        break;
    default:
        console.log("מחובר");
}

הרגל טוב: כל case מסתיים ב-break, אלא אם אתם רוצים fallthrough במפורש.

Fallthrough מכוון לקיבוץ

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

function daysIn(month, year) {
    switch (month) {
        case "Jan":
        case "Mar":
        case "May":
        case "Jul":
        case "Aug":
        case "Oct":
        case "Dec":
            return 31;
        case "Apr":
        case "Jun":
        case "Sep":
        case "Nov":
            return 30;
        case "Feb":
            return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 29 : 28;
        default:
            return 0;
    }
}

console.log(daysIn("Feb", 2024));
console.log(daysIn("Aug", 2025));

תוויות case ריקות שמוערמות זו על זו חולקות את הבלוק שמתחתיהן. שימו לב שאין צורך ב-break אחרי return, כי הפונקציה יוצאת לגמרי. return בתוך switch מדלג על כל מה שהיה אמור לבוא אחריו.

כשאתם כן רוצים fallthrough בין cases שאינם ריקים, השאירו הערה כדי שהקורא הבא לא "יתקן" את זה:

switch (event) {
    case "click":
        track("click");
        // fallthrough
    case "hover":
        highlight();
        break;
}

default לא חייב לבוא אחרון

לפי המוסכמה default נמצא בתחתית, ושם רוב הקוראים מצפים למצוא אותו. אבל מבחינה טכנית הוא סתם עוד תווית: הוא מתאים כשאף case לא התאים, לא משנה איפה הוא נמצא. אם שמים default באמצע בלי break, הוא ייפול לתוך מה שנמצא מתחתיו. שימו אותו אחרון, סיימו אותו ב-break (או לא, כי שום דבר לא בא אחריו), והעצמי העתידי שלכם יודה לכם.

function describeStatus(code) {
    switch (code) {
        case 200:
        case 201:
            return "success";
        case 404:
            return "not found";
        case 500:
            return "server error";
        default:
            return "unknown";
    }
}

console.log(describeStatus(200));
console.log(describeStatus(404));
console.log(describeStatus(418));

Scope של משתנים בתוך case

כל ה-cases חולקים scope אחד של בלוק: ה-switch כולו. הצהרה על let או const עם אותו שם בשני cases זורקת שגיאת הצהרה כפולה:

switch (x) {
    case 1:
        let msg = "one";
        break;
    case 2:
        let msg = "two";   // SyntaxError: Identifier 'msg' has already been declared
        break;
}

הפתרון הוא בלוק לכל case: עטפו את הגוף ב-{ }:

const x = 2;

switch (x) {
    case 1: {
        const msg = "one";
        console.log(msg);
        break;
    }
    case 2: {
        const msg = "two";
        console.log(msg);
        break;
    }
}

עכשיו כל msg חי ב-scope משלו וההתנגשות נעלמת. שווה לזכור את זה בכל פעם ש-case צריך יותר משורה או שתיים של לוגיקה.

switch מול if/else

switch מצטיין כשבודקים ערך אחד מול הרבה אפשרויות קבועות: קודי HTTP, סוגי actions של Redux, שמות פקודות, מחרוזות שמתנהגות כמו enum. הערך מופיע פעם אחת למעלה, והעין של הקורא יכולה לסרוק את תוויות ה-case כמו תוכן עניינים.

if/else עדיף כאשר:

• משווים טווחים (score >= 90, score >= 75).
• התנאים כוללים משתנים שונים או ביטויים בוליאניים.
• רוצים שוויון רופף או השוואות מותאמות אישית (switch הוא תמיד ===).

// מתאים ל-switch: ערך אחד, הרבה אפשרויות נפרדות.
function statusLabel(code) {
    switch (code) {
        case 200: return "OK";
        case 301: return "Moved";
        case 404: return "Not Found";
        case 500: return "Server Error";
        default:  return `Status ${code}`;
    }
}

// עדיף כ-if/else: טווחים ותנאים מעורבים.
function grade(score) {
    if (score >= 90) return "A";
    if (score >= 75) return "B";
    if (score >= 60) return "C";
    return "F";
}

console.log(statusLabel(404));
console.log(grade(82));

חלופה מודרנית נפוצה לדפוס הראשון היא חיפוש באובייקט:

const labels = {
    200: "OK",
    301: "Moved",
    404: "Not Found",
    500: "Server Error",
};

function statusLabel(code) {
    return labels[code] ?? `Status ${code}`;
}

console.log(statusLabel(200));
console.log(statusLabel(418));

שלוש שורות במקום switch של תשע שורות. כשה-cases הם מיפויים של נתונים בלבד בלי לוגיקה אמיתית, אובייקט (או Map) בדרך כלל קריא יותר. לכו על switch כשכל case עושה עבודה של ממש.

הבא בתור: לולאות for

switch מטפל בהחלטה אחת מול הרבה אפשרויות. החלק הבא של בקרת הזרימה הוא חזרה: הרצת אותו בלוק קוד שוב ושוב. בשביל זה יש לולאות for, שמגיעות מיד.