אופרטורים ב-JavaScript: חשבון, השוואה, לוגיקה ועוד

אופרטורים הם הדרך שבה ביטויים עושים עבודה

כל שורה לא טריוויאלית של JavaScript בנויה מאופרטורים: סימנים שלוקחים ערך אחד או שניים ומפיקים ערך חדש. + מחבר, === משווה, && משלב ערכים בוליאניים, ? : בוחר בין שני ערכים. רובם מוכרים משפות אחרות; לכמה מהם יש מוזרויות ייחודיות ל-JavaScript ששווה להכיר מראש.

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

אופרטורי חשבון

הבסיסיים מתנהגים כמו שהייתם מצפים:

console.log(7 + 3);    // 10
console.log(7 - 3);    // 4
console.log(7 * 3);    // 21
console.log(7 / 3);    // 2.3333...
console.log(7 % 3);    // 1   (remainder)
console.log(7 ** 3);   // 343 (exponent)

כמה דברים ששווה לציין:

• / תמיד מבצע חילוק של floating-point. 7 / 2 הוא 3.5, לא 3. השתמשו ב-Math.floor(7 / 2) או ב-Math.trunc(7 / 2) אם אתם רוצים מספר שלם.
• % הוא שארית, לא מודולו מתמטי אמיתי. הוא שומר על הסימן של האופרנד השמאלי: -7 % 3 הוא -1, לא 2.
• + עמוס במשמעויות. אם אחד הצדדים הוא מחרוזת, הוא משרשר במקום לחבר: "3" + 1 הוא "31". עוד על זה בעוד רגע.

הגדלה והקטנה

let count = 5;
count++;           // post-increment: count is now 6
console.log(count);

let other = ++count;  // pre-increment: count becomes 7 first, then assigned
console.log(other, count);

ההבדל בין count++ לבין ++count חשוב רק כשמשתמשים בערך של הביטוי באותה שורה. כפקודה עצמאית, הם עושים אותו דבר. רוב מדריכי הסגנון מעדיפים count += 1 לשם הבהירות.

לאופרטור + יש שתי אישיויות

זה מפיל את כולם לפחות פעם אחת:

console.log(1 + 2);         // 3
console.log("1" + 2);       // "12"
console.log(1 + "2");       // "12"
console.log("price: " + 5); // "price: 5"

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

console.log("10" - 2);   // 8
console.log("10" * 2);   // 20
console.log("10" / "2"); // 5

המסקנה: כשאתם בונים מחרוזות, העדיפו template literals (`price: ${5}`). כשאתם עושים חישובים, ודאו שהקלט שלכם באמת מספרים: Number(x) או parseInt(x, 10) ממירים במפורש.

אופרטורי השוואה

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

console.log(5 === 5);    // true
console.log(5 === "5");  // false  (different types)
console.log(5 == "5");   // true   (== coerces)
console.log(5 !== "5");  // true
console.log(5 != "5");   // false

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

אופרטורי הסדר עובדים כמצופה על מספרים, ובסדר אלפביתי על מחרוזות:

console.log(3 < 5);         // true
console.log(5 >= 5);        // true
console.log("apple" < "banana");  // true
console.log("Z" < "a");           // true (uppercase sorts before lowercase)

השוואת מחרוזות מבוססת על קודי תווים, ולכן היא רגישה לאותיות גדולות וקטנות. אם אתם צריכים מיון ידידותי לבני אדם, השתמשו ב-String.prototype.localeCompare.

אופרטורים לוגיים

&& (וגם), || (או) ו-! (לא) משלבים ערכים בוליאניים, אבל הם מעניינים יותר ממה שאלגברה בוליאנית טהורה הייתה מרמזת.

console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

הטוויסט: && ו-|| לא מחזירים true או false. הם מחזירים את אחד ה_אופרנדים_ שלהם. && מחזיר את הערך ה-falsy הראשון, או את האחרון אם כולם truthy. || מחזיר את הערך ה-truthy הראשון, או את האחרון אם כולם falsy.

console.log("hi" && 42);      // 42     (both truthy, returns last)
console.log(0 && "hi");       // 0      (first falsy)
console.log("" || "fallback"); // "fallback"
console.log("name" || "anon"); // "name"

לכן תראו דפוסים כמו const displayName = user.name || "Guest": בחרו את הדבר הראשון שאינו ריק. זה תמציתי, אבל היזהרו: || מתייחס ל-0, "" ו-false כמפעילי ברירת מחדל. אם אלה ערכים לגיטימיים אצלכם, השתמשו ב-?? במקום (בהמשך).

שני האופרטורים גם עושים short-circuit: אם הצד השמאלי כבר קובע את התשובה, הצד הימני לא רץ אף פעם.

const user = null;
// Safe - the right side is skipped because user is falsy.
user && user.sendEmail();

אופרטור ה-Nullish Coalescing ??

?? דומה ל-|| אבל נכנס לפעולה רק עבור null או undefined, לא עבור 0, "" או false.

const count = 0;

console.log(count || 10);   // 10  (0 is falsy, so fallback wins)
console.log(count ?? 10);   // 0   (0 isn't nullish, so kept)

const name = undefined;
console.log(name ?? "Anon"); // "Anon"

