Signatur
Beschreibung
Der Logical AND-Operator (&&) verknüpft zwei Ausdrücke miteinander. Im klassischen booleschen Sinne liefert er true, wenn beide Seiten true sind – andernfalls false. In JavaScript ist das Verhalten jedoch allgemeiner: && gibt nicht zwingend einen booleschen Wert zurück, sondern den ersten falsy Operanden oder, falls alle Operanden truthy sind, den Wert des letzten Operanden.
&& arbeitet mit sogenannter Kurzschlussauswertung (Short-Circuit Evaluation): Ist der linke Operand falsy, wird der rechte Ausdruck überhaupt nicht ausgewertet. Das macht && nicht nur für Bedingungen, sondern auch für bedingte Ausführung von Seiteneffekten nützlich – etwa isLoggedIn && renderDashboard().
Als falsy gelten in JavaScript: false, 0, -0, 0n, "" (leerer String), null, undefined und NaN. Alle anderen Werte sind truthy. Der Operator konvertiert die Operanden dabei nicht in Booleans – er gibt immer den originalen Wert eines der Operanden zurück.
Häufige Einsatzgebiete sind: Guard-Ausdrücke in JSX/React, bedingte Methodenaufrufe, Validierungsketten sowie die Kombination mit dem Nullish Coalescing Operator (??) oder dem optionalen Chaining (?.) für defensive Zugriffsmuster.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $leftExpr Pflicht | any | — | Der linke Operand. Wird immer zuerst ausgewertet. Ist er falsy, wird er direkt zurückgegeben und rightExpr nicht mehr ausgewertet. |
| $rightExpr Pflicht | any | — | Der rechte Operand. Wird nur ausgewertet, wenn leftExpr truthy ist. Sein Wert wird in diesem Fall als Ergebnis des gesamten Ausdrucks zurückgegeben. |
Rückgabewert
leftExpr, wenn dieser falsy ist; andernfalls den Wert von rightExpr. Der Rückgabewert ist nicht zwingend ein boolean.Beispiele
Klassische boolesche Verknüpfung
const alter = 25;
const hatAusweis = true;
if (alter >= 18 && hatAusweis) {
console.log("Zutritt gewährt");
} else {
console.log("Zutritt verweigert");
}Short-Circuit: Funktion nur bei truthy linkem Operanden aufrufen
const user = { name: "Anna", isAdmin: true };
// renderAdminPanel() wird nur aufgerufen, wenn user.isAdmin truthy ist
user.isAdmin && console.log("Admin-Panel wird gerendert");
const gast = { name: "Bob", isAdmin: false };
gast.isAdmin && console.log("Wird nie ausgegeben");Rückgabe des ersten falsy Wertes (nicht-boolesche Operanden)
console.log(1 && 2 && 3); // Alle truthy → letzter Wert
console.log(1 && 0 && 3); // 0 ist falsy → 0
console.log(null && "hallo"); // null ist falsy → null
console.log("text" && 42); // Beide truthy → letzter WertGuard-Ausdruck für optionale Objekteigenschaften
const fetchUser = async (id) => {
const response = await fetch(`/api/users/${id}`);
const data = response.ok && await response.json();
// data ist false/falsy wenn response.ok false ist,
// andernfalls das geparste JSON-Objekt
return data || null;
};
// Kombination mit optionalem Chaining
const config = null;
const timeout = config && config.timeout; // → null (kein Fehler)
console.log(timeout);// Wichtig · Fallstricke
Verwechslungsgefahr mit ??: Der Nullish Coalescing Operator (??) prüft nur auf null und undefined, während && alle falsy Werte berücksichtigt. 0 && "default" ergibt 0; 0 ?? "default" ergibt 0 ebenfalls – aber null ?? "default" ergibt "default", während null && "default" null ergibt.
Operator-Priorität: && hat eine höhere Priorität als ||, aber eine niedrigere als Vergleichsoperatoren (===, < usw.). Bei komplexen Ausdrücken empfehlen sich Klammern zur besseren Lesbarkeit: (a > 0 && b > 0) || c.
Kein Ersatz für if-Blöcke: Der Einsatz von && als Steuerfluss-Ersatz (z. B. in JSX) kann die Lesbarkeit bei komplexer Logik verschlechtern. Bei mehr als zwei Bedingungen ist ein klassisches if-Statement oft klarer.
Achtung bei 0 und leerem String in JSX/React: {count && <Component />} rendert 0, wenn count === 0, da 0 ein falsy Wert ist, der trotzdem als Text gerendert wird. Besser: {count > 0 && <Component />} oder {!!count && <Component />}.