Logische Operatoren

In React entscheidest du oft zur Laufzeit, was angezeigt wird. Dafür brauchst du zwei Dinge: ein Verständnis davon, was JavaScript als „wahr” oder „falsch” betrachtet, und die Operatoren, die darauf aufbauen.

Truthy und Falsy

JavaScript unterscheidet nicht nur zwischen true und false. Jeder Wert ist entweder truthy (wird in einem booleschen Kontext als wahr behandelt) oder falsy (als falsch).

Es gibt genau 8 falsy Werte:

Wert	Typ
`false`	Boolean
`0`	Number
`-0`	Number
`0n`	BigInt
`""`	String (leerer String)
`null`	Null
`undefined`	Undefined
`NaN`	Number

Alles andere ist truthy — auch Werte, die überraschen können:

Boolean("0");        // true — ein nicht-leerer String!
Boolean([]);         // true — ein leeres Array!
Boolean({});         // true — ein leeres Objekt!
Boolean("false");    // true — der String "false" ist nicht false!

Ternary-Operator

Der Ternary-Operator ? : ist ein Ausdruck — er gibt einen von zwei Werten zurück:

const status = alter >= 18 ? "volljährig" : "minderjährig";

Das ist die kompakte Form von:

let status;
if (alter >= 18) {
  status = "volljährig";
} else {
  status = "minderjährig";
}

In React ist der Ternary ideal für Entweder-Oder-Situationen:

function LoginStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Willkommen zurück!</p> : <p>Bitte einloggen.</p>}
    </div>
  );
}

Ternaries lassen sich verschachteln, werden aber schnell unlesbar:

// Schwer zu lesen — besser vermeiden
{role === "admin"
  ? <AdminPanel />
  : role === "user"
    ? <UserDashboard />
    : <LoginPage />
}

Logisches UND (`&&`)

Der &&-Operator wertet von links nach rechts aus und nutzt Short-Circuit-Evaluation: Sobald ein Operand falsy ist, wird er sofort zurückgegeben — der Rest wird gar nicht mehr ausgewertet. Sind alle Operanden truthy, wird der letzte zurückgegeben:

"Hallo" && "Welt"    // "Welt" (beide truthy → wertet bis zum Ende aus)
"" && "Welt"          // "" (falsy → bricht sofort ab, "Welt" wird nie erreicht)
null && "Welt"        // null
true && "Hallo"       // "Hallo"
false && "Hallo"      // false

In React bedeutet das: Zeige etwas nur, wenn die Bedingung erfüllt ist:

function Benachrichtigung({ nachricht }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {nachricht && <p className="alert">{nachricht}</p>}
    </div>
  );
}

Wenn nachricht ein nicht-leerer String ist (truthy), wird das <p> gerendert. Wenn nachricht null, undefined oder "" ist (falsy), bricht && sofort ab und das <p> wird nie ausgewertet.

Die Zahl 0 ist falsy. Das führt zu einem überraschenden Verhalten beim Rendering:

function Nachrichten({ count }) {
  return (
    <div>
      {count && <p>Du hast {count} neue Nachrichten.</p>}
    </div>
  );
}

// count = 5 → zeigt "Du hast 5 neue Nachrichten."
// count = 0 → zeigt "0" im DOM! (nicht nichts)

0 && <p>...</p> ergibt 0 — und React rendert die Zahl 0 als Text. Die Lösung: einen expliziten booleschen Vergleich verwenden:

{count > 0 && <p>Du hast {count} neue Nachrichten.</p>}

Logisches ODER (`||`)

Der ||-Operator ist das Gegenstück zu && — auch er nutzt Short-Circuit-Evaluation, aber in die andere Richtung: Sobald ein Operand truthy ist, wird er sofort zurückgegeben. Sind alle Operanden falsy, wird der letzte zurückgegeben:

