Coercion (implizit & explizit)

const eingabe = '5';

// implizit (Coercion)
const a = eingabe + 3;        // '53'  — String-Konkatenation
const b = eingabe - 3;        // 2     — Number-Coercion
const c = +eingabe;           // 5     — Unary-Plus konvertiert
const d = !!eingabe;          // true  — doppelte Negation

// explizit (Conversion)
const e = Number(eingabe) + 3;   // 8
const f = String(eingabe + 3);   // '8'  — falls eingabe eine Zahl wäre
const g = Number(eingabe);       // 5
const h = Boolean(eingabe);      // true

console.log(a, b, c, d, e, g, h);

console.log(Boolean(false));     // false
console.log(Boolean(0));         // false
console.log(Boolean(''));        // false
console.log(Boolean(null));      // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN));       // false

console.log(Boolean({}));        // true  (!)
console.log(Boolean([]));        // true  (!)
console.log(Boolean('0'));       // true  (!)
console.log(Boolean('false'));   // true  (!)
console.log(Boolean(-1));        // true

// !! ist die idiomatische Verkürzung
console.log(!!''); // false
console.log(!!1);  // true

// Number(x) — nutzt den vollen ToNumber-Algorithmus
console.log(Number(''));         // 0      (leerer String → 0)
console.log(Number('   '));      // 0      (Whitespace gestrippt)
console.log(Number('123'));      // 123
console.log(Number('123abc'));   // NaN    (nicht-numerische Reste)
console.log(Number('0x1F'));     // 31     (Hex erkannt)
console.log(Number('1e3'));      // 1000   (Exponential)
console.log(Number(null));       // 0
console.log(Number(undefined));  // NaN
console.log(Number(true));       // 1
console.log(Number(false));      // 0
console.log(Number([]));         // 0      (leeres Array → '' → 0)
console.log(Number([42]));       // 42     (1-Element-Array → '42' → 42)
console.log(Number([1, 2]));     // NaN    (Multi-Element → '1,2' → NaN)
console.log(Number({}));         // NaN

// parseInt(x, radix) — nimmt führende Ziffern, ignoriert Rest
console.log(parseInt('123abc'));   // 123  (anders als Number!)
console.log(parseInt('10', 2));    // 2    (binär)
console.log(parseInt('   42 ', 10)); // 42

// parseFloat — wie parseInt, aber für Floats
console.log(parseFloat('3.14xyz')); // 3.14

// Unary + — exakt wie Number()
console.log(+'42');  // 42
console.log(+true);  // 1

console.log(String(undefined));   // 'undefined'
console.log(String(null));        // 'null'
console.log(String(true));        // 'true'
console.log(String(42));          // '42'
console.log(String(NaN));         // 'NaN'
console.log(String(Infinity));    // 'Infinity'
console.log(String(42n));         // '42'
console.log(String(Symbol('x'))); // 'Symbol(x)'
console.log(String([]));          // ''         (!)
console.log(String([1, 2, 3]));   // '1,2,3'
console.log(String({}));          // '[object Object]'
console.log(String({ a: 1 }));    // '[object Object]'

// x.toString() — wirft bei null/undefined
try {
    null.toString();
} catch (err) {
    console.log(err.constructor.name); // 'TypeError'
}

// Template Literal — konvertiert wie String(), aber wirft bei Symbol!
console.log(`${42}`);             // '42'
try {
    console.log(`${Symbol('x')}`);
} catch (err) {
    console.log(err.constructor.name); // 'TypeError'
}

class Geld {
    constructor(betrag, waehrung) {
        this.betrag = betrag;
        this.waehrung = waehrung;
    }
    [Symbol.toPrimitive](hint) {
        if (hint === 'number') return this.betrag;
        if (hint === 'string') return `${this.betrag.toFixed(2)} ${this.waehrung}`;
        // hint === 'default' — meist String oder Number-Verhalten
        return `${this.betrag} ${this.waehrung}`;
    }
}

const preis = new Geld(19.99, 'EUR');

console.log(+preis);            // 19.99      (hint: 'number')
console.log(`${preis}`);        // '19.99 EUR' (hint: 'string')
console.log(preis + '');        // '19.99 EUR' (hint: 'default')
console.log(preis + 1);         // '19.99 EUR1' (hint: 'default' → String)
console.log(preis * 2);         // 39.98      (hint: 'number')

