0Pricing
JavaScript Academy · Lekcja

Łączenie ?. i ??

Proszę połączyć bezpieczny dostęp z rozsądnymi wartościami domyślnymi.

Łączenie ?. i ?? to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Dwa narzędzia razem

Opcjonalne łańcuchowanie ?. bezpiecznie odczytuje wartości, których może brakować, a operator koalescencji wartości nullish ?? podaje wartość domyślną. Razem pozwalają odczytywać głęboko zagnieżdżone dane i przejrzyście stosować wartość zastępczą.

const user = {};
console.log(user.profile?.name ?? "Anonymous");

Typowy wzorzec

Idiom a?.b ?? fallback bezpiecznie odczytuje wartość i podaje wartość domyślną, jeśli wynik ma wartość nullish. Zastępuje rozbudowane łańcuchy warunków ochronnych.

const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"

Wartość zastępcza w razie braku danych

Jeśli dowolne ogniwo ma wartość nullish, ?. zwraca undefined, które następnie ?? zastępuje wartością domyślną.

const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"

Głębokie zagnieżdżenie

Ten wzorzec można stosować w głęboko zagnieżdżonych strukturach, zachowując jedną wartość zastępczą na końcu.

const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"

Zachowywanie prawidłowych wartości falsy

Ponieważ ?? podaje wartość domyślną tylko dla wartości nullish, prawidłowe wartości 0 pochodzące z łańcucha zostają zachowane.

const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0

W porównaniu z pułapką && / ||

Zapis a && a.b || fallback błędnie zastąpiłby prawidłową wartość 0 lub "". Połączenie ?. + ?? pozwala tego uniknąć.

const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50);      // 0, correct

Z wynikami funkcji

Można również podać wartość domyślną dla wyniku opcjonalnego wywołania, łącząc oba operatory wokół wywołania metody.

const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"

Domyślne wartości dla dostępu do tablicy

Ten wzorzec działa również przy dostępie za pomocą nawiasów kwadratowych, zarówno dla tablic, jak i dynamicznych kluczy.

const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"

Budowanie tekstów wyświetlanych użytkownikowi

Praktycznym zastosowaniem jest tworzenie bezpiecznego tekstu wyświetlanego użytkownikowi na podstawie niepewnych danych.

function label(order) {
  return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"

Uwaga dotycząca priorytetu

?. ma wyższy priorytet niż ??, dlatego a?.b ?? c jest interpretowane jako (a?.b) ?? c, czyli dokładnie tak, jak tego potrzebujesz.

const u = { age: null };
console.log(u?.age ?? 18); // 18

Przejrzysty idiom

Razem operatory te zastępują długi kod ochronny jednym czytelnym wierszem, dzięki czemu intencja jest oczywista.

const profile = null;
console.log(profile?.bio?.length ?? 0); // 0

Szybkie sprawdzenie

Przewidź wynik.

Podsumowanie

Idiom obj?.deep?.prop ?? fallback odczytuje potencjalnie brakujące zagnieżdżone wartości i podaje wartość domyślną tylko wtedy, gdy wynik ma wartość null lub undefined. Zachowuje prawidłowe wartości falsy, takie jak 0 i "", w przeciwieństwie do podejścia &&/||. Operator ?. ma wyższy priorytet niż ??, dlatego grupowanie jest automatycznie prawidłowe.

Często zadawane pytania

Czy lekcja „Łączenie ?. i ??” jest bezpłatna?

Tak — pełny tekst „Łączenie ?. i ??” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Łączenie ?. i ??”?

Proszę połączyć bezpieczny dostęp z rozsądnymi wartościami domyślnymi. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Łączenie ?. i ??”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Optional chaining z operatorem ?.
  2. Nullish coalescing z ??
  3. Łączenie ?. i ??
  4. Opcjonalne wywołania i dostęp indeksowany
← Powrót do JavaScript Academy