1.9 Null a Undefined

Výuka

Null a Undefined reprezentují absenci hodnoty, ale mají různý význam:

JavaScript

// Undefined - nebylo přiřazeno
let x;
console.log(x);  // undefined

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

const obj = { a: 1 };
console.log(obj.b);  // undefined (neexistující property)

// Null - explicitní "nic"
const empty = null;
let user = null;  // zatím žádný uživatel

// Kontrola
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object" (historická chyba JS!)

// Porovnání
console.log(undefined == null);   // true (volné porovnání)
console.log(undefined === null);  // false (různé typy)

// Falsy hodnoty
Boolean(undefined);  // false
Boolean(null);       // false

// Nullish coalescing (??)
const value1 = null ?? 'default';      // 'default'
const value2 = undefined ?? 'default'; // 'default'
const value3 = 0 ?? 'default';         // 0 (0 není null/undefined!)

// vs. OR (||)
const value4 = 0 || 'default';         // 'default' (0 je falsy)

// Optional chaining (?.)
const user = null;
console.log(user?.name);  // undefined (bezpečně)
// console.log(user.name); // ❌ TypeError: Cannot read property 'name' of null

TypeScript

// Type annotations
let value1: undefined = undefined;
let value2: null = null;

// Union types s null/undefined
let name: string | null = null;
name = 'Jan';  // ✅ OK
// name = undefined;  // ❌ Error (není v union)

let age: number | undefined;
age = 25;      // ✅ OK
age = undefined;  // ✅ OK

// Optional properties
interface User {
  name: string;
  email?: string;  // může být undefined
}

const user: User = { name: 'Jan' };
console.log(user.email);  // undefined (OK)

// Strict null checks (tsconfig: "strictNullChecks": true)
function greet(name: string) {
  console.log(`Hello, ${name}`);
}

// greet(null);  // ❌ Error s strict null checks
greet('Jan');    // ✅ OK

// Non-null assertion (!)
const element = document.getElementById('app')!;  // říkáš TS "není null"

// Nullish coalescing s typy
const value: string | null = null;
const result = value ?? 'default';  // result: string

Rozdíl JS vs TS

// JavaScript
let x = null;
x = undefined;  // ✅ OK

// TypeScript (strict mode)
let x: string | null = null;
// x = undefined;  // ❌ Error (není v typu)

let y: string | null | undefined = null;
y = undefined;  // ✅ OK

Tip

💡 Kdy použít null vs undefined:

// undefined - hodnota není, protože nebyla nastavena
let notSet: string | undefined;

// null - hodnota chybí záměrně
let noUser: User | null = null;

💡 Nullish coalescing vs OR:

// || pracuje s falsy (0, '', false, ...)
const count1 = 0 || 10;  // 10

// ?? pracuje jen s null/undefined
const count2 = 0 ?? 10;  // 0 ✅

💡 Optional chaining:

const user = null;

// Staré
const city = user && user.address && user.address.city;

// Nové
const city = user?.address?.city;  // undefined