// Date hat valueOf() für Number-Coercion: gibt Timestamp zurück
const jetzt = new Date();
console.log(+jetzt);            // z. B. 1746662400000 — Timestamp
console.log(`${jetzt}`);        // 'Fri May 08 2026 ...'

// null/undefined — gegenseitig gleich, sonst nichts
console.log(null == undefined); // true
console.log(null == null);      // true
console.log(null == 0);         // false (KEINE Coercion)
console.log(undefined == 0);    // false

// String/Number — String wird zur Zahl
console.log('5' == 5);          // true
console.log('0' == 0);          // true
console.log('' == 0);           // true

// Boolean → Number, dann Vergleich
console.log(true == 1);         // true
console.log(true == '1');       // true ('1' → 1, true → 1)
console.log(false == '');       // true (beide → 0)

// Object → ToPrimitive
console.log([1] == 1);          // true ([1] → '1' → 1)
console.log([1, 2] == '1,2');   // true

// Best Practice: einziger sinnvoller == -Einsatz
function istLeer(x) {
    return x == null; // fängt null UND undefined
}
console.log(istLeer(null));      // true
console.log(istLeer(undefined)); // true
console.log(istLeer(0));         // false

// + ist polymorph
console.log('5' + 3);    // '53'  — String-Konkatenation
console.log(3 + '5');    // '35'  — egal welche Seite String ist
console.log(1 + 2 + '3'); // '33' — links nach rechts: 3 + '3' = '33'
console.log('1' + 2 + 3); // '123' — '12' + 3 = '123'

// - * / % sind Number-only
console.log('5' - 3);    // 2     — '5' → 5
console.log('10' * '2'); // 20    — beide → Number
console.log('15' / 3);   // 5
console.log('10' % 3);   // 1

// berühmte Curiosa
console.log([] + []);    // ''           — beide → ''
console.log([] + {});    // '[object Object]'
console.log({} + []);    // '[object Object]' (in Konsolen unterschiedlich!)
console.log(true + 1);   // 2            — true → 1
console.log(true + 'x'); // 'truex'      — true → 'true'
console.log([1] + [2]);  // '12'         — '1' + '2'
console.log([1] - [2]);  // -1           — 1 - 2

// klassische Form-Falle: + statt Number()
const eingabe = '7';
const summe = eingabe + 3;        // '73' — Bug
const summeKorrekt = +eingabe + 3; // 10
console.log(summe, summeKorrekt);

// gut: explizite Conversion an der Eingabe-Grenze
function berechneSumme(eingaben) {
    return eingaben
        .map(s => Number(s))             // explizite Konvertierung
        .filter(n => Number.isFinite(n)) // ungültige raus
        .reduce((acc, n) => acc + n, 0);
}

console.log(berechneSumme(['10', '20', 'abc', '30'])); // 60

// schlecht: implizite Coercion in Arithmetik
function berechneSummeImplizit(eingaben) {
    return eingaben.reduce((acc, n) => acc + n, 0);
}
console.log(berechneSummeImplizit(['10', '20', '30'])); // '0102030' — Bug!

function parseFormZahl(rohwert, fallback = null) {
    // 1. leere Eingabe explizit behandeln
    if (rohwert == null || rohwert.trim() === '') {
        return fallback;
    }
    // 2. Number() statt parseInt — strikt, fängt '12abc'
    const zahl = Number(rohwert);
    // 3. NaN-Check separat — Number('abc') ist NaN, nicht null
    if (!Number.isFinite(zahl)) {
        return fallback;
    }
    return zahl;
}

console.log(parseFormZahl('42'));     // 42
console.log(parseFormZahl('  42  ')); // 42  (Whitespace gestrippt)
console.log(parseFormZahl(''));       // null
console.log(parseFormZahl('   '));    // null
console.log(parseFormZahl('abc'));    // null
console.log(parseFormZahl('12abc'));  // null (anders als parseInt!)
console.log(parseFormZahl(null));     // null

// Anti-Pattern: implizite Coercion
// const alter = +event.target.value; // '' → 0 — falsch!
// const alter = parseInt(event.target.value); // '12abc' → 12 — auch falsch!