JS – Teil 7: Operatoren Teil 2

Im ersten Artikel zu den JavaScript Operatoren haben wir bereits einiges geschafft – Zuweisungsoperator, Vergleichsoperatoren und Rechenoperatoren. Ein paar wichtige Dinge fehlen aber noch, darunter zum Beispiel die logischen Operatoren. Und was passiert überhaupt, wenn wir zwei Operatoren gleichzeitig benutzen? Diese Frage klären wir gleich im Artikel.

Logische Operatoren

Fangen wir klein an und widmen uns zuerst den logischen Operatoren. Wir stellen uns folgendes Beispiel vor:
Für ein Script müssen wir herausfinden ob eine Zahl größer als 10 aber immer noch kleiner als 20 ist. Ohne einen logischen Operator müssten wir das umständlich mit verschiedenen if Bedingungen und Variablen lösen. Aber genau hier kommt beispielsweise der logische UND Operator && ins Spiel.

 

Der && Operator

Der && Operator überprüft beide Seiten auf ihren boolschen Wert und gibt true zurück, falls rechts UND links true sind. Ist einer der beiden Werte false gibt der Operator auch false zurück.
Unser Beispiel könnten wir also so programmieren:

Eine wichtige Besonderheit hat dieser Operator: Es wird zuerst die linke Seite überprüft. Sollte diese Seite bereits false sein wird die rechte Seite gar nicht mehr überprüft, denn es ist dadurch unmöglich für den Operator noch true zurückzugeben. Das kann natürlich in Fällen wichtig sein, wenn auf der rechten Seite eine Funktion aufgerufen wird und deren Rückgabewert überprüft werden soll.

 

Der || Operator

Das Gegenteil zum logischen UND ist das logische ODER mit dem Operator || (die sogenannten Pipes, auf der deutschen Tastatur sind diese auf derselben Taste wie > und <). Vom Namen abgeleitet können wir uns schon denken, dass dieser Operator dann true zurückgibt, wenn links ODER rechts ein true steht. Andernfalls gibt er false zurück. Die Besonderheit von oben greift auch hier, allerdings umgekehrt: Ist der linke Wert true wird der rechte Wert gar nicht mehr überprüft, schließlich kann der Operator in diesem Fall kein false mehr zurückgeben.

Ein Beispiel für den ODER Operator sähe so aus:

 

 

Der ! Operator

Das Ausrufezeichen stellt in JavaScript den NOT Operator dar. Das haben wir im vorherigen Artikel schon bei Vergleichsoperatoren gesehen. Die Funktionsweise ist dabei ganz einfach:

Stellen wir einem Ausdruck ein Ausrufezeichen vor wird das Gegenteil zurückgegeben. Die Besonderheit an diesem Operator ist, dass er nur auf der rechten Seite einen Wert hat. Auch hier kommt wieder truthy und falsy ins Spiel, denn der Operator gibt nur true oder false zurück. Sehen wir uns ein paar Beispiele an:

 

Zeichenkettenverknüpfung

Was passiert, wenn wir zwei Strings haben und daraus einen machen wollen? Oder wenn wir den Wert einer Variable an einen String anhängen wollen? Zum Beispiel haben wir den Vornamen unseres Besuchers in einer Variablen gespeichert und möchten jetzt eine Begrüßung mit Hallo BESUCHER ausgeben, die seinen Namen enthält. Dafür gibt es den Operator zur Zeichenkettenverknüpfung, nämlich in JavaScript das +.

Jetzt denkst du dir vielleicht Ja aber das Plus haben wir doch für mathematische Addition auch schon verwendet, woher weiß JavaScript denn nun was ich machen will? und das ist eine berechtigte Frage – und leider auch eine beliebte Fehlerquelle. Hier kommen wieder die Datentypen ins Spiel.

Mathematisch addieren können wir nur Zahlen. Das heißt, wenn die Werte links und rechts vom Operator Zahlen darstellen wird JavaScript annehmen, dass wir diese addieren wollen. Ist aber einer (oder beide) der Werte ein String wird JavaScript annehmen, dass wir die beiden Werte verknüpfen wollen. Wo ist nun das Problem? Ganz einfach:

