אופרטורי השוואה ב-JavaScript: == מול === ו-Object.is

שתי דרכים לשאול "האם אלה שווים?"

JavaScript נותנת שני אופרטורי שוויון: === (מחמיר) ו-== (רופף). הם נראים כמעט זהים. הם מתנהגים שונה מאוד.

console.log(1 === 1);      // true
console.log(1 === "1");    // false

console.log(1 == 1);       // true
console.log(1 == "1");     // true

=== בודק אם לשני האופרנדים יש אותו טיפוס וגם אותו ערך. == ממיר קודם את האופרנדים לטיפוס משותף, ורק אז משווה. ההמרה הזו, type coercion, היא המקור לרוב המוניטין של JavaScript בנושא שוויון.

הגרסה הקצרה: השתמשו ב-=== כברירת מחדל. את הגרסה הארוכה שווה לקרוא פעם אחת, כדי לדעת ממה אתם מוותרים.

שוויון מחמיר: מה שכנראה תרצו

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

console.log(42 === 42);           // true
console.log("hi" === "hi");       // true
console.log(true === true);       // true

console.log(42 === "42");         // false - different types
console.log(0 === false);         // false - different types
console.log(null === undefined);  // false - different types

אם הטיפוסים לא תואמים, התשובה היא false מיד. אם הם תואמים, JavaScript משווה את הערכים. בערכים פרימיטיביים זו השוואת ערכים; באובייקטים זו השוואת הפניות (עוד על זה בעוד רגע).

!== הוא אופרטור אי השוויון המחמיר, והוא פועל לפי אותם כללים בכיוון ההפוך.

שוויון רופף: המרה בתחפושת

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

console.log(1 == "1");        // true - string becomes number
console.log(0 == false);      // true - boolean becomes number
console.log("" == 0);         // true - string becomes number
console.log(null == undefined); // true - special-cased
console.log("0" == false);    // true - both become 0

הכללים המדויקים נמצאים במפרט, והם לא נוראיים, אבל לזכור אותם באמצע דיבוג זה סיפור אחר. העובדה ש-"0" == false הוא true תופסת גם מפתחים מנוסים. כך גם [] == false (גם true, כי המערך מומר ל-"", שמומר ל-0).

זו הסיבה שרוב מדריכי הסגנון, וגם הכלל eqeqeq של ESLint, אומרים להשתמש ב-=== כברירת מחדל. אתם משלמים בתו אחד נוסף ומקבלים כללים שאפשר באמת לזכור.

התבנית השימושית היחידה של ==

יש ביטוי אחד של שוויון רופף ששווה להכיר: x == null מחזיר true כש-x הוא null או undefined, ו-false בכל מקרה אחר.

function greet(name) {
    if (name == null) {
        return "Hello, stranger";
    }
    return `Hello, ${name}`;
}

console.log(greet());           // Hello, stranger
console.log(greet(null));       // Hello, stranger
console.log(greet("Rosa"));     // Hello, Rosa
console.log(greet(0));          // Hello, 0 - not treated as missing

המקבילה המחמירה היא x === null || x === undefined, שעובדת אבל רועשת יותר לקריאה. בהרבה בסיסי קוד == null הוא החריג המבורך היחיד. בחרו כלל ויישמו אותו בעקביות.

אובייקטים מושווים לפי הפניה

באובייקטים, במערכים ובפונקציות, גם === וגם == שואלים את אותה שאלה: "האם שני הצדדים מצביעים לאותו אובייקט בזיכרון?" ולא "האם יש להם אותו תוכן?"

const a = { name: "Ada" };
const b = { name: "Ada" };
const c = a;

console.log(a === b);  // false - different objects
console.log(a === c);  // true - same reference
console.log(a == b);   // false - still different objects

שני object literals עם תוכן זהה הם עדיין שני אובייקטים שונים. זה מכשיל כל אחד לפחות פעם אחת.

להשוואה לפי ערך, כתבו פונקציית עזר משלכם, השתמשו בספרייה (lodash.isequal), או סרלזו עם JSON.stringify לאובייקטים פשוטים:

const a = { x: 1, y: 2 };
const b = { x: 1, y: 2 };

console.log(JSON.stringify(a) === JSON.stringify(b)); // true

JSON.stringify עובד רק עם נתונים פשוטים: הוא מתעלם מפונקציות, מ-undefined ומ-symbols, ולא מבטיח סדר מפתחות זהה בין מנועים בכל הצורות. זו בדיקה מהירה, לא פתרון כללי.

NaN לא שווה לשום דבר

NaN ("not a number") הוא הערך ש-JavaScript מחזירה כשלפעולה מספרית אין תשובה בעלת משמעות: 0/0, Number("abc"), Math.sqrt(-1). שני אופרטורי השוויון מחזירים false כשאחד הצדדים הוא NaN, כולל כששני הצדדים הם NaN:

console.log(NaN === NaN);  // false
console.log(NaN == NaN);   // false

const result = Number("oops");
console.log(result);              // NaN
console.log(result === NaN);      // false - doesn't work
console.log(Number.isNaN(result)); // true - this is the check

כדי לזהות NaN, השתמשו ב-Number.isNaN(value). אל תשתמשו בפונקציה הגלובלית הישנה isNaN: היא ממירה קודם את הארגומנט שלה, ולכן isNaN("hello") מחזיר true, וזה כמעט אף פעם לא מה שרוצים.

Object.is: כמעט ===, עם שני תיקונים

Object.is(a, b) מתנהג כמו === חוץ משני מקרי קצה:

console.log(Object.is(NaN, NaN));   // true  (=== returns false)
console.log(Object.is(0, -0));      // false (=== returns true)

console.log(NaN === NaN);           // false
console.log(0 === -0);              // true

ברוב הזמן === הוא מה שרוצים. השתמשו ב-Object.is כשצריך במפורש להתייחס ל-NaN כשווה לעצמו, או להבחין בין +0 ל--0: שני המקרים נדירים, ושניהם חשובים לפעמים בקוד מספרי ובמנגנונים הפנימיים של frameworks (React משתמשת ב-Object.is להשוואות של state).

אופרטורי אי שוויון מתחלקים באותו אופן

!== הוא מחמיר, != הוא רופף, ואותה עצה חלה:

console.log(1 !== "1");  // true  - different types
console.log(1 != "1");   // false - coerced, values match

console.log(null !== undefined); // true
console.log(null != undefined);  // false

השתמשו ב-!== כברירת מחדל. אם כבר התרתם == null, אפשר להתיר גם את המקבילה שלו != null לבדיקה של "לא null וגם לא undefined".

רשימת בדיקה להשוואת ערכים

כשצריך להשוות שני ערכים, עברו על הרשימה הזו:

• ערכים פרימיטיביים, מצפים לאותו טיפוס? השתמשו ב-===.
• בודקים null או undefined? x == null בסדר אם מדריך הסגנון שלכם מתיר זאת; אחרת x === null || x === undefined.
• בודקים NaN? Number.isNaN(x).
• משווים אובייקטים לפי זהות? === עושה בדיוק מה שרוצים.
• משווים אובייקטים לפי תוכן? כתבו פונקציית עזר, השתמשו בספרייה, או סרלזו. האופרטורים המובנים לא יעזרו כאן.

היצמדו ל-===, התייחסו ל-== ככלי מיוחד למקרה של == null, ותתחמקו מהמוזרויות של שוויון שממלאות את רשימות השאלות הנפוצות על JavaScript.

הבא בתור: אופרטורים

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