if else ב-JavaScript: תנאים, else if ואופרטור טרנרי

המבנה של משפט if

משפט if מריץ בלוק קוד רק כשתנאי מתקיים. המבנה הוא מילת מפתח, תנאי בסוגריים ובלוק בסוגריים מסולסלים:

const age = 21;

if (age >= 18) {
  console.log("מותר לך להצביע.");
}

התנאי age >= 18 מוערך כ-true, ולכן הבלוק רץ. אם age היה 16, התנאי היה false ו-JavaScript הייתה מדלגת על הבלוק לגמרי.

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

else: הענף החלופי

צרפו else ל-if כדי להריץ קוד אחר כשהתנאי לא מתקיים:

const hour = 14;

if (hour < 12) {
  console.log("בוקר טוב");
} else {
  console.log("צהריים טובים");
}

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

else if: בחירה מתוך כמה אפשרויות

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

const score = 78;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else if (score >= 60) {
  console.log("D");
} else {
  console.log("F");
}

רק ענף אחד רץ. ברגע שתנאי מתאים, השאר מדולגים, גם אם גם הם היו מתקיימים. לכן הסדר חשוב: אם הייתם הופכים את השרשרת ובודקים קודם score >= 60, כל מי שמעל 60 היה מקבל D.

ה-else האחרון אופציונלי, אבל הוספה שלו מבהירה את הכוונה: "אם שום דבר אחר לא התאים, עשו את זה".

תנאי יכול להיות כל ביטוי

מה שבתוך הסוגריים לא חייב להיות השוואה. זה יכול להיות כל ביטוי, ו-JavaScript ממירה את התוצאה לבוליאני:

const name = "Ada";
const items = [];

if (name) {
  console.log("name מוגדר");
}

if (items.length) {
  console.log("יש פריטים בעגלה");
} else {
  console.log("העגלה ריקה");
}

מחרוזות לא ריקות הן truthy. 0 ומחרוזות ריקות הן falsy, ולכן כש-items.length הוא 0 נכנסים לענף ה-else. זה הביטוי המקובל ב-JavaScript לבדיקה "האם יש שם משהו".

הרשימה המלאה של ערכי falsy קצרה ושווה לזכור אותה בעל פה: false, 0, -0, 0n, "", null, undefined ו-NaN. כל השאר truthy, כולל "0", "false", [] ו-{}. שני האחרונים מפילים אנשים.

שילוב תנאים: && ו-||

השתמשו ב-&& (וגם) וב-|| (או) כדי לשלב תנאים:

const age = 25;
const hasTicket = true;
const isVip = false;

if (age >= 18 && hasTicket) {
  console.log("ברוכים הבאים, אפשר להיכנס");
}

if (isVip || age >= 65) {
  console.log("כניסה בעדיפות");
} else {
  console.log("תור רגיל");
}

&& דורש ששני הצדדים יהיו truthy. || דורש לפחות אחד. שניהם מבצעים קצר (short-circuit): && עוצר בערך ה-falsy הראשון, ו-|| עוצר בערך ה-truthy הראשון. זה חשוב כשלתנאי השני יש תופעת לוואי או שהוא עלול לזרוק שגיאה: user && user.name מחזיר בבטחה undefined אם user הוא null, בלי להתפוצץ.

עטפו לוגיקה מעורבת בסוגריים כדי שסדר הקדימויות יהיה ברור:

const age = 20;
const isMember = true;
const hasPass = false;

if ((isMember || hasPass) && age >= 18) {
  console.log("הכניסה אושרה");
}

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

== מול === (השתמשו ב-===)

כשבודקים שוויון בתוך if, השתמשו ב-=== וב-!==, לא ב-== וב-!=:

const input = "42";

if (input === 42) {
  console.log("קפדני: התאים למספר");
} else {
  console.log("קפדני: לא התאים");
}

if (input == 42) {
  console.log("רופף: התאים אחרי המרה");
}

== ממיר טיפוסים לפני ההשוואה, וזה מוביל להפתעות כמו "" == 0 שהוא אמת ו-null == undefined שהוא אמת. === משווה בלי המרה: אותו טיפוס ואותו ערך. השתמשו ב-=== כברירת מחדל. החריג הנפוץ היחיד הוא x == null, שבודק גם null וגם undefined בבת אחת.

האופרטור הטרנרי

לבחירה בין שני ערכים, האופרטור הטרנרי condition ? a : b לרוב נקי יותר מ-if/else מלא:

const age = 17;

const label = age >= 18 ? "מבוגר" : "קטין";
console.log(label);

function greeting(hour) {
  return hour < 12 ? "בוקר טוב" : "צהריים טובים";
}

console.log(greeting(9));
console.log(greeting(20));

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

אפשר לשרשר טרנרים, אבל הקריאות צונחת מצוק:

// אל תעשו את זה:
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";

אם אתם משרשרים, חזרו ל-else if.

if מקונן מול else if שטוח

לפעמים תנאי אחד הגיוני רק בתוך תנאי אחר. קינון מתאים לזה:

const user = { loggedIn: true, role: "admin" };

if (user.loggedIn) {
  if (user.role === "admin") {
    console.log("הצגת לוח הניהול");
  } else {
    console.log("הצגת לוח המשתמש");
  }
} else {
  console.log("הפניה להתחברות");
}

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

function describe(user) {
  if (!user.loggedIn) return "הפניה להתחברות";
  if (user.role === "admin") return "הצגת לוח הניהול";
  return "הצגת לוח המשתמש";
}

console.log(describe({ loggedIn: true, role: "admin" }));
console.log(describe({ loggedIn: false }));

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

מלכודת נפוצה: השמה בתוך if

= מציב. === משווה. בלבול ביניהם בתוך תנאי הוא באג קלאסי:

let status = "pending";

// באג: זו השמה, לא השוואה.
if (status = "done") {
  console.log("זה תמיד רץ");
}

console.log("status עכשיו:", status);

status = "done" מציב את "done" ב-status ומוערך כ-"done", שהוא truthy, כך שהבלוק תמיד רץ, ודרסתם את המשתנה בשקט. Linters תופסים את זה. Strict mode לא. פשוט היזהרו, והשתמשו ב-=== כשאתם מתכוונים להשוות.

הבא בתור: switch

כשמשווים ערך אחד מול הרבה התאמות אפשריות, שרשרת else if ארוכה מתחילה להרגיש חזרתית. משפט switch של JavaScript נבנה בדיוק למקרה הזה, ויש לו מוזרויות משלו סביב break ו-fall-through, שהן הנושא הבא.