"Hallo" || "Fallback"    // "Hallo" (truthy → bricht sofort ab)
"" || "Fallback"          // "Fallback" (falsy → weiter zum nächsten)
null || "Fallback"        // "Fallback"
0 || 42                   // 42

Typischer Einsatz: Standardwerte setzen:

function Greeting({ name }) {
  return <h1>Hallo {name || "Gast"}!</h1>;
}

// <Greeting name="Dan" />  → "Hallo Dan!"
// <Greeting />             → "Hallo Gast!"

Vorsicht mit ||

Weil || alle falsy Werte überspringt, kann es zu Problemen führen:

const anzahl = 0;
const ergebnis = anzahl || 10; // 10 — aber 0 war ein gültiger Wert!

Wenn 0 oder "" gültige Werte sein können, verwende stattdessen den Nullish Coalescing Operator.

Nullish Coalescing (`??`)

Der ??-Operator gibt den rechten Wert nur dann zurück, wenn der linke null oder undefined ist — nicht bei anderen falsy Werten:

0 ?? 42          // 0 (0 ist nicht null/undefined)
"" ?? "Fallback" // "" (leerer String ist nicht null/undefined)
null ?? 42       // 42
undefined ?? 42  // 42

Vergleich mit ||:

const anzahl = 0;

anzahl || 10;  // 10 — 0 wird als falsy übersprungen
anzahl ?? 10;  // 0 — 0 wird behalten, nur null/undefined triggern den Fallback

In React ist ?? der präzisere Operator für Standardwerte:

function Score({ punkte }) {
  return <p>Punkte: {punkte ?? "Nicht bewertet"}</p>;
}

// <Score punkte={0} />    → "Punkte: 0"      (0 ist ein gültiger Wert)
// <Score />               → "Punkte: Nicht bewertet"

Optional Chaining (`?.`)

Der ?.-Operator bricht eine Kette von Zugriffen ab, wenn ein Wert null oder undefined ist — statt einen Fehler zu werfen:

const student = {
  name: "Dan",
  adresse: {
    stadt: "Berlin",
  },
};

student.adresse.stadt     // "Berlin"
student.adresse.plz       // undefined
student.kontakt?.email    // undefined (statt TypeError)
student.kontakt.email     // TypeError: Cannot read properties of undefined

Ohne ?. müsstest du jeden Zwischenschritt prüfen:

// Ohne Optional Chaining
const email = student.kontakt && student.kontakt.email;

// Mit Optional Chaining
const email = student.kontakt?.email;

Das funktioniert auch mit Methoden und Array-Zugriffen:

student.getName?.()     // ruft getName auf, falls vorhanden
student.kurse?.[0]      // erstes Element, falls kurse existiert

In React ist Optional Chaining besonders nützlich bei API-Daten, die noch nicht geladen sind:

function StudentProfil({ student }) {
  return (
    <div>
      <h2>{student?.name ?? "Lädt..."}</h2>
      <p>{student?.adresse?.stadt ?? "Unbekannt"}</p>
    </div>
  );
}

Kombination der Operatoren

Die Operatoren lassen sich kombinieren, um komplexe Bedingungen kompakt auszudrücken:

function StudentCard({ student }) {
  return (
    <div>
      <h2>{student?.name ?? "Unbekannt"}</h2>
      {student?.fach && <p>Fach: {student.fach}</p>}
      <p>Semester: {student?.semester ?? "k.A."}</p>
      <p>Status: {student?.aktiv ? "Aktiv" : "Inaktiv"}</p>
    </div>
  );
}

Muster	Bedeutung
`wert?.eigenschaft`	Sicherer Zugriff auf verschachtelte Daten
`wert ?? fallback`	Standardwert nur bei `null`/`undefined`
`wert \|\| fallback`	Standardwert bei jedem falsy Wert
`bedingung && <JSX />`	Zeige JSX nur wenn Bedingung truthy
`bedingung ? <A /> : <B />`	Zeige A oder B je nach Bedingung