Quelltext der Seite JavaScript/Operatoren/Logische Operatoren

← JavaScript/Operatoren/Logische Operatoren

Wechseln zu: Navigation, Suche

Sie sind nicht berechtigt, die Seite zu bearbeiten. Grund:

Diese Aktion ist auf Benutzer beschränkt, die der Gruppe „Benutzer“ angehören.

Sie können den Quelltext dieser Seite betrachten und kopieren:

Mit den logischen Operatoren werden logische Verknüpfungen formuliert, z.&nbsp;B. für Abbruchbedingungen von [[JavaScript/Kontrollstruktur#Schleifen|Schleifen]], [[JavaScript/Kontrollstruktur|bedingte Anweisungen]] bzw. Verzweigungen im Programmfluss. Beim Verknüpfen von booleschen Operanden ([[JavaScript/Objekte/Boolean|true]]/[[JavaScript/Objekte/Boolean|false]]) entsprechen die Ergebnisse denen der booleschen Algebra.

JavaScript ist bei den logischen Operatoren aber nicht nur auf die booleschen Werte <code>false</code> und <code>true</code> beschränkt. Statt dessen richten sie sich nach den Werte-Eigenschaften "truthy" und "falsy" (siehe  Artikel zu [[JavaScript/Objekte/Boolean|Boolean]]) und behandeln truthy-Werte wie true und falsy-Werte wie false.

Mit dem logischen Operator <code>&&</code> verknüpfen Sie zwei oder mehrere Bedingungen durch "und", d.&nbsp;h. beide bzw. alle Bedingungen müssen erfüllt sein, damit die gesamte Bedingung erfüllt ist.

Mit dem logischen Operator <code><nowiki>||</nowiki></code> verknüpfen Sie zwei oder mehrere Bedingungen inklusiv durch "oder", d.&nbsp;h. es genügt, wenn eine der Bedingungen erfüllt ist, damit die gesamte Bedingung erfüllt ist.

Der logische Operator <code>!</code> (engl. ''not'') prüft, ob ein Ausdruck unwahr ist. Der Ausdruck <code>if (!name)</code> trifft zu, wenn der Wert von <code>name</code> falsy ist, also ein Leerstring, <code>null</code>, undefiniert oder 0 ist.

{{Beispiel|zeige=dummy|
{{BeispielCode|<syntaxhighlight lang="javascript">
    let PLZ = 81000,
        x = 20,
        y = 8,
        name = "";

    if (PLZ >= 80000 && PLZ <= 82000)
        alert("Sie wohnen wohl in München oder Umgebung!");

    if (x > 100 || y == 0)
        return;

    if (!name)
        alert("Sie haben vergessen, einen Namen einzugeben!");
</syntaxhighlight>}}
}}

=== Wahrheitstabellen und Kurzschlussreaktionen ===
Eine klassische boolesche Wahrheitstabelle würde in den Ergebnisspalten true oder false aufführen. Das ist in JavaScript nicht falsch, aber unvollständig, weil nur der Not-Operator wirklich <code>true</code> oder <code>false</code> liefert. <code>&&</code> und <code><nowiki>||</nowiki></code> liefern statt dessen einen ihrer Operanden zurück. Wenn man nur wissen will, ob das Ergebnis truthy oder falsy ist, läuft das auf das Gleiche hinaus.

Darüber hinaus ist wichtig, dass JavaScript die in vielen Sprachen übliche Kurzschluss-Auswertung der booleschen Operationen nutzt. Damit ist gemeint, dass der rechte Operand nicht berechnet wird, wenn der linke Operand bereits das Ergebnis der Operation eindeutig festlegt. In der unten stehenden Tabelle kommt es immer dann zum Kurzschluss, wenn das Ergebnis der Operation A lautet.

{|style='text-align: center; margin-left: 6em;' cellspacing='0' border='1'
!style='background-color:#FFC' colspan="2"|Eingabe
!style='background-color:#FFC' colspan="3"|Ergebnis
|-
!style='width:4em;background-color:#FFC'|A
!style='width:4em;background-color:#FFC'|B
!style='width:4em'|<nowiki>A && B</nowiki>
!style='width:4em'|<nowiki>A || B</nowiki>
!style='width:4em'|<nowiki>! A</nowiki>
|-
|style='background-color:#FFC'| ''falsy''
|style='background-color:#FFC'| ''falsy''
| A || B || true
|-
|style='background-color:#FFC'|''falsy''
|style='background-color:#FFC'|''truthy''
| A || B ||
|-
|style='background-color:#FFC'|''truthy''
|style='background-color:#FFC'|''falsy''
| B || A || false
|-
|style='background-color:#FFC'|''truthy''
|style='background-color:#FFC'|''truthy''
| B || A ||
|}

Die Kombination dieser beiden Eigenschaften kann man vielfältig nutzen. Das folgende Beispiel zeigt, wie man vor Einführung der Operatoren [[JavaScript/Operatoren/Optional_Chaining_Operator|?.]] und [[JavaScript/Operatoren/Nullish Coalescing Operator|??]] in einer Zeile sichergestellt hat, dass Objekte und Eigenschaften existieren, bevor man darauf zugreift, und auch noch einen Default-Wert hinzufügt. Wie es ohne truthy, falsy und Kurzschluss aussehen müsste, ist ebenfalls dargestellt. Mit den neuen Operatoren ist diese Anwendung obsolet geworden, man sieht sie aber oft noch in älterem Code.

{{Beispiel|
{{BeispielCode|<syntaxhighlight lang="javascript">
   function zeigePlzAlt(o) {
      alert("Die Postleitzahl ist " + (o && o.adresse && o.adresse.plz || "unbekannt"));
   }
   function zeigePlz(o) {
      alert("Die Postleitzahl ist " + (o?.adresse?.plz ?? "unbekannt"));
   }
   function zeigePlzUmstaendlich(o) {
      let plz = "unbekannt";
      if (o != null) {
         if (o.adresse != null) {
            if (o.adresse.plz != null) {
               if (o.adresse.plz.length > 0) {
                  plz = o.adresse.plz;
               }
            }
         }
      }
      alert("Die Postleitzahl ist " + plz);
   }

   zeigePlz(null);
   zeigePlz({ adresse: { ort: 'Berlin' } });
   zeigePlz({ adresse: { plz: '11011', ort: 'Berlin' } });
</syntaxhighlight>}}
}}
Beachten Sie, dass die Klammern um den logischen Ausdruck herum notwendig sind. Weil + eine höhere Priorität hat als <code>&&</code>, würde ohne Klammerung der linke Operator des ersten <code>&&</code> ("Die Postleitzahl ist" + o) lauten, was immer truthy wäre ("X"+null ergibt "Xnull"). Den <code>&&</code> Teil einzuklammern ist dagegen nicht nötig, weil <code>&&</code> eine höhere Priorität hat als <code><nowiki>||</nowiki></code>.

Beachten Sie im umständlichen Beispiel auch, dass die Abfrage mit != und nicht mit !== erfolgt. Der Grund ist, dass <code>(null == undefined)</code> <code>true</code> ergibt, <code>(null === undefined)</code> dagegen <code>false</code>. Würde der – sonst empfohlene – <code>!==</code> Operator genutzt, müsste man explizit auf <code>o !== null <nowiki>||</nowiki> o !== undefined</code> abfragen.

=== Der NOT-Operator ===

Da der NOT-Operator immer einen booleschen Wert als Ergebnis liefert, eignet er sich auch zur expliziten Umwandlung eines beliebigen Datentyps zu einem entsprechenden booleschen Wert, indem man einfach eine doppelte Verneinung notiert:

{{Beispiel|
{{BeispielCode|<syntaxhighlight lang="javascript">
 alert( !!"" );
</syntaxhighlight>}}
}}

Die Anweisung gibt <code>false</code> aus, weil die leere Zeichenkette <code>""</code> intern <code>false</code> ergibt, sodass auch die doppelte NOT-Operation als Ergebnis <code>false</code> liefert. Die Anweisung <code>alert("");</code> gibt dagegen die leere Zeichenkette selbst aus. Alternativ zum doppelten Not könnte man auch die Boolean-Funktion nutzen, um den falsy-Wert "" zu <code>false</code> zu konvertieren.



{{Fortsetzung|vorher=Rechenoperatoren|vorherlink=JavaScript/Operatoren/Rechenoperatoren|übersicht=Sprachelemente (Übersicht)|übersichtlink=JavaScript/Sprachelemente|weiter=Bit-Operatoren|weiterlink=JavaScript/Operatoren/Bit-Operatoren}}

[[Kategorie:JavaScript]]

Folgende Vorlagen werden auf dieser Seite verwendet:

Vorlage:Beispiel (Quelltext anzeigen) (schreibgeschützt für unangemeldete und neue Benutzer)
Vorlage:BeispielCode (Quelltext anzeigen) (schreibgeschützt für unangemeldete und neue Benutzer)
Vorlage:Fortsetzung (Quelltext anzeigen) (schreibgeschützt für unangemeldete und neue Benutzer)

Zurück zur Seite JavaScript/Operatoren/Logische Operatoren.

Abgerufen am 6.01.2026
von "http://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Logische_Operatoren"

Quelltext der Seite JavaScript/Operatoren/Logische Operatoren

Navigationsmenü

SELFHTML

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Mehr

Suche

Starten

Werkzeuge

Mitmachen