Nullish Coalescing (??) ב-JavaScript: ערכי ברירת מחדל נכונים

ברירת מחדל חכמה יותר

ל-JavaScript תמיד היה קיצור לברירות מחדל: value || fallback. זה עובד ברוב המקרים, אבל יש בו באג מובנה: הוא מתייחס ל_כל_ ערך falsy כאל ערך חסר. 0, '' ו-false כולם מפעילים את ברירת המחדל, גם כשהם התשובה האמיתית.

אופרטור ה-nullish coalescing ?? מתקן את זה. הוא עובר לברירת המחדל רק עבור null או undefined:

const a = 0 ?? 10;
const b = '' ?? 'empty';
const c = null ?? 'default';
const d = undefined ?? 'default';

console.log(a, b, c, d);

0 ו-'' שורדים. null ו-undefined לא. זה כל האופרטור.

למה || לא מספיק

הנה הבאג הקלאסי ש-?? נועד למנוע:

function createUser(options) {
  const volume = options.volume || 100;
  const nickname = options.nickname || 'Anonymous';
  return { volume, nickname };
}

console.log(createUser({ volume: 0, nickname: '' }));

המשתמש ביקש עוצמת קול 0 (שקט) וכינוי ריק. שניהם נדרסו בשקט, כי || לא יודע להבחין בין "חסר" לבין "falsy".

החליפו ל-??:

function createUser(options) {
  const volume = options.volume ?? 100;
  const nickname = options.nickname ?? 'Anonymous';
  return { volume, nickname };
}

console.log(createUser({ volume: 0, nickname: '' }));
console.log(createUser({}));

עכשיו 0 ו-'' עוברים בלי שינוי, ורק שדות שבאמת חסרים מקבלים את ברירת המחדל. כמעט תמיד זה מה שאתם רוצים.

המודל המנטלי

?? שואל שאלה אחת: האם הצד השמאלי הוא null או undefined? שום דבר אחר לא נחשב.

בחרו ב-?? כשיש בנתונים שלכם ערכי falsy בעלי משמעות. בחרו ב-|| כשאתם באמת רוצים לדחות כל דבר falsy (מחרוזות ריקות, ספירות של אפס וכדומה). המקרה הזה קיים, אבל הוא נדיר יותר ממה שנהוג לחשוב.

Short-Circuit

כמו || ו-&&, גם ?? עושה short-circuit. אם הצד השמאלי אינו nullish, הצד הימני לא רץ בכלל:

function expensiveDefault() {
  console.log('computing default...');
  return 'fallback';
}

const a = 'real value' ?? expensiveDefault();
const b = null ?? expensiveDefault();

console.log(a);
console.log(b);

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

השילוב עם Optional Chaining

?? ו-?. נוספו יחד ב-ES2020, והם תוכננו לעבוד כצוות. Optional chaining עובר על נתיב שאולי חסר ומחזיר undefined אם אחד השלבים חסר; nullish coalescing ממלא אז ברירת מחדל הגיונית:

const response = {
  user: {
    profile: null,
  },
};

const theme = response?.user?.profile?.theme ?? 'light';
const tags = response?.user?.posts?.[0]?.tags ?? [];

console.log(theme);
console.log(tags);

בלי הצמד הזה, אותו קוד הוא שרשרת מכוערת של בדיקות && או try/catch. איתם, גישה בטוחה וברירות מחדל שפויות נכנסות בשורה אחת.

השמת Nullish: ??=

a ??= b מציב את b ב-a רק כש-a הוא null או undefined. זה אופרטור ההשמה הלוגית מסוג nullish, והוא עושה short-circuit: אם ל-a כבר יש ערך, הצד הימני לא מחושב.

function withDefaults(options) {
  options.retries ??= 3;
  options.timeout ??= 5000;
  options.verbose ??= false;
  return options;
}

console.log(withDefaults({ timeout: 10000 }));
console.log(withDefaults({ verbose: false, retries: 0 }));

שימו לב ש-verbose: false ו-retries: 0 נשמרים: ??= ממלא רק את מה שבאמת חסר. השוו ל-||=, שהיה דורס את שניהם.

קדימות וכלל הסוגריים

?? מסרב בכוונה להתערבב עם || או && בלי סוגריים. הקוד הזה זורק SyntaxError:

const x = a || b ?? c;   // SyntaxError

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

const a = null;
const b = 0;
const c = 'fallback';

const x = (a || b) ?? c;
const y = a || (b ?? c);

console.log(x);
console.log(y);

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

זה לא אותו דבר כמו פרמטר ברירת מחדל

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

function greet(name = 'friend') {
  return `Hello, ${name}`;
}

console.log(greet());          // uses default
console.log(greet(undefined)); // uses default
console.log(greet(null));      // does NOT use default

אם אתם רוצים שגם null יפעיל את ברירת המחדל, השתמשו ב-?? בתוך גוף הפונקציה:

function greet(name) {
  const who = name ?? 'friend';
  return `Hello, ${who}`;
}

console.log(greet(null));
console.log(greet(undefined));
console.log(greet('Rosa'));

הבחנה קטנה, וקל למעוד עליה כש-API מחזיר לכם null במשמעות "לא הוגדר ערך".

מתי לבחור ב-??

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

הבא בתור: מחלקות

זה הכול לגבי אובייקטים ומערכים: יש לכם את הכלים לבנות מבני נתונים ולנווט בהם בבטחה. הפרק הבא עובר לארגון התנהגות: מחלקות, ירושה ומערכת ה-prototype שמתחתיהן.