Optional Chaining w JavaScript (?.): bezpieczny dostęp

Problem: zagnieżdżony dostęp jest kruchy

Sięganie do zagnieżdżonego obiektu działa dobrze, dopóki któregoś poziomu nie zabraknie:

const user = { name: "Rosa" };

console.log(user.address.city);

user.address to undefined, a odczyt .city z undefined rzuca TypeError: Cannot read properties of undefined. Prawdziwe dane (odpowiedzi API, sparsowany JSON, zapytania do DOM) są pełne pól, które mogą istnieć albo nie, a pisanie zabezpieczeń dla każdego poziomu szybko robi się uciążliwe:

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

Przy dwóch poziomach jeszcze czytelne. Przy czterech bolesne. Operator ?. to czystsze rozwiązanie.

?. przerywa na null i undefined

Optional chaining odczytuje właściwość tylko wtedy, gdy wartość przed nim nie jest null ani undefined. Jeśli jest, całe wyrażenie daje undefined i się zatrzymuje.

const user = { name: "Rosa" };

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

Pierwsza linijka normalnie czyta name. Druga trafia na user.address, widzi undefined i się wycofuje: reszta łańcucha w ogóle się nie wykonuje. Trzecia bez ?. rzuciłaby błąd, bo .toUpperCase() zostałoby wywołane na undefined. Z ?. całość po cichu daje undefined.

Model myślowy: ?. znaczy "jeśli to, co przede mną, to null lub undefined, poddaj się i zwróć undefined, a w przeciwnym razie idź dalej".

Działa też na tablicach i wywołaniach funkcji

Trzy składnie, ta sama idea:

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?.());

• ?.[...] do dostępu do tablic albo dynamicznych właściwości.
• ?.() do wywołania czegoś, co może być funkcją, ale nie musi.
• ?.name do zwykłego dostępu do właściwości.

Wszystkie trzy przerywają tak samo. user?.notAMethod?.() nie rzuca błędu, mimo że notAMethod nie istnieje: drugie ?. widzi undefined i się zatrzymuje.

To szczególnie wygodne przy opcjonalnych callbackach:

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

fetchData("/users");
fetchData("/users", (r) => console.log("otrzymano:", r.status));

Koniec z zabezpieczeniami if (typeof onDone === "function") przed każdym wywołaniem.

Przerwanie uruchamiają tylko null i undefined

To szczegół, na którym ludzie się potykają. ?. interesują tylko wartości nullish. Inne wartości falsy, czyli 0, "", false, NaN, to całkiem poprawne wartości, na których można kontynuować łańcuch (na tyle, na ile pozwala autoboxing):

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

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

data.count to 0, czyli wartość falsy, ale nie nullish, więc ?.toFixed(2) się na niej wykonuje i zwraca "0.00". Porównaj to z &&:

const data = { count: 0 };

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

Wersja z && zwraca 0, bo data.count jest falsy i przerywa obliczanie. Wersja z ?. zwraca "0.00", bo 0 nie jest nullish. Jeśli naprawdę chcesz zatrzymać się na 0, && jest właściwe. Jeśli chcesz zatrzymać się tylko wtedy, gdy "wartości brakuje", potrzebujesz ?..

Miejsce ? ma znaczenie

?. chroni wartość przed sobą, a nie po sobie. Dlatego stawiaj go na poziomie, którego może brakować:

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

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

Tutaj działają wszystkie trzy, bo niczego naprawdę nie brakuje. Ale jeśli config.server może być undefined, potrzebujesz config.server?.host: ?. przed server by nie pomogło, bo problemem jest odczyt .host z brakującego server.

Dobra zasada: stawiaj ?. na każdym poziomie, na którym wartość przed nim naprawdę może być nullish. Rozsypywanie ?. przy każdej kropce "na wszelki wypadek" ukrywa błędy i zaśmieca kod.

Przypisanie przez ?. nie działa

Optional chaining służy tylko do odczytu. Nie możesz go użyć po lewej stronie przypisania:

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

To ma sens, jeśli się nad tym zastanowić: co miałoby znaczyć przypisanie do właściwości undefined? Jeśli chcesz ustawić wartość tylko wtedy, gdy rodzic istnieje, zapisz to wprost:

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

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

console.log(user);

Kiedy po niego sięgać, a kiedy nie

?. błyszczy, gdy wartość jest naprawdę opcjonalna:

• Odpowiedzi API, w których pola mogą się pojawić albo nie.
• Wyszukiwania w DOM: document.querySelector(".banner")?.remove().
• Callbacki, które mogą nie zostać przekazane: options.onError?.(err).
• Łańcuchy wywołań bibliotek, w których wyniki pośrednie mogą być null.

To złe narzędzie, gdy wartość powinna istnieć zawsze. Sypanie ?., żeby uciszyć błędy w takim przypadku, zamienia głośny, łatwy do znalezienia błąd ("TypeError w linii 42") w cichy (zmienna tajemniczo równa undefined trzy funkcje dalej). Gdy coś musi tam być, pozwól, żeby rzuciło błąd: stack trace robi ci przysługę.

Realistyczny przykład

Wyciąganie wartości z odpowiedzi API, która może być niekompletna:

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?.();

Każde ?. obsługuje jeden poziom niepewności. avatarUrl czysto kończy jako undefined. onClick?.() wywołuje handler, jeśli akurat istnieje.

Zwróć uwagę na ?? w linijce z displayName: to druga połowa tego wzorca. ?. daje undefined, gdy czegoś brakuje, a ?? pozwala podstawić wartość domyślną bez potykania się o poprawne wartości falsy, takie jak 0 czy "".

Dalej: nullish coalescing

?. i ?? to ta sama idea zastosowana do różnych problemów: oba traktują null i undefined jako "brak", a inne wartości falsy zostawiają w spokoju. W następnej części: jak ?? daje rozsądne wartości domyślne i dlaczego || od lat po cichu robi to źle.