JavaScript – Ternary & Nullish Coalescing Operators

Ternary & Nullish Coalescing Operators הם אופרטורים בשפת JavaScript אשר מטרתם להקל עלינו ולחסוך לנו משפטי תנאי בסיטואציות מסוימות

כאשר אנו כותבים קוד, לא מעט פעמים אנו נתקלים בסיטואציות שדורשות מאתנו שימוש במשפטי תנאי,
וככל שהתוכנית שלנו גודלת – בד"כ כמות משפטי התנאי גודלת במקביל.
משום שכמתכנתים תמיד נחתור לכתוב קוד שהוא קריא ולא "קוד ספגטי" – עובדה זו יכולה להפריע לנו,
ולכן יש לנו כל מיני פתרונות למצבים כאלו.

במאמר זה נראה כיצד Ternary & Nullish Coalescing Operators יכולים לסייע לנו בנושא.
מדובר באופרטורים שקיימים גם בשפות תכנות אחרות, אך במאמר זה הדוגמאות נכתבו בשפת JavaScript.

Ternary Operator

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

כלומר שנציב תנאי, למשל  x + y == 3 ולאחריו סימן שאלה (?).
לאחר מכן נכתוב מה קורה אם התנאי הוא אמת, ולאחריו סימן נקודותיים (:), ולבסוף נכתוב מה קורה אם התנאי הוא לא אמת (כזב).

שימו לב לקטע הקוד הבא שבו נדגים זאת:

function equalsTo3(x, y) {
    return x + y == 3 ? 3 : 'not equals to 3';
}

console.log(equalsTo3(1, 2));
console.log(equalsTo3(1, 5));

יצרנו פונקציה אשר מקבלת שני פרמטרים – x ו-y ובתוכה משפט התנאי המקוצר.
אם חיבור של שניהם לא יניב 3 – תוצג לנו הודעה תואמת.
נוכל להיעזר בתרשים הבא על מנת להבין זאת:

שימו לב שגם נוכל להציב ב-expressions קריאות לפונקציות למשל ועוד,
אולם מה שלא נוכל לעשות זה להציב בהם break או return.
שימו לב לקוד הקטע הבא שלא יפעל מסיבה זו בדיוק:

function printTill5(array) {
    array.forEach(item => item != 5 ? console.log(item) : break)
}

console.log(printTill5(1, 2, 3, 4, 5, 6));

אם כך, ניתן לומר ש-Ternary Operator הוא יעיל רק לסיטואציות מסוימות.

Nested Ternary

כמו כן, נוכל להשתמש בו לתנאים מסועפים, לא תמיד זה מומלץ אך יכול להיות נוח וקריא במקרים מסוימים.
נתאר לנו מצב שבו יש לנו בתוכנית פונקציית ולידציה אשר מוודאת את תקינותם של פרטים כלשהם,
הפונקציה תקבל את הפרטים כפרמטרים תבצע בדיקה לכל אחד מהם ותחזיר לנו מחרוזת כתשובה.
שימו לב ל-Code Snippet הבא שידגים סיטואציה כזו:

function validate(msg, date, tel) {
    var validation = '';

    msg == '' ? validation = 'no message' : 
    date == '' ? validation = 'wrong date' : 
    tel == '' || tel.length != 12 ? validation = 'wrong number' : validation = 'success';
    return validation;
}

console.log(validate('', new Date(), '972520000000')); // no message
console.log(validate('blabla', '', '972520000000')); // wrong date
console.log(validate('blabla', new Date(), '972')); // wrong number

console.log(validate('blabla', new Date(), '972520000000')); // success

כלומר שהשתמשנו כאן במשפטי תנאי מסועפים, או יותר נכון Nested Ternary,

במקום לכתוב if בתוך if בתוך if…

כעת, לאחר שהבנו היטב את אופן פעולתו של ה-Ternary Operator נעבור ל-Nullish Coalescing Operator.

Nullish Coalescing Operator

אופרטור מיוחד נוסף שנוכל להשתמש בו על מנת לחסוך משפטי if הוא אופרטור ה-Nullish Coalescing.
אופן הפעולה של אופרטור זה (אשר מיוצג על ידי שני סימני שאלה רצופים – ??),
הוא כזה שהוא מדמה מצב שאנו מעוניינים לבדוק אם ערך הוא null או undefined, כאשר התחביר שלו עובד כך:

תחביר זה אומר לנו בעצם שאם varA הוא null או undefined אז result יקבל את הערך של varB.
שימו לב לקטע הקוד הבא שיבאר זאת:

var varA = 5;
var varB;

var result1 = varA ?? varB;
var result2 = varB ?? varA;

console.log(result1); // 5
console.log(result2); // 5

בדוגמא זו הצהרנו על שני משתנים – varA ו-varB, אתחלנו רק את varA לעומת varB שנשאר לא מאותחל.
כאשר ביצענו את הבדיקה על varA קיבלנו את התוצאה 5,
אם כך, מדוע קיבלנו את אותה התוצאה כאשר ביצענו בדיקה על varB?

משום שמהסיבה ש-varB איננו מאותחל, ערכו שווה ל-null – אז result קיבל את הערך של varA.
שימו לב לתרשים הבא שיבאר זאת:

שימוש משולב של Ternary & Nullish Coalescing Operators

כאופרטורים, כמובן שנוכל לשלב אותם גם אחד בתוך השני, אך הדבר אפשרי כל עוד מה שאנחנו מנסים לעשות זה דבר הגיוני.
כלומר שנתאר לנו מצב שבו אנו מעוניינים לבדוק אם varA שווה ל-varB.
אם הם מאותחלים אז נקבל את הערך של varA, במידה אינם מאותחלים – נקבל הודעה תואמת:

var varA;
var varB;

function areEqual(varA, varB){
    return varA != varB ? 'varA & vaB areB are not equal' : varA ?? varB ? varA : 'varA & vaB are not initialized';
}

console.log(areEqual(varA, varB));
varA = 1, varB = 1;
console.log(areEqual(varA, varB));
varA++;
console.log(areEqual(varA, varB));

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

• לקריאה מורחבת על Ternary Operator יש ללחוץ כאן
• לקריאה מורחבת על Nullish Coalescing Operator יש ללחוץ כאן