תנאים (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 |
?. |
גישה בטוחה לתכונות |
לחזרה ותרגול חי: הנושא הזה מופיע גם
במדריך האינטראקטיבי ל-JavaScript, עם עורך קוד שמראה את התוצאה מיד.
בדקו את עצמכם
נסו לענות לבד לפני שאתם פותחים את התשובה.
-
איזה מהערכים הבאים הוא truthy?
הצגת התשובה
תשובה ד. מחרוזת לא ריקה, גם '0', היא truthy. 0, '', null, undefined ו-NaN הם falsy.
-
מה האופרטור המשולש שקול ל-
if (age >= 18) label = 'בוגר'; else label = 'קטין';?הצגת התשובה
תשובה ב. תנאי ? ערך-אם-אמת : ערך-אם-שקר.