V JavaScriptu jsou null a undefined dva speciální typy hodnot, které často způsobují zmatek. Pojďme si vysvětlit jejich rozdíly a kdy je používat.

Jak zjistit, co použít

Nejste si jisti, kdy použít null a kdy undefined?

Základy

Co je undefined?

undefined je primitivní hodnota, která se automaticky přiřadí proměnným, které byly deklarovány, ale nebyly inicializovány.

let promenna;
console.log(promenna); // undefined

let obj = {};
console.log(obj.nesmysl); // undefined

function funkce() {
}
console.log(funkce()); // undefined

Co je null?

null je také primitivní hodnota, ale musí být explicitně přiřazena. Representuje úmyslnou absenci hodnoty.

let promenna = null;
console.log(promenna); // null

let obj = {
    hodnota: null
};

Rozdíly

Porovnání

console.log(null === undefined); // false
console.log(null == undefined);  // true (volné porovnání)

console.log(typeof null);      // "object" (to je chyba v JavaScriptu!)
console.log(typeof undefined); // "undefined"

Chování v objektech

V objektech se null a undefined chovají různě:

let obj = {
    a: undefined,
    b: null,
    c: "hodnota"
};

console.log(obj);
// Výstup: { a: undefined, b: null, c: "hodnota" }

// Kontrola existence vlastností
console.log(obj.hasOwnProperty('a')); // true - vlastnost existuje
console.log(obj.hasOwnProperty('b')); // true - vlastnost existuje
console.log(obj.hasOwnProperty('d')); // false - vlastnost neexistuje

// Přístup k hodnotám
console.log(obj.a); // undefined
console.log(obj.b); // null
console.log(obj.d); // undefined (neexistující vlastnost)

Převod do JSON

Při převodu do JSON se chování liší:

let obj = {
    a: undefined,
    b: null,
    c: "hodnota"
};

let json = JSON.stringify(obj);
console.log(json);
// Výstup: {"b":null,"c":"hodnota"}
// Vlastnost 'a' s undefined hodnotou je úplně vynechána!

Praktické použití

Kdy použít null

• Explicitní absence hodnoty – když chcete jasně říct, že hodnota neexistuje.
• API komunikace – pro přenos dat na server.
• Databasové hodnoty – když pole v databasi obsahuje null.
• Resetování proměnné – explicitní vymazání hodnoty.

// Explicitní označení absence
let uzivatel = {
    jmeno: "Jan",
    email: null  // Uživatel nemá email
};

// API komunikace
let apiData = {
    name: "Jan",
    email: null,        // Explicitní absence
    phone: null         // Explicitní absence
};

// Resetování cache
let cache = {};
cache.data = "nějaká data";
cache.data = null; // Vymazání cache

Kdy použít undefined

• Neinicializované proměnné – když proměnná ještě nebyla nastavena.
• Volitelné parametry – když funkce nemá povinný parametr.
• Resetování konfigurace – návrat na výchozí hodnoty.
• Neexistující vlastnosti – když objekt nemá danou vlastnost.

// Neinicializovaná proměnná
let hodnota;
console.log(hodnota); // undefined

// Volitelný parametr
function pozdrav(jmeno, titul) {
    if (titul === undefined) {
        titul = "pane";
    }
    return `Dobrý den, ${titul} ${jmeno}`;
}

// Reset konfigurace
let config = { theme: "dark" };
config.theme = undefined; // Vrátí na výchozí

// Kontrola existence vlastnosti
let obj = { a: 1 };
if (obj.b === undefined) {
    console.log("Vlastnost b neexistuje");
}

Resetování proměnných

Resetovat proměnné můžete oběma způsoby:

// Resetování přes null (explicitní)
let promenna = "nějaká hodnota";
promenna = null; // Jasně říká: "vymaž tuto hodnotu"

// Resetování přes undefined (implicitní)
let promenna2 = "nějaká hodnota";
promenna2 = undefined; // Také vymaže, ale méně jasné

// Kontrola po resetování
console.log(promenna == null);  // true (null)
console.log(promenna2 == null); // true (undefined)
console.log(promenna === null); // true
console.log(promenna2 === null); // false

Rozdíl:

• null – jasně říkám, že hodnota neexistuje,
• undefined – vracím do původního stavu

API komunikace

Proč undefined vadí pro API?

Používání undefined v API komunikaci způsobuje problémy:

// undefined se ztratí
let userData = {
    name: "Jan",
    email: undefined  // Bude vynecháno v JSON
};

console.log(JSON.stringify(userData));
// {"name":"Jan"} - email je pryč!

// null se přenese
let apiData = {
    name: "Jan",
    email: null  // Explicitní absence
};

console.log(JSON.stringify(apiData));
// {"name":"Jan","email":null}

Praktické problémy

// PATCH operace - smazat email
let patchData = {
    email: undefined  // server neví, co dělat
};
// JSON: {} - prázdný objekt!

let patchData2 = {
    email: null  // server ví, že má smazat email
};
// JSON: {"email":null} - jasný záměr

Moderní přístupy

Nullish coalescing (??)

let hodnota = null ?? "výchozí"; // "výchozí"
let hodnota2 = undefined ?? "výchozí"; // "výchozí"
let hodnota3 = 0 ?? "výchozí"; // 0
let hodnota4 = "" ?? "výchozí"; // ""

Optional chaining (?.)

let uzivatel = {
    adresa: null
};

console.log(uzivatel?.adresa?.ulice); // undefined
console.log(uzivatel?.jmeno); // undefined

TypeScript

TypeScript přidává typovou bezpečnost, která může odhalit situace, kdy by člověk chtěl omylem pracovat s null a undefined:

Strict null checks

Hlavní rozdíl je v strictNullChecks:

// JavaScript - žádné kontroly
let jmeno;
console.log(jmeno.length); // Runtime error: Cannot read property 'length' of undefined

// TypeScript s strictNullChecks - kompilátor chybu odhalí
let jmeno: string;
console.log(jmeno.length); // Compile error: Object is possibly 'undefined'

Kontrola hodnot

V praxi není takový rozdíl mezi prací s null a undefined.

Stačí prostá podmínka pro zkontrolování, že je promenna truthy.

if (promenna) {
    // promenna není null/undefined
}

Riziko v tomto kódu ale je, když bude proměnná např. číslo 0, prázdný řetězec "" nebo false, které se vyhodnotí jako false, i když jsou validní hodnoty.

Pro spolehlivou kontrolu, že je proměnná nastavená, použijte přísné porovnání:

if (promenna !== null && promenna !== undefined) {
    // promenna není null ani undefined
}

Případně udělat výjimku a použít stručnější zápis:

if (promenna != null) {
    // promenna není null ani undefined
}

Funguje to, protože null == undefined je true.

Závěr

1. Používejte null pro explicitní absenci hodnoty.
2. Nechte undefined pro neinicializované proměnné.
3. Používejte přísné porovnání (===).
4. Využívejte moderní operátory (??, ?.).
5. Buďte konsistentní v rámci projektu.
6. Pro API komunikaci vždy používejte null.