?.
Operator ?. (optional chaining) bezpiecznie odczytuje właściwość. Gdy obiekt to null lub undefined, zwraca undefined zamiast błędu.
- Zwraca
- Wartość właściwości lub wynik wywołania albo
undefined, gdy wartość przed?.tonulllubundefined.
Przykład
#const ania = { name: 'Ania', address: { city: 'Kraków' } }
const guest = { name: 'Gość' }
console.log(ania.address?.city)
console.log(guest.address?.city)Definicja i zastosowanie
#Operator ?. sprawdza wartość po swojej lewej stronie. Jeśli to null albo undefined, całe wyrażenie od razu daje wynik undefined. W przeciwnym razie działa jak zwykła kropka.
Rozwiązuje częsty problem z danymi, które mogą być niekompletne, np. odpowiedzią z API. Zamiast user && user.address && user.address.city wystarczy user?.address?.city. Działa też z nawiasami kwadratowymi obj?.[key] i z wywołaniem funkcji callback?.(), które uruchomi funkcję tylko wtedy, gdy istnieje.
Operator przerywa obliczanie całego łańcucha: jeśli user to null, dalsza część wyrażenia user?.profile.name w ogóle się nie wykona. Nie możesz go użyć po lewej stronie przypisania, a odczyt niezadeklarowanej zmiennej nadal rzuci ReferenceError.
Składnia
#object?.property
object?.[expression]
function?.(args)Więcej przykładów
#function finishLesson(onFinish) {
console.log('Lekcja ukończona')
onFinish?.('Zdobyto 15 EXP')
}
finishLesson((message) => console.log(message))
finishLesson()const response = { data: { students: [] } }
const firstName = response.data?.students?.[0]?.name ?? 'Brak uczniów'
console.log(firstName)const user = null
console.log(user?.profile.nickname.toUpperCase())Gdy user to null, reszta łańcucha nie jest obliczana, więc brak ?. przy profile nie powoduje błędu. Gdyby jednak user był obiektem bez profile, odczyt .nickname rzuciłby TypeError.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie wstawiaj
?.wszędzie „na wszelki wypadek”. Używaj go tam, gdzie brak wartości jest normalny. Jeśli obiekt zawsze powinien istnieć, błąd pomoże szybciej znaleźć problem. - Łącz
?.z??, aby od razu podać wartość zastępczą:user?.nickname ?? "Anonim". ?.reaguje tylko nanulliundefined. Pusty napis,0czyfalsesą traktowane jak zwykłe wartości.
Powiązane hasła
#- ??Operator ?? (nullish coalescing) zwraca prawą stronę tylko wtedy, gdy lewa to null lub undefined. Idealny do wartości domyślnych.
- &&, ||, !Operatory logiczne I (&&), LUB (||) i NIE (!). Łączą warunki, a && i || zwracają jedną ze swoich stron.
- DestrukturyzacjaDestrukturyzacja (destructuring) wyciąga wartości z tablic i obiektów prosto do osobnych zmiennych.
- typeofZwraca napis z nazwą typu wartości, np. "number", "string" albo "object".
Widzisz błąd albo brakuje przykładu? Napisz do nas.