Optional Chaining & Nullish

const user = {
    name: 'Ada',
    address: { city: 'Berlin' }
};

// VORHER — &&-Kette, fragile bei Falsy
const cityOld = user && user.address && user.address.city;

// NACHHER — Optional Chaining
const cityNew = user?.address?.city;

console.log(cityOld, cityNew);        // 'Berlin' 'Berlin'

// Vorteil bei nicht existenter Zwischenstufe
const noUser = null;
// noUser.address.city               // TypeError
console.log(noUser?.address?.city);   // undefined — kein Error

const partial = { name: 'Bob' };
console.log(partial?.address?.city);  // undefined — sauber

const obj = {
    name: 'Carol',
    data: [10, 20, 30],
    log(msg) { return `[log] ${msg}`; }
};

// 1) Property-Access — obj?.prop
console.log(obj?.name);               // 'Carol'
console.log(obj?.missing);            // undefined

// 2) Computed Access — obj?.[expr]
const key = 'name';
console.log(obj?.[key]);              // 'Carol'

// sehr nützlich für Array-Index auf optionalem Array
const maybeArr = null;
console.log(maybeArr?.[0]);           // undefined — kein TypeError

console.log(obj?.data?.[1]);          // 20

// 3) Function-Call — func?.()
console.log(obj.log?.('hi'));         // '[log] hi'

const noLog = {};
console.log(noLog.log?.('hi'));       // undefined — Methode fehlt

// Optionaler Callback — klassischer Use-Case
function emit(handler, payload) {
    handler?.(payload);               // ruft nur wenn handler existiert
}
emit(undefined, 'event');             // kein Error
emit(console.log, 'event');           // 'event'

const response = {
    user: {
        profile: null,                 // <- Abbruch hier
        settings: { theme: 'dark' }
    }
};

// Kette über mehrere Stufen
console.log(response?.user?.profile?.bio?.text);
// undefined — sauber abgebrochen bei profile=null

console.log(response?.user?.settings?.theme);
// 'dark'

// Short-Circuit verhindert Side-Effects rechts vom Abbruch
let counter = 0;
const tick = () => ++counter;

const obj = null;
const result = obj?.[tick()];          // tick() wird NICHT aufgerufen
console.log(counter);                  // 0 — bestätigt: Short-Circuit
console.log(result);                   // undefined

// ABER: Klammerung bricht Short-Circuit auf
// (obj?.x).y würde y auf undefined zugreifen → TypeError
// const oops = (obj?.foo).bar;        // TypeError!

// Default nur bei null/undefined
const a = null      ?? 'fallback';   // 'fallback'
const b = undefined ?? 'fallback';   // 'fallback'
const c = 0         ?? 'fallback';   // 0     ← bleibt erhalten!
const d = ''        ?? 'fallback';   // ''    ← bleibt erhalten!
const e = false     ?? 'fallback';   // false ← bleibt erhalten!
const f = NaN       ?? 'fallback';   // NaN   ← bleibt erhalten!

console.log(a, b, c, d, e, f);
// 'fallback' 'fallback' 0 '' false NaN

// Praxis: numerische Defaults
function configurePort(port) {
    return port ?? 8080;
}
console.log(configurePort(0));        // 0     — Port 0 ist OS-typisch
console.log(configurePort(undefined));// 8080

// Beispiel: Lautstärke-Slider, 0 ist gültig
function setVolume(level) {
    const vol = level || 50;          // BUG: 0 wird zu 50
    return `Volume: ${vol}`;
}
console.log(setVolume(0));            // 'Volume: 50' ← falsch!
console.log(setVolume(undefined));    // 'Volume: 50'

// Mit ?? korrekt
function setVolumeFixed(level) {
    const vol = level ?? 50;          // 0 bleibt 0
    return `Volume: ${vol}`;
}
console.log(setVolumeFixed(0));       // 'Volume: 0'  ← korrekt
console.log(setVolumeFixed(undefined));// 'Volume: 50'

// Beispiel: leerer String als gültige Eingabe
const username = '' || 'guest';       // 'guest' — vielleicht ungewollt
const usernameOk = '' ?? 'guest';     // ''      — '' bleibt
console.log(username, usernameOk);

// Klassisches Default-Pattern — drei Schreibweisen
const opts = { timeout: 0 };

// 1) Lang
if (opts.timeout === null || opts.timeout === undefined) {
    opts.timeout = 5000;
}

// 2) Mit ??
opts.timeout = opts.timeout ?? 5000;  // 0 bleibt 0

