ניהול תנאים מרובים עם switch statement ב- JavaScript

הצהרת switch בג'אווה סקריפט משמשת לביצוע בלוק קוד יחיד כלשהו (מתוך רבים) בהתבסס על הערך של ביטוי מסוים. הצהרה זו מהווה אלטרנטיבה קריאה יותר למספר הצהרות if…else כאשר יש להשוות משתנה או ביטוי ספציפי כלשהו למספר ערכים שונים.

תחביר בסיסי – Syntax

התחביר הבסיסי של הצהרת switch נראה כך:

switch (expression) {
    case value1:
        // קוד לביצוע אם expression === value1
        break;
    case value2:
        // קוד לביצוע אם expression === value2
        break;
    // מקרים נוספים
    default:
        // קוד לביצוע אם אין התאמה
}

דוגמה לשימוש ב-switch…case

הנה דוגמה המתארת את השימוש בהצהרת switch:

let day = new Date().getDay();
switch (day) {
    case 0:
        console.log('Sunday');
        break;
    case 1:
        console.log('Monday');
        break;
    case 2:
        console.log('Tuesday');
        break;
    case 3:
        console.log('Wednesday');
        break;
    case 4:
        console.log('Thursday');
        break;
    case 5:
        console.log('Friday');
        break;
    case 6:
        console.log('Saturday');
        break;
    default:
        console.log('Invalid day');
}

בדוגמה זו הצהרת ה-switch מעריכה את היום הנוכחי בשבוע (מ-0 עד 6) ומדפיסה את שם היום המתאים. אם ערך היום אינו תואם לאף מקרה (case), הבלוק default יבוצע ונקבל Invalid Day.

שימוש ב-break

הצהרת ה-break משמשת לסיים בלוק כלשהו. ללא הצהרת ה-break הביצוע ימשיך למקרה הבא, בין אם הוא תואם או לא. זה נקרא "התנהגות מעבר", או בלעז "fall-through":

let grade = 'B';
switch (grade) {
    case 'A':
        console.log('Excellent');
        break;
    case 'B':
        console.log('Good');
        break;
    case 'C':
        console.log('Fair');
        break;
    case 'D':
        console.log('Poor');
        break;
    default:
        console.log('Unknown grade');
}

בדוגמה זו, אם לא הייתה קיימת הצהרת ה-break, אז לאחר הדפסת "Good" עבור ציון 'B', התוכנית הייתה ממשיכה לבצע את שאר הקוד עבור הציונים 'C', 'D' והצהרת ה-default.

שימוש ב-switch עם מספר מקרים

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

let fruit = 'banana';
switch (fruit) {
    case 'apple':
    case 'banana':
    case 'pear':
        console.log('This is a fruit.');
        break;
    default:
        console.log('Unknown food item.');
}

בדוגמה זו, "This is a fruit." יודפס עבור 'apple', 'banana' או 'pear'.

סקופ בלוקים ב-Case Clauses

מלכודת נפוצה עם switch היא שכל ה-case clauses חולקים את אותו סקופ. כלומר לא ניתן להצהיר על אותו שם משתנה בשני cases שונים ללא שגיאה:

// זה יזרוק SyntaxError
switch (action) {
    case 'create':
        let message = 'Created!';
        console.log(message);
        break;
    case 'delete':
        let message = 'Deleted!'; // SyntaxError: 'message' כבר הוצהר
        console.log(message);
        break;
}

הפתרון הוא לעטוף כל case בסוגריים מסולסלים וכך ליצור סקופ בלוק נפרד:

switch (action) {
    case 'create': {
        let message = 'Created!';
        console.log(message);
        break;
    }
    case 'delete': {
        let message = 'Deleted!'; // ללא שגיאה - סקופ נפרד
        console.log(message);
        break;
    }
}

הדפוס switch(true)

בעוד שהצהרת switch רגילה משווה משתנה מול ערכים קבועים, הדפוס switch(true) מאפשר להעריך תנאים בוליאניים מרובים. כל case מכיל ביטוי שמוערך כ-true או false:

let score = 85;

switch (true) {
    case (score >= 90):
        console.log('Grade: A');
        break;
    case (score >= 80):
        console.log('Grade: B');
        break;
    case (score >= 70):
        console.log('Grade: C');
        break;
    case (score >= 60):
        console.log('Grade: D');
        break;
    default:
        console.log('Grade: F');
}
// Output: 'Grade: B'

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

שימוש ב-return במקום break בתוך פונקציות

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

