1. דף הבית
  2. קורסים אונליין
  3. קורס Javascript אונליין
  4. משפטי תנאי if, else ב-JavaScript

משפטי תנאי if, else ב-JavaScript

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

תנאי if בג'אווה סקריפט

הצהרת if, המכונה גם תנאי if, משמשת לביצוע קטע קוד אם התנאי שצוין מוערך כ-true. נתחיל עם התחביר הבסיסי:

if (condition) {
    // Code to execute if condition is true
}

דוגמה:

let num = 10;

if (num > 5) {
    console.log("Number is greater than 5");
}

בדוגמה זו, אנו בודקים את ערך המשתנה num. אם הוא גדול מ-5, אז מבוצע קטע הקוד שבתוך הסוגריים המסולסלים, ונכתבת ההודעה Number is greater than 5 בקונסול.

תנאי if עם בלוק else בג'אווה סקריפט

ניתן להוסיף בלוק אחר להצהרת if, אשר יבוצע אם התנאי מוערך ל-false. כך זה נראה:

if (condition) {
    // Code to execute if condition is true
} else {
    // Code to execute if condition is false
}

אם הביטוי הלוגי condition מוערך כ-true, יבוצע בלוק הקוד הראשון, אחרת, יבוצע בלוק הקוד השני.

דוגמה:

let num = 3;

if (num > 5) {
    console.log("Number is greater than 5");
} else {
    console.log("Number is not greater than 5");
}

בדוגמה זו, אנו בודקים האם ערך המשתנה num גדול מ-5. אם כן, נדפיס בקונסול Number is greater than 5, אחרת, נדפיס בקונסול Number is not greater than 5.

משפטי תנאי מורכבים

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

if (condition1) {
    // Code to execute if condition1 is true
} else if (condition2) {
    // Code to execute if condition2 is true
} else {
    // Code to execute if all conditions are false
}

דוגמה:

let num = 3;

if (num > 5) {
    console.log("Number is greater than 5");
} else if (num === 5) {
    console.log("Number is equal to 5");
} else {
    console.log("Number is less than 5");
}

בדוגמה זו, נבדק התנאי num > 5. אם הוא מתקיים, יבוצע בלוק הקוד הראשון. אם לא, נבדוק האם num === 5 (כלומר num שווה ל-5 גם מבחינת הטיפוס המספרי וגם מבחינת הערך 5). אם כן, נבצע את בלוק הקוד השני. אחרת, נבצע את בלוק הקוד השלישי.

משפטי תנאי מקוננים

ניתן לקנן משפטי תנאי, כלומר, ליצור משפטי תנאי שבתוך הבלוקים השונים של הקוד יהיו משפטי תנאי נוספים (שגם בבלוקים שלהם ניתן להכניס משפטי תנאי וכן הלאה).

דוגמה:

let num = 15;

if (num > 0) {
    console.log("Number is positive");
    if (num % 2 === 0) {
        console.log("Number is even");
    } else {
        console.log("Number is odd");
    }
} else if (num === 0) {
    console.log("Number is zero");
} else {
    console.log("Number is negative");
}

בדוגמה זו, נבדק התנאי num > 0. אם הוא מתקיים, מבוצע הקוד בבלוק הקוד הראשון. בתוך הבלוק הזה יש תנאי נוסף ובודקים האם num % 2 == 0 (האם מודולוס של num בחלוקה ב-2 הוא 0) ובהתאם לשערוך התנאי מבוצע בלוק הקוד הרלוונטי.

משפטי תנאי מקוצרים והאופרטור הטרינרי

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

let result = (condition) ? value1 : value2;

דוגמה:

let num = 10;
let message = (num > 5) ? "Number is greater than 5" : "Number is not greater than 5";
console.log(message);

בדוגמה זו, נבדק התנאי num > 5. אם הוא מתקיים, הביטוי הטרינרי מחזיר את המחרוזת Number is greater than 5, אחרת הוא מחזיר את ערך המחרוזת Number is not greater than 5. לאחר שערוך הביטוי הטרינרי, תבוצע השמה של ערכו לתוך המשתנה message. בסיום, יודפס ערך המשתנה בקונסול.

ביטויים לוגיים בג'אווה סקריפט

JavaScript מספק אופרטורים לוגיים (&&, ||, !) לשילוב או היפוך של תנאים.

&& - וגם לוגי (AND). מחזיר true אם שני האופרנדים נכונים.

|| - או לוגי (OR). מחזיר true אם לפחות אחד האופרנדים נכון.

! - לא לוגי (NOT). הופך את הערך של האופרנד (מ-true ל-false ולהיפך).

 

דוגמה:

let num = 10;

if (num > 5 && num < 20) {
    console.log("Number is between 5 and 20");
}

הביטוי הלוגי num > 5 && num < 20 משוערך לערך true אם num > 5 משוערך ל-true וגם num < 20 משוערך ל-true. במקרה שהמשתנה num מקבל את הערך 10, אז מתקיים num > 5 וגם num < 20 ומבוצע בלוק הקוד.

 

אופן שערוך הביטויים הלוגיים ב-JavaScript הוא חסכוני ויעיל. במקרה שהביטוי הלוגי מורכב מכמה ביטויים המופרדים באמצעות && או ||, לא יחושבו כל הביטויים אם אין בכך צורך.

בדוגמה לעיל, הביטוי המלא num > 5 && num < 20 מורכב מ-2 ביטויים, הראשון הוא num > 5 והשני הוא num < 20. אם הביטויי הראשון לא מתקיים, כלומר לא מתקיים num > 5, אין טעם לשערך את הביטוי השני, כיוון שבכל מקרה הביטוי הלוגי המלא יחזיר false.

 

דוגמה נוספת:

let isWeekend = false;
let isHoliday = true;

if (!isWeekend && isHoliday) {
    console.log("It's a holiday, but not on the weekend.");
} else {
    console.log("It's either not a holiday, or it's on the weekend.");
}

הביטוי הלוגי משוערך לערך true אם לא מתקיים isWeekend (כלומר isWeekend משוערך לערך false) וגם מתקיים isHoliday (כלומר isHoliday משוערך לערך true).

גם כאן, אם הביטוי isWeekend משוערך כ-true, כלומר הביטוי הראשון שהוא חלק מהביטוי הלוגי המלא אינו מתקיים (הוא משוערך ל-false), אין צורך בכלל לשערך את הביטוי isHoliday, כי הביטוי המלא ממילא ישוערך ל-false.

ערכים המשוערכים ל-true ול-false בג'אווה סקריפט

ל-JavaScript יש ערכי אמת ושקר, שהם ערכים המוערכים כ-true או כ-false כאשר משתמשים בהם בהקשר בוליאני. הבנת ערכי אמת ושקריים חשובה בעת כתיבת תנאים.

ערכי אמת: מחרוזות לא ריקות, מספרים שאינם אפס, מערכים, אובייקטים ועוד.

ערכי שקר: מחרוזות ריקות (''), אפס (0), הערך null, הערך undefineds והערך NaN.

טיפים לשימוש במשפטי תנאי

להלן כמה טיפים שיעזרו לך לכתוב משפטי תנאי ברורים שיחסכו זמן רב של ניפוי באגים.

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