Wie wir sehen kann das sehr schnell zu unerwünschten Ergebnissen führen. Ist in einer Variable ein falscher Datentyp (in dem Fall ein String) wird aus der einfachen Rechnung 1+1 ganz schnell 11 anstatt 2. Es ist also wichtig, auf die korrekte Verwendung von Datentypen zu achten.

 

 

Operator zur Typbestimmung

Und genau weil es so wichtig ist gibt es natürlich auch Hilfsmittel dafür. Zum Beispiel den Operator typeof. Dieser nimmt den Ausdruck rechts von ihm (wir schreiben ihn also vor den Wert, den wir überprüfen möchten) und gibt uns den Datentyp dieses Werts zurück. Der zurückgegebene Wert ist immer ein String, der komplett klein geschrieben wird. Wir können also mit folgendem Beispiel überprüfen, ob ein Wert vom Typ String ist:

Die anderen möglichen Werte sind undefined, null, boolean, symbol, numberobject und als Sonderbehandlung function. Wie man sieht gibt es keinen speziellen Typ array, da Arrays für typeof ebenfalls vom Typ object sind.

Mit diesem Operator können wir nun also den Datentyp eines Werts überprüfen, was sehr wichtig für die korrekte Verwendung sein kann. Im obigen Beispiel zur Zeichenkettenverknüpfung könnten wir also zuerst bestimmen, ob beides Zahlen sind und diese nur dann miteinander addieren.

 

Operatorenrangfolge

Zum Abschluss des Themas Operatoren widmen wir uns noch einem wichtigen Punkt – der Operatorenrangfolge.
Folgendes Problem: Was passiert, wenn wir zwei Operatoren haben, die theoretisch gleichzeitig ausgeführt werden, je nachdem in welcher Reihenfolge dies passiert verändert sich aber das Ergebnis?

Um dieses Problem zu lösen gibt es zwei verschiedene Dinge:

  1. Die Assoziativität – Operatoren können linksassoziativ oder rechtsassoziativ sein, das heißt sie werden entweder von links nach rechts oder von rechts nach links abgearbeitet.
    Zwei einfache Beispiele:

    1. Der Additionsoperator + ist linksassoziativ, wird also von links nach rechts abgearbeitet. In der Rechnung 7 + 4 + 5 wird also zuerst das Ergebnis von 7 + 4 bestimmt und dieses dann mit der 5 addiert.
    2. Der Zuweisungsoperator = ist hingegen rechtsassoziativ, es wird also zuerst die rechte Seite abgearbeitet. Für a = b = c wird dementsprechend zuerst der Wert von c in b gespeichert und danach der neue Wert von b in a gespeichert.
  2. Die Rangfolge – Die Rangfolge bestimmt, welcher Operator zuerst ausgeführt wird. Je höher die Rangfolge eines Operators, desto früher wird er ausgeführt. Addition und Subtraktion haben beispielsweise eine Rangfolge von 11, Multiplikation und Division eine Rangfolge von 12. Da die Rangfolge von Multiplikation und Division höher ist, wird sie früher ausgeführt und damit die mathematische Regel Punkt vor Strich erfüllt.

Die Rangfolgen und Assoziativitäten der einzelnen Operatoren findest du hier.

 

 

Damit schließen wir das Thema Operatoren nach zwei langen Artikeln ab. Ich hoffe, du konntest etwas daraus mitnehmen und wenn du das nächste mal den Kopf kratzt weil sich dein Script anders verhält, als du es erwartest, hilft dir dieser Artikel bei der Lösungsfindung. Hast du noch Fragen oder Anmerkungen hinterlass mir doch bitte einen Kommentar unter dem Artikel. Möchtest du immer auf dem neuesten Stand bei den Artikeln sein, dann folge mir einfach bei Twitter unter @AbHeuteCoden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*