function getDayName(dayNumber) {
    switch (dayNumber) {
        case 0: return 'Sunday';
        case 1: return 'Monday';
        case 2: return 'Tuesday';
        case 3: return 'Wednesday';
        case 4: return 'Thursday';
        case 5: return 'Friday';
        case 6: return 'Saturday';
        default: return 'Invalid day';
    }
}

console.log(getDayName(3)); // 'Wednesday'

חלופה: Object Lookup

עבור מיפויים פשוטים של ערך-לערך, אובייקט JavaScript יכול להחליף הצהרת switch לחלוטין. גישה זו לרוב תמציתית יותר וקלה יותר לתחזוקה:

// במקום הצהרת switch ארוכה:
const dayNames = {
    0: 'Sunday',
    1: 'Monday',
    2: 'Tuesday',
    3: 'Wednesday',
    4: 'Thursday',
    5: 'Friday',
    6: 'Saturday'
};

const day = dayNames[new Date().getDay()] ?? 'Invalid day';

// עובד נהדר גם למיפוי מפתחות לפונקציות:
const handlers = {
    save: () => saveDocument(),
    delete: () => deleteDocument(),
    export: () => exportDocument()
};

const action = 'save';
handlers[action]?.(); // קורא ל-saveDocument()

Object lookups מתאימים ביותר למיפויים פשוטים של אחד-לאחד. השתמשו ב-switch כאשר אתם צריכים התנהגות fall-through, לוגיקה מורכבת לכל case, או כאשר הקריאות מרוויחה מתיוגי case מפורשים.

השוואה בין הצהרת switch להצהרות if…else

הצהרת switch יכולה לעיתים קרובות להפוך את הקוד לקריא ותמציתי יותר בהשוואה למספר הצהרות if...else, במיוחד כאשר יש מספר תנאים המעריכים את אותו משתנה.

שימוש בהצהרות if…else

let color = 'blue';

if (color === 'red') {
    console.log('The color is red.');
} else if (color === 'blue') {
    console.log('The color is blue.');
} else if (color === 'green') {
    console.log('The color is green.');
} else if (color === 'yellow') {
    console.log('The color is yellow.');
} else {
    console.log('Unknown color.');
}

שימוש בהצהרת switch

let color = 'blue';

switch (color) {
    case 'red':
        console.log('The color is red.');
        break;
    case 'blue':
        console.log('The color is blue.');
        break;
    case 'green':
        console.log('The color is green.');
        break;
    case 'yellow':
        console.log('The color is yellow.');
        break;
    default:
        console.log('Unknown color.');
}

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

שיטות עבודה מומלצות

להלן כמה שיטות עבודה מומלצות לשימוש יעיל בהצהרת switch:

• כללו תמיד default case: טפלו בערכים בלתי צפויים באמצעות בלוק default. גם אם אינכם מצפים להגיע אליו, הוא עוזר לתפוס באגים מוקדם.
• אל תשכחו break: השתמשו בהצהרות break כדי למנוע התנהגות fall-through אלא אם היא רצויה בכוונה. אם אתם משמיטים break בכוונה, הוסיפו הערה שמבהירה את הכוונה.
• קבצו מקרים קשורים: כאשר מספר cases חולקים את אותה לוגיקה, ערמו אותם יחד כדי למנוע חזרתיות בקוד.
• השתמשו בסוגריים מסולסלים לסקופ בלוק: עטפו גוף ה-case ב-{} כאשר מצהירים על משתנים עם let או const כדי למנוע התנגשויות סקופ.
• שקלו חלופות למיפויים פשוטים: אם אתם רק ממפים ערכים, object lookup הוא לרוב פשוט יותר מ-switch. אם צריך בדיקות טווחים, שרשרת if...else עשויה להיות קריאה יותר.
• השתמשו ב-return בתוך פונקציות: כאשר switch נמצא בתוך פונקציה, העדיפו return על פני break לקוד נקי יותר.

שאלות נפוצות

שאלות נפוצות על הצהרת switch ב-JavaScript:

סיכום

הצהרת switch ב-JavaScript היא כלי עוצמתי לטיפול בתנאים מרובים בצורה נקייה ומאורגנת. על ידי הבנת התחביר שלה, חשיבות ה-break, סקופ בלוקים, ודפוסים כמו switch(true) ו-object lookups, תוכלו לבחור את הגישה הנכונה לכל מצב.

למדריכים נוספים על יסודות JavaScript, עיינו במדריכים על משפטי if…else, לולאות for, ו-טיפול בשגיאות עם try…catch.