תנאים (if / switch)

תנאים מאפשרים לקוד לקבל החלטות ולבצע פעולות שונות בהתאם למצב.


if - תנאי בסיסי

let age = 20;

if (age >= 18) {
    console.log("אתה בגיר");
}

מבנה התחביר

if (condition) {
    // קוד שירוץ אם התנאי אמת (true)
}

if...else

let age = 15;

if (age >= 18) {
    console.log("אתה בגיר");
} else {
    console.log("אתה קטין");
}
// פלט: "אתה קטין"

if...else if...else

לבדיקת מספר תנאים:

let score = 75;

if (score >= 90) {
    console.log("מצוין");
} else if (score >= 80) {
    console.log("טוב מאוד");
} else if (score >= 70) {
    console.log("טוב");
} else if (score >= 55) {
    console.log("מספיק");
} else {
    console.log("נכשל");
}
// פלט: "טוב"

תנאים מקוננים (Nested)

let age = 25;
let hasLicense = true;

if (age >= 18) {
    if (hasLicense) {
        console.log("אתה יכול לנהוג");
    } else {
        console.log("צריך רישיון");
    }
} else {
    console.log("צעיר מדי");
}

גרסה נקייה יותר עם &&

if (age >= 18 && hasLicense) {
    console.log("אתה יכול לנהוג");
} else if (age >= 18) {
    console.log("צריך רישיון");
} else {
    console.log("צעיר מדי");
}

אופרטור טרנרי (Ternary)

קיצור ל-if/else בשורה אחת:

// תחביר: condition ? valueIfTrue : valueIfFalse

let age = 20;
let status = age >= 18 ? "בגיר" : "קטין";
console.log(status);  // "בגיר"

// שימוש ישיר
console.log(age >= 18 ? "מותר" : "אסור");

// שרשור (מספר תנאים)
let score = 85;
let grade = score >= 90 ? "A" :
            score >= 80 ? "B" :
            score >= 70 ? "C" :
            score >= 60 ? "D" : "F";

switch

לבדיקת ערך מול מספר אפשרויות:

let day = "שני";

switch (day) {
    case "ראשון":
        console.log("יום ראשון");
        break;
    case "שני":
        console.log("יום שני");
        break;
    case "שלישי":
        console.log("יום שלישי");
        break;
    default:
        console.log("יום אחר");
}
// פלט: "יום שני"

חשיבות break

let num = 2;

// בלי break - ימשיך לכל הcase-ים הבאים!
switch (num) {
    case 1:
        console.log("אחד");
    case 2:
        console.log("שתיים");
    case 3:
        console.log("שלוש");
}
// פלט: "שתיים" ואז "שלוש" (fall-through)

מספר ערכים לאותו קוד

let day = "שבת";

switch (day) {
    case "שישי":
    case "שבת":
        console.log("סוף שבוע!");
        break;
    default:
        console.log("יום עבודה");
}

Truthy ו-Falsy

ב-JavaScript, כל ערך הוא או truthy (נחשב אמת) או falsy (נחשב שקר).

ערכי Falsy (6 ערכים בלבד)

// כל אלה נחשבים false בתנאי:
false
0
"" (מחרוזת ריקה)
null
undefined
NaN

כל השאר הוא Truthy

// כל אלה נחשבים true:
true
1, -1, 3.14 (כל מספר שאינו 0)
"שלום" (כל מחרוזת שאינה ריקה)
"0" (מחרוזת עם אפס)
"false" (מחרוזת)
[] (מערך ריק)
{} (אובייקט ריק)
function() {} (פונקציה)

שימוש מעשי

let name = "";

if (name) {
    console.log(`שלום ${name}`);
} else {
    console.log("שלום אורח");
}
// פלט: "שלום אורח" (כי "" הוא falsy)

// בדיקה אם מערך לא ריק
let items = [1, 2, 3];
if (items.length) {
    console.log(`יש ${items.length} פריטים`);
}

Short-circuit Evaluation

|| - מחזיר את הערך הראשון ה-truthy

let name = "" || "אורח";
console.log(name);  // "אורח"

let user = null || undefined || "ברירת מחדל";
console.log(user);  // "ברירת מחדל"

// שימוש לערך ברירת מחדל
function greet(name) {
    name = name || "אורח";
    console.log(`שלום ${name}`);
}

&& - מחזיר את הערך הראשון ה-falsy

let result = "שלום" && "עולם";
console.log(result);  // "עולם" (שניהם truthy)

let result2 = "" && "עולם";
console.log(result2);  // "" (הראשון falsy)

// שימוש להרצת קוד בתנאי
let user = { name: "דן" };
user && console.log(user.name);  // "דן"

let nullUser = null;
nullUser && console.log(nullUser.name);  // לא ירוץ

?? - Nullish Coalescing

// מחזיר ימין רק אם שמאל null או undefined
let count = 0;
console.log(count || 10);   // 10 (0 הוא falsy!)
console.log(count ?? 10);   // 0 (0 אינו null/undefined)

let name = null;
console.log(name ?? "אנונימי");  // "אנונימי"

Optional Chaining (?.)

גישה בטוחה לתכונות מקוננות:

let user = {
    name: "דן",
    address: {
        city: "תל אביב"
    }
};

// בלי optional chaining
let city;
if (user && user.address) {
    city = user.address.city;
}

// עם optional chaining
let city2 = user?.address?.city;  // "תל אביב"

// אם משהו לא קיים
let nullUser = null;
console.log(nullUser?.name);  // undefined (ללא שגיאה!)

// עם פונקציות
let result = user.getName?.();  // undefined (אם אין פונקציה)

דוגמאות מעשיות

בדיקת סיסמה

function checkPassword(password) {
    if (!password) {
        return "נא להזין סיסמה";
    }
    if (password.length < 8) {
        return "הסיסמה קצרה מדי";
    }
    if (password.length > 20) {
        return "הסיסמה ארוכה מדי";
    }
    return "סיסמה תקינה";
}

תפריט משתמש

let role = "admin";

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

חישוב מחיר עם הנחות

function calculatePrice(price, memberType) {
    let discount = 0;

    if (memberType === "gold") {
        discount = 20;
    } else if (memberType === "silver") {
        discount = 10;
    } else if (memberType === "bronze") {
        discount = 5;
    }

    return price - (price * discount / 100);
}

console.log(calculatePrice(100, "gold"));  // 80

סיכום

מבנה שימוש
if תנאי בסיסי
if...else תנאי עם אלטרנטיבה
if...else if...else מספר תנאים
? : תנאי קצר בשורה אחת
switch בדיקת ערך מול רשימה
&& ריצה בתנאי / ערך ראשון falsy
\|\| ברירת מחדל / ערך ראשון truthy
?? ברירת מחדל ל-null/undefined
?. גישה בטוחה לתכונות

בדקו את עצמכם

נסו לענות לבד לפני שאתם פותחים את התשובה.

  1. איזה מהערכים הבאים הוא truthy?

    1. null
    2. ''
    3. 0
    4. '0'
    הצגת התשובה

    תשובה ד. מחרוזת לא ריקה, גם '0', היא truthy. 0, '', null, undefined ו-NaN הם falsy.

  2. מה האופרטור המשולש שקול ל-if (age >= 18) label = 'בוגר'; else label = 'קטין';?

    1. label = if age >= 18 'בוגר';
    2. label = age >= 18 ? 'בוגר' : 'קטין';
    3. label = age >= 18 : 'בוגר' ? 'קטין';
    4. label = age >= 18 && 'בוגר';
    הצגת התשובה

    תשובה ב. תנאי ? ערך-אם-אמת : ערך-אם-שקר.