// 3) Mit ??= (ES2021) — kompakt und nur bei Bedarf zugewiesen
opts.retries ??= 3;                   // setzt 3
opts.retries ??= 99;                  // tut nichts (3 ist nicht nullish)
opts.timeout ??= 9999;                // tut nichts (0 ist nicht nullish)

console.log(opts);                    // { timeout: 0, retries: 3 }

// Wichtig: Setter wird NUR bei tatsächlicher Zuweisung getriggert
let setterCalls = 0;
const proxy = {
    _val: 5,
    get val() { return this._val; },
    set val(v) { setterCalls++; this._val = v; }
};
proxy.val ??= 99;                     // val ist 5 (nicht nullish)
console.log(setterCalls);             // 0 — Setter NICHT gerufen

proxy.val = proxy.val ?? 99;          // klassisch: Setter immer
console.log(setterCalls);             // 1 — Setter gerufen

// SyntaxError: Unexpected token '??'
// const x = a || b ?? c;

// SyntaxError: Unexpected token '??'
// const y = a && b ?? c;

// OK — Klammern setzen
const x = (a || b) ?? c;              // erst ||, dann ??
const y = a || (b ?? c);              // erst ??, dann ||
const z = (a && b) ?? c;              // erst &&, dann ??

// ?? selbst ist beliebig kettbar (gleicher Operator)
const w = a ?? b ?? c ?? d;           // OK — links-assoziativ

const response = { data: { users: null } };

// erst sicher lesen, dann Default
const users = response?.data?.users ?? [];
console.log(users);                    // []

const total = response?.data?.stats?.total ?? 0;
console.log(total);                    // 0

// Kombination mit Method-Call
const json = response?.toJSON?.() ?? '{}';
console.log(json);                     // '{}'

// Beispiel-Response (würde von fetch().then(r => r.json()) kommen)
const response = {
    data: {
        user: {
            id: 42,
            name: 'Carol',
            profile: {
                bio: null,
                location: { city: 'Wien' }
            },
            posts: [
                { id: 1, title: 'First',  comments: [] },
                { id: 2, title: 'Second' /* keine comments */ }
            ]
        }
    },
    meta: { rateLimit: 0 }            // 0 ist legitim!
};

function summarize(resp) {
    const name        = resp?.data?.user?.name        ?? 'Anonymous';
    const bio         = resp?.data?.user?.profile?.bio ?? '(no bio)';
    const city        = resp?.data?.user?.profile?.location?.city ?? 'unknown';
    const postCount   = resp?.data?.user?.posts?.length ?? 0;
    const firstTitle  = resp?.data?.user?.posts?.[0]?.title ?? '(none)';
    const commentCnt  = resp?.data?.user?.posts?.[1]?.comments?.length ?? 0;
    const rateLimit   = resp?.meta?.rateLimit ?? 100;   // 0 bleibt 0!

    return { name, bio, city, postCount, firstTitle, commentCnt, rateLimit };
}

console.log(summarize(response));
console.log(summarize(null));         // alles greift auf Defaults

const obj1 = {};
const obj2 = { handler: null };
const obj3 = { handler: 'string' };
const obj4 = { handler: () => 'ok' };

// Fehlende Property → undefined → übersprungen
console.log(obj1.handler?.());        // undefined

// Property null → übersprungen
console.log(obj2.handler?.());        // undefined

// Property existiert, aber keine Funktion → TypeError
try {
    obj3.handler?.();
} catch (e) {
    console.log('Caught:', e.message); // ... is not a function
}

// Property ist Funktion → normal aufgerufen
console.log(obj4.handler?.());        // 'ok'

// Doppelte Optional Chains — Object UND Method optional
const maybe = null;
console.log(maybe?.method?.());       // undefined — beides safe

const data = { user: { name: 'Eve' } };

// FALSCH: try/catch als Null-Safe-Lookup
let cityBad;
try {
    cityBad = data.user.address.city; // wirft TypeError
} catch {
    cityBad = 'unknown';
}
// Problem: schluckt auch echte Bugs (z.B. Tippfehler in 'addresss')

// RICHTIG: ?. als Null-Safe-Lookup
const cityGood = data?.user?.address?.city ?? 'unknown';
console.log(cityGood);                // 'unknown'

// RICHTIG: try/catch für ECHTE Errors
try {
    const parsed = JSON.parse('{ broken json');
} catch (e) {
    console.log('Parse failed:', e.message);
}

// Kombiniert: ?. innerhalb von try/catch
async function loadProfile(id) {
    try {
        const res = await fetch(`/api/users/${id}`);
        const json = await res.json();
        return json?.profile?.bio ?? '(no bio)';
    } catch (e) {
        console.error('Network error:', e);
        return null;
    }
}