Logische Operatoren
Vergleiche lieferten eine Ja/Nein-Antwort. Oft brauchst du mehrere Antworten gleichzeitig: alt genug und Punktzahl hoch genug? Mitglied oder Gast erlaubt? Die Werkzeuge, die solche Antworten verbinden oder umdrehen, sind logische Operatoren: &&, || und !. Truthy und Falsy kennst du schon; hier lernst du die drei Alltagszeichen und vertraust dem Boolean, den sie erzeugen.
Was ist ein logischer Operator?
Ein logischer Operator arbeitet mit boolean-ähnlichen Werten. Er speichert nicht in einen Namen (=) und fragt nicht „gleicher Wert?“ (===). Er verbindet oder dreht Ja/Nein-Ergebnisse. Nach true && false ist das Ergebnis false. Nach true || false ist es true. Nach !false ist es true. Du kannst den Boolean loggen, in einer Variablen halten oder auf die Seite schreiben.
Die Operatoren auf einen Blick
📊 Alltägliche logische Operatoren
| Operator | Alltag lesen | Typisches Ergebnis |
|---|---|---|
&& |
bestehen beide Seiten? | true && true → true |
! |
Ja/Nein umdrehen | !false → true |
Halte dieses Blatt griffbereit. Für Einsteiger fütterst du diese Operatoren am besten mit klaren Booleans aus Vergleichen (age >= 18) oder den Literalen true / false. Andere Werte gelten auch als truthy oder falsy — ehrliche Ja/Nein-Werte halten Bugs fern.
console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);
let ok = true;
console.log(ok && true);
&& braucht beide Seiten
Zwei Ampersands bedeuten „und“. Beide Seiten müssen truthy sein, damit der gesamte Ausdruck truthy ist. Scheitert die linke Seite, ist die kombinierte Antwort schon nein — es gibt kein „halbes Ja“.
Die Konsole zeigt true, false, false, false, true. Nur die erste und letzte Zeile bestehen beide Seiten. Denk an eine Tür mit zwei Schlössern: beide Schlüssel müssen passen.
console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);
let guest = false;
console.log(guest || true);
|| braucht eine Seite
Zwei senkrechte Striche bedeuten „oder“. Ist eine Seite truthy, ist der ganze Ausdruck truthy. Nur wenn beide Seiten scheitern, kommt false.
Du siehst true, true, true, false, true. Nur die vierte Zeile ist ein Totalausfall. Ein offener Weg reicht — wie eine Tür mit zwei getrennten Schlüsseln, von denen jeder allein öffnet.
console.log(!true);
console.log(!false);
let ready = false;
console.log(!ready);
let open = true;
console.log(!open);
! dreht die Antwort um
Ein einzelnes ! davor bedeutet „nicht“. Truthy wird falsy und umgekehrt. !ready hilft, wenn du „noch nicht bereit?“ fragen willst, ohne einen längeren Vergleich neu zu schreiben.
Die Konsole druckt false, true, true, false. ready war false, also ist !ready true. open war true, also ist !open false.
let age = 20;
let score = 75;
console.log(age >= 18 && score >= 60);
console.log(age >= 18 && score >= 90);
let member = false;
let pass = true;
console.log(member || pass);
Vergleiche zu einem Check verbinden
Alltagslogik umschließt fast immer Vergleichsergebnisse. age >= 18 && score >= 60 stellt zwei Rangfragen und verbindet sie mit „und“. member || pass fragt, ob ein Weg offen ist. Lass === / >= die Fragen stellen; && / || verbinden die Antworten.
let age = 20;
let score = 75;
let allowed = age >= 18 && score >= 60;
console.log(allowed);
let member = false;
let guestOk = true;
let enter = member || guestOk;
console.log(enter);
allowed ist true (beide Checks bestehen). enter ist true, weil der Gastweg offen ist, obwohl member false ist. Der logische Ausdruck hat den Boolean schon erzeugt — du hast ihm nur einen Namen gegeben.
Ein Tor auf der Seite zeigen
Berechne einen kombinierten Boolean und schreibe ein kurzes Label auf die Seite.
<!DOCTYPE html>
<html>
<head>
<title>Logical — page gate</title>
</head>
<body>
<p id="out">…</p>
<script>
let age = 20;
let score = 75;
let allowed = age >= 18 && score >= 60;
let box = document.getElementById("out");
box.textContent = "allowed=" + allowed;
</script>
</body>
</html>
age ist 20 und score ist 75, beide Seiten von && bestehen, die Seite zeigt allowed=true. Setze score auf 50, lade neu — du solltest allowed=false sehen. Später verzweigst du mit if; dieses Demo druckt nur das kombinierte Ja/Nein.
Selbst ausprobieren
- Logge
true && falseundtrue || false. - Logge
!falseund!true. - Setze
let age = 16und loggeage >= 18 && age < 65. - Setze
let age = 30und logge denselben Bereichscheck. - Vergleiche
false || truenebenfalse && true. - Ändere im HTML-Demo nur
score, lade neu und lies das neueallowed=-Text.
Typische Fehler
- Einzelnes
&oder|schreiben — Einsteiger wollen&&und|| &&nutzen, wenn===gemeint war (verbinden vs. „gleich?“)- Erwarten, dass
&&zwei Zahlen allein vergleicht — zuerst jede Seite als Vergleich schreiben - Vergessen, dass
!den Boolean davor umdreht - Unklare Werte füttern, bevor du Truthy/Falsy ruhig lesen kannst — mit klaren Vergleichen starten
Kurzfassung
- Logische Operatoren verbinden oder drehen Ja/Nein-Ergebnisse
&&braucht beide Seiten;||mindestens eine;!dreht um- Für Alltagchecks Vergleichsergebnisse verbinden (
age >= 18 && score >= 60) - Boolean speichern, wenn du einen Namen willst; auf die Seite schreiben für ein Label
- Vergleichszeichen und Logikzeichen haben unterschiedliche Jobs
- Als Nächstes: if-else — mit diesen Booleans wählen, welcher Code läuft
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt