null, undefined i bezpieczny dostęp

Po tej lekcji potrafisz

Gracza nie ma w rankingu

Szukasz nicku w tabeli wyników. Co powinien dostać program, jeśli taki gracz nie istnieje? Zero punktów oznacza coś innego niż brak gracza. Zamiast mieszać te sytuacje, pokażemy brak w typie.

Małe kroki, konkretne efekty

Dwa sposoby oznaczania braku

undefined często pojawia się przy brakującym polu lub nieudanym wyszukiwaniu. null bywa celowym oznaczeniem „nie wybrano”. To konwencje — reguły konkretnego programu trzeba określić. W trybie strict nie udajemy, że te wartości są zwykłym tekstem.

function wybranyNick(nick: string | null): string {
  if (nick === null) { return "Wybierz gracza"; }
  return nick.toUpperCase();
}
console.log(wybranyNick(null));
console.log(wybranyNick("pixel"));

Wybierz gracza
PIXEL

Osobna gałąź dla null pozwala bezpiecznie użyć metody tekstowej w pozostałej części funkcji.

Opcjonalny łańcuch i wartość zastępcza

?. zatrzymuje dostęp, gdy wartość po jego lewej stronie jest null albo undefined, i daje undefined. Operator ?? wybiera prawą stronę tylko przy tych dwóch wartościach. Nie odrzuca zera ani false.

interface Profil { staty?: { punkty: number } }
function punkty(p: Profil): number { return p.staty?.punkty ?? 0; }
console.log(punkty({}));
console.log(punkty({ staty: { punkty: 0 } }));
console.log(punkty({ staty: { punkty: 12 } }));

0
0
12

Tutaj świadomie wyświetlamy 0 również przy braku statystyk. Jeśli musisz odróżniać te sytuacje, zwróć number | undefined zamiast stosować zastępstwo.

Wyszukiwarka wyników

find zwraca pierwszy pasujący element albo undefined. Dwa poprawne komunikaty odróżnią gracza z zerem punktów od osoby spoza rankingu.

interface Gracz { nick: string; punkty: number }
const gracze: Gracz[] = [{ nick: "Ala", punkty: 0 }, { nick: "Pixel", punkty: 15 }];
function wynik(nick: string): string {
  const gracz = gracze.find(g => g.nick === nick);
  if (gracz === undefined) { return nick + ": brak w rankingu"; }
  return gracz.nick + ": " + gracz.punkty + " pkt";
}
console.log(wynik("Ala"));
console.log(wynik("Neo"));

Ala: 0 pkt
Neo: brak w rankingu

Jak program dochodzi do wyniku

1. Callback find sprawdza nick każdego elementu do pierwszego dopasowania.
2. Wynik ma typ Gracz | undefined.
3. Warunek rozpoznaje brak obiektu, a nie fałszywość jego punktów.
4. Po return w gałęzi braku gracz jest już pewnym obiektem.

Zmień kod i zobacz, co się stanie

Wykrzyknik nie jest sprawdzeniem

Operator ! po wartości usuwa null i undefined tylko z widoku kompilatora. Nie wstawia żadnego warunku. Bezpieczniejszy kod pokazuje, co zrobić po pustym wyszukiwaniu.

const wyniki = [10, 20];
const znaleziony = wyniki.find(n => n > 100);
console.log(znaleziony?.toFixed(1) ?? "Nie znaleziono");
// znaleziony!.toFixed(1) spowodowałoby błąd w czasie wykonania.

Nie znaleziono

Zmień próg na 15: zobaczysz 20.0. ?. chroni przed brakiem, ale nie przechwytuje wyjątków rzuconych przez samą wywołaną metodę.

Gdy wynik zaskakuje

Teraz Twoja kolej

Rozwiązanie jest jedną z możliwości. Zanim je odkryjesz, uruchom własną wersję dla podanych danych i przynajmniej jednego przypadku brzegowego.

function glosnosc(n: number | undefined): number { return n ?? 50; }
console.log(glosnosc(undefined), glosnosc(0));

50 0

function ostatni(rundy: number[]): string {
  return rundy.at(-1)?.toString() ?? "Brak rund";
}
console.log(ostatni([3, 8]));
console.log(ostatni([]));

8
Brak rund

interface Profil { adres?: { miasto?: string } }
function miasto(p: Profil): string { return p.adres?.miasto ?? "Nie podano"; }
console.log(miasto({}));
console.log(miasto({ adres: { miasto: "Gdynia" } }));

Nie podano
Gdynia

function srednia(oceny: number[]): number | null {
  if (oceny.length === 0) { return null; }
  return oceny.reduce((s, n) => s + n, 0) / oceny.length;
}
// reduce dodaje elementy do sumy zaczynającej od 0; szerzej w lekcji 23.
function raport(oceny: number[]): string { return srednia(oceny)?.toFixed(2) ?? "Brak ocen"; }
console.log(raport([]));
console.log(raport([4, 5]));

Brak ocen
4.50

Co zabierasz do następnej lekcji

• Brak wartości warto pokazać w typie.
• ?. daje bezpieczny dostęp przy null i undefined; ?? dobiera zastępstwo.
• ! jest zapewnieniem dla kompilatora, a nie ochroną podczas działania.