השתמשו ב-?? כשערך לגיטימי עשוי להיות falsy: ספירות, מחרוזות ריקות, false מפורש. השתמשו ב-|| כשכל ערך falsy צריך לסמן "חסר". בקוד מודרני, ?? היא ברירת המחדל הבטוחה יותר לערכים אופציונליים עם ברירות מחדל שאינן null.

אופרטורי השמה

= מציב ערך. הצורות המורכבות משלבות השמה עם אופרטור נוסף:

let x = 10;
x += 5;    // x = x + 5  → 15
x -= 3;    // 12
x *= 2;    // 24
x /= 4;    // 6
x %= 4;    // 2
x **= 3;   // 8
console.log(x);

יש גם אופרטורי השמה לוגיים, ||=, &&= ו-??=, שמציבים ערך רק אם הערך הנוכחי עומד בתנאי:

const config = { timeout: 0, retries: null };

config.timeout ??= 5000;   // only assigns if null/undefined; 0 stays
config.retries ??= 3;      // null, so assigned
config.host ||= "localhost"; // undefined is falsy, so assigned

console.log(config);

הם שימושיים למילוי ברירות מחדל בלי פקודות if ארוכות.

אופרטור ה-Ternary

condition ? a : b הוא גרסת ביטוי של if/else. הוא מחזיר את a כשהתנאי truthy, ואת b אחרת:

const age = 20;
const status = age >= 18 ? "adult" : "minor";
console.log(status);

const count = 1;
const label = count === 1 ? "item" : "items";
console.log(`${count} ${label}`);

Ternary מצטיין בבחירת ערך קצרה. הוא הופך לקשה לקריאה ברגע שמקננים אותו: אם אתם מוצאים את עצמכם כותבים a ? b : c ? d : e, עברו ל-if/else או לאובייקט חיפוש.

typeof ו-instanceof

typeof מחזיר מחרוזת שמתארת את הטיפוס של האופרנד שלו:

console.log(typeof 42);         // "number"
console.log(typeof "hi");       // "string"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object"  ← historical bug, can't be fixed
console.log(typeof []);         // "object"
console.log(typeof function(){}); // "function"

שתי מלכודות ששווה לזכור: typeof null הוא "object" (באג מ-1995 שנשאר לתמיד), וגם מערכים מדווחים "object". השתמשו ב-Array.isArray(x) למערכים וב-x === null ל-null.

instanceof בודק אם אובייקט נבנה מבנאי מסוים:

class Dog {}
const rex = new Dog();

console.log(rex instanceof Dog);     // true
console.log(rex instanceof Object);  // true (every object is)
console.log([] instanceof Array);    // true

Spread ו-Rest משתמשים באותו ...

תראו ... בשני מקומות. בתור spread, הוא פורש iterable לאיברים בודדים:

const nums = [1, 2, 3];
const more = [0, ...nums, 4];
console.log(more);                // [0, 1, 2, 3, 4]

const user = { name: "Ada" };
const full = { ...user, age: 30 };
console.log(full);                // { name: "Ada", age: 30 }

console.log(Math.max(...nums));   // 3

בתור rest, הוא אוסף כמה ערכים למערך אחד, בדרך כלל בפרמטרים של פונקציה או בפירוק:

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4));  // 10

const [first, ...others] = [10, 20, 30, 40];
console.log(first, others);    // 10 [20, 30, 40]

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

קדימות אופרטורים (בספק, הוסיפו סוגריים)

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

console.log(1 + 2 * 3);          // 7,  not 9
console.log((1 + 2) * 3);        // 9
console.log(true || false && false);  // true, because && binds tighter than ||

הטבלה המלאה ארוכה, ואף אחד לא זוכר את כולה. הרגל פשוט מכסה 99% מהמקרים: כשאתם מערבבים אופרטורים ואתם לא בטוחים בסדר, הוסיפו סוגריים. הקוד קריא יותר ולא תלוי בזיכרון של הקורא.

אופרטורי סיביות (לרוב לא מה שאתם צריכים)

לשם השלמות: &, |, ^, ~, <<, >> ו->>> פועלים על הייצוג הבינארי של מספרים שלמים. תראו אותם בקוד גרפי, בפרוטוקולים ברמה נמוכה, ומדי פעם ב-API שמשתמש ב-bitmask של דגלים.

console.log(5 & 3);   // 1   (0101 & 0011 = 0001)
console.log(5 | 3);   // 7
console.log(5 ^ 3);   // 6
console.log(~5);      // -6
console.log(1 << 3);  // 8

טריק נפוץ אבל מפוקפק: n | 0 חותך מספר למספר שלם של 32 ביט, ואנשים נהגו לנצל אותו כ-Math.trunc מהיר יותר. אל תעשו את זה: Math.trunc ברור יותר ועובד גם למספרים מחוץ לטווח של 32 ביט.

הבא בתור: if/else

אופרטורים מפיקים ערכים; if/else משתמש בערכים האלה כדי לבחור איזה ענף קוד להריץ. רוב מה שתעשו עם אופרטורי ההשוואה והלוגיקה שלמעלה הוא להזין את התוצאות שלהם לתנאים, ובדיוק על זה העמוד הבא.