Optional Chaining (?.) ב-JavaScript: גישה בטוחה למאפיינים מקוננים

הבעיה: גישה מקוננת שבירה

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

const user = { name: "Rosa" };

console.log(user.address.city);

user.address הוא undefined, וקריאה של .city מתוך undefined זורקת TypeError: Cannot read properties of undefined. נתונים בעולם האמיתי, תגובות API, JSON מפוענח, שאילתות DOM, מלאים בשדות שאולי קיימים ואולי לא, וכתיבת בדיקות הגנה לכל רמה נהיית רועשת מהר מאוד:

const city = user && user.address && user.address.city;

קריא פחות או יותר עם שתי רמות. כואב עם ארבע. האופרטור ?. הוא הפתרון הנקי יותר.

?. עושה Short-Circuit על null ו-undefined

Optional chaining קורא מאפיין רק אם הערך שלפניו אינו null או undefined. אם כן, כל הביטוי מחושב ל-undefined ונעצר.

const user = { name: "Rosa" };

console.log(user?.name);
console.log(user?.address?.city);
console.log(user?.address?.city?.toUpperCase());

השורה הראשונה קוראת את name כרגיל. השורה השנייה מגיעה ל-user.address, רואה undefined ונסוגה: שאר השרשרת לא רצה אף פעם. השורה השלישית הייתה זורקת שגיאה בלי ?., כי .toUpperCase() הייתה נקראת על undefined; עם ?., כל הביטוי מחושב בשקט ל-undefined.

המודל המנטלי: ?. אומר "אם מה שלפניי הוא null או undefined, וותר והחזר undefined, אחרת המשך".

זה עובד גם על מערכים וקריאות לפונקציות

שלושה תחבירים, אותו רעיון:

const user = {
    name: "Boris",
    tags: ["admin", "editor"],
    greet() {
        return `hi, ${this.name}`;
    },
};

console.log(user?.tags?.[0]);
console.log(user?.greet?.());
console.log(user?.missing?.[0]);
console.log(user?.notAMethod?.());

• ?.[...] לגישה למערך או למאפיין דינמי.
• ?.() לקריאה למשהו שאולי פונקציה ואולי לא.
• ?.name לגישה רגילה למאפיין.

שלושתם עושים short-circuit באותו אופן. user?.notAMethod?.() לא זורק שגיאה למרות ש-notAMethod לא קיים: ה-?. השני רואה undefined ונעצר.

זה שימושי במיוחד ל-callbacks אופציונליים:

function fetchData(url, onDone) {
    const result = { url, status: 200 };
    onDone?.(result);
    return result;
}

fetchData("/users");
fetchData("/users", (r) => console.log("התקבל:", r.status));

אין יותר צורך בשומרי if (typeof onDone === "function") לפני כל קריאה.

רק null ו-undefined מפעילים את ה-Short-Circuit

זה הפרט שמפיל אנשים. ?. מתעניין רק בערכי nullish. ערכי falsy אחרים, 0, "", false, NaN, הם ערכים תקינים לגמרי להמשיך מהם את השרשרת (לפחות במידה ש-autoboxing מאפשר):

const data = { count: 0, label: "" };

console.log(data?.count);
console.log(data?.label);
console.log(data?.count?.toFixed(2));

data.count הוא 0, שהוא falsy אבל לא nullish, ולכן ?.toFixed(2) רץ עליו ומחזיר "0.00". השוו את זה ל-&&:

const data = { count: 0 };

console.log(data && data.count && data.count.toFixed(2));
console.log(data?.count?.toFixed(2));

גרסת ה-&& מחזירה 0, כי data.count הוא falsy ועושה short-circuit. גרסת ה-?. מחזירה "0.00", כי 0 אינו nullish. אם אתם באמת רוצים לעצור על 0, && נכון. אם אתם רוצים לעצור רק כש"הערך חסר", ?. הוא מה שאתם צריכים.

המיקום של ה-? חשוב

?. מגן על הערך שלפניו, לא על זה שאחריו. לכן שימו אותו ברמה שעלולה להיות חסרה:

const config = { server: { host: "localhost" } };

console.log(config?.server.host);
console.log(config.server?.host);
console.log(config?.server?.host);

כאן שלושתם עובדים, כי שום דבר לא באמת חסר. אבל אם config.server עלול להיות undefined, אתם צריכים config.server?.host: ?. לפני server לא יעזור, כי הבעיה היא קריאה של .host מתוך server חסר.

כלל טוב: שימו ?. בכל רמה שבה הערך משמאלו באמת עלול להיות nullish. פיזור ?. על כל נקודה "ליתר ביטחון" מסתיר באגים והופך את הקוד לרועש יותר.

השמה דרך ?. לא עובדת

Optional chaining מיועד לקריאה בלבד. אי אפשר להשתמש בו בצד השמאלי של השמה:

user?.address?.city = "Paris";   // SyntaxError

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

const user = { name: "Rosa", address: {} };

if (user?.address) {
    user.address.city = "Paris";
}

console.log(user);

מתי להשתמש בו, ומתי לא

?. מצטיין כשערך הוא אופציונלי באמת:

• תגובות API שבהן שדות אולי כלולים ואולי לא.
• חיפושים ב-DOM: document.querySelector(".banner")?.remove().
• Callbacks שאולי לא יועברו: options.onError?.(err).
• קריאות משורשרות לספריות שבהן תוצאות ביניים יכולות להיות null.

זה הכלי הלא נכון כשהערך אמור להתקיים תמיד. פיזור ?. כדי להשתיק שגיאות במקרה כזה הופך באג רועש שקל למצוא ("TypeError on line 42") לבאג שקט (משתנה שמשום מה הוא undefined שלוש פונקציות משם). כשמשהו חייב להיות שם, תנו לו לזרוק שגיאה: ה-stack trace עושה לכם טובה.

דוגמה מציאותית

שליפת ערך מתוך תגובת API שאולי חלקית:

const response = {
    user: {
        name: "Ada",
        profile: {
            avatar: null,
        },
    },
};

const avatarUrl = response?.user?.profile?.avatar?.url;
const displayName = response?.user?.name ?? "Guest";
const onClick = response?.user?.profile?.onClick;

console.log(avatarUrl);
console.log(displayName);
onClick?.();

כל ?. מטפל ברמה אחת של אי-ודאות. avatarUrl מסתיים כ-undefined בצורה נקייה. onClick?.() קורא ל-handler אם הוא במקרה קיים.

שימו לב ל-?? בשורה של displayName: זה החצי השני של הדפוס הזה. ?. נותן לכם undefined כשמשהו חסר; ?? מאפשר להציב ברירת מחדל בלי למעוד על ערכי falsy לגיטימיים כמו 0 או "".

הבא בתור: Nullish Coalescing

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