null vs undefined w JavaScript: różnice, sprawdzanie i kiedy czego używać

Dwa sposoby na powiedzenie "nic"

Większość języków ma jedną wartość oznaczającą brak. JavaScript ma dwie: null i undefined. Zachowują się na tyle podobnie, że mylą początkujących, i na tyle różnie, że potrafią zaskoczyć doświadczonych programistów. Zrozumienie tego podziału jest warte dziesięciu minut.

W skrócie:

• undefined to to, co dostajesz od JavaScriptu, gdy czegoś brakuje.
• null to to, co piszesz ty, gdy chcesz powiedzieć "celowo puste".

let x;
console.log(x);           // undefined - declared, never assigned

const user = { name: "Rosa" };
console.log(user.age);    // undefined - property doesn't exist

function greet(name) {
  console.log(name);
}
greet();                  // undefined - argument not passed

const chosen = null;
console.log(chosen);      // null - you put it there

Zwróć uwagę na wzorzec: każde undefined powyżej pojawiło się, bo JavaScript nie znalazł wartości. null pojawiło się, bo ktoś je wpisał.

Skąd bierze się undefined

undefined pojawia się w kilku konkretnych sytuacjach, a wszystkie są odmianą "brak dostępnej wartości":

// 1. A declared variable with no initializer
let a;
console.log(a);                    // undefined

// 2. A missing object property
const obj = { x: 1 };
console.log(obj.y);                // undefined

// 3. A missing function argument
function f(x, y) { return y; }
console.log(f(1));                 // undefined

// 4. A function with no return statement
function g() {}
console.log(g());                  // undefined

// 5. A missing array element
const arr = [1, 2];
console.log(arr[5]);               // undefined

W każdym przypadku JavaScript sięgnął po wartość i nic tam nie znalazł. undefined to sposób silnika na powiedzenie "sprawdziłem, nie było wartości".

Możesz sam przypisać undefined (let x = undefined;), ale lepiej tego nie robić. Niech pozostanie sygnałem "JavaScript niczego nie znalazł". Używaj null, gdy to ty podejmujesz decyzję.

Skąd bierze się null

null pojawia się tylko wtedy, gdy ktoś je napisał. W tym cały sens: to celowy znacznik.

// "No user is logged in yet."
let currentUser = null;

// Later, a user logs in.
currentUser = { name: "Boris" };

// And logs out.
currentUser = null;

API DOM często używają null: document.getElementById("missing") zwraca null, a nie undefined, bo przeglądarka jawnie mówi "szukałam i odpowiedź brzmi: nie ma takiego elementu". JSON.parse("null") też daje null, bo JSON nie ma undefined.

Model myślowy: undefined to domyślny brak, null to wybrany brak.

Dziwactwo typeof

Oto słynny przypadek:

console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object"   ← ???

To, że typeof null zwraca "object", to błąd z 1995 roku, którego nie dało się naprawić bez psucia istniejących stron, więc został na zawsze. null nie jest obiektem: to typ prosty, tak jak undefined, liczby, stringi i wartości logiczne. Wynik typeof po prostu w tym przypadku kłamie.

Praktyczna konsekwencja: typeof nie nadaje się do wykrywania null. Użyj bezpośredniego porównania:

const value = null;

if (value === null) {
  console.log("to null");
}

if (typeof value === "undefined") {
  console.log("to undefined");
}

Albo, znacznie częściej, sprawdź obie wartości naraz. O tym w następnej sekcji.

Sprawdzanie obu naraz: idiom == null

Najczęściej nie obchodzi cię, którą z wartości oznaczających brak masz. Chcesz tylko wiedzieć, czy czegoś brakuje, zanim tego użyjesz. Idiomatyczne sprawdzenie to luźna równość z null:

function describe(value) {
  if (value == null) {
    return "nothing here";
  }
  return `got ${value}`;
}

console.log(describe(null));         // nothing here
console.log(describe(undefined));    // nothing here
console.log(describe(0));            // got 0
console.log(describe(""));           // got
console.log(describe("hello"));      // got hello

value == null jest prawdą dokładnie dla null i undefined, a fałszem dla wszystkiego innego, także dla 0, "" i false, czyli zwykle tak, jak chcesz. To jedyna sytuacja, w której == jest lepsze od ===. Lintery o tym wiedzą i na to pozwalają.

Jeśli wolisz pisać jawnie, value === null || value === undefined znaczy to samo i czyta się to jasno.

Operatory nullish: ?? i ?.

Dwa operatory dodano specjalnie po to, żeby ułatwić pracę z null i undefined. Oba traktują te dwie wartości identycznie, a wszystko inne zostawiają w spokoju.

Operator nullish coalescing (??) podaje wartość zapasową tylko wtedy, gdy lewa strona to null lub undefined:

const config = { retries: 0, timeout: null };

const retries = config.retries ?? 3;     // 0 (not nullish - keep it)
const timeout = config.timeout ?? 5000;  // 5000 (was null)
const name = config.name ?? "guest";     // "guest" (was undefined)

console.log(retries, timeout, name);

Porównaj to z ||, który zastąpiłby 0 wartością 3, bo 0 jest falsy. ?? jest bardziej rygorystyczny: działa tylko dla dwóch wartości nullish.

Optional chaining (?.) przerywa obliczanie łańcucha i zwraca undefined, gdy natrafi na null lub undefined:

const user = { profile: null };

console.log(user.profile?.name);        // undefined (no crash)
console.log(user.settings?.theme);      // undefined (no crash)
console.log(user?.profile?.name);       // undefined

Oba operatory istnieją, bo pytanie "czy ta wartość jest nullish?" pada bardzo często. Szczegółowo omawiamy je w dalszej części materiału.

Parametry domyślne działają tylko dla undefined

Subtelna, ale ważna zasada: domyślne wartości parametrów włączają się tylko dla undefined, a nie dla null.

function greet(name = "friend") {
  console.log(`Hello, ${name}`);
}

greet();             // Hello, friend
greet(undefined);    // Hello, friend
greet(null);         // Hello, null   ← default did not apply

Przekazanie null jest traktowane jak "jawnie wybieram brak wartości" i respektowane bez zmian. Jeśli chcesz, żeby null też uruchamiało wartość zapasową, użyj ?? wewnątrz funkcji:

function greet(name) {
  const display = name ?? "friend";
  console.log(`Hello, ${display}`);
}

greet(null);         // Hello, friend

To rozróżnienie regularnie sprawia ludziom kłopot. Wartości domyślne obsługują brakujące argumenty, a ?? obsługuje argumenty nullish.

JSON i brakujące undefined

JSON ma null, ale nie ma undefined. To prowadzi do cichych niespodzianek przy serializacji:

const data = {
  name: "Rosa",
  age: undefined,
  nickname: null,
};

console.log(JSON.stringify(data));
// {"name":"Rosa","nickname":null}

Pole age całkowicie zniknęło, bo JSON.stringify pomija właściwości z wartością undefined. null przetrwało, bo JSON je obsługuje. Przepuszczenie obiektu przez JSON w obie strony to częsty sposób, w jaki właściwości undefined po cichu znikają.

W tablicach undefined zamienia się w null:

console.log(JSON.stringify([1, undefined, 3]));
// [1,null,3]

Jeśli projektujesz dane dla API, dla pól "bez wartości" wybieraj null zamiast undefined. null przetrwa podróż.

Kiedy czego używać

Rozsądna konwencja dla własnego kodu:

• Niech undefined znaczy "nie podano": brakujące argumenty, nieustawione zmienne, nieistniejące właściwości. Nie przypisuj undefined ręcznie.
• Używaj null, gdy chcesz jawnie przekazać "to celowo puste": wylogowany użytkownik, niewybrana opcja, wyczyszczone pole formularza.
• Na granicach API akceptuj obie wartości (użyj == null albo ??), ale zawsze zwracaj tę samą.

Niektóre przewodniki stylu (w tym TypeScriptu) całkiem pomijają null i używają tylko undefined. To da się obronić: jedna wartość jest prostsza niż dwie. Wybierz zasadę na projekt i stosuj ją wszędzie.

Dalej: konwersja typów

null i undefined zachowują się w określony sposób, gdy JavaScript zamienia je na liczby, stringi lub wartości logiczne: Number(null) to 0, ale Number(undefined) to NaN, a taka asymetria powoduje prawdziwe błędy. Następna w kolejce jest konwersja typów, a gdy poznasz pełne zasady, wiele dziwactw JavaScriptu przestanie być tajemnicą.