JS – Teil 6: Operatoren

Um unsere if Bedingungen aus dem letzten Beitrag effektiver einsetzen zu können benötigen wir die sogenannten Operatoren. Erst diese kleinen Helfer ermöglichen es uns, komplexe Vergleiche oder mathematische Aufgaben durchzuführen und so die Dynamik in unserem Script zu erhöhen. In diesem Artikel sehen wir uns die wichtigsten Operatoren mal etwas genauer an.

Was ist ein Operator?

Operatoren sind in mehreren Bereichen wichtig. Einerseits führen sie Operationen (daher der Name) auf etwas anderes aus. Ein einfaches Beispiel dafür ist das +. Hier wird die Zahl links vom Operator mit der Zahl rechts vom Operator addiert und das Ergebnis davon zurückgegeben – etwas das wir alle aus der Grundschule kennen.
Ein anderes Beispiel sind die Vergleichsoperatoren wie das >. Auch das kennen wir aus der Schule, dabei wird überprüft ob der Wert links vom Operator größer ist, als der Wert rechts davon. Das Ergebnis dieser Operation ist dann immer true oder false.

Die meisten Operatoren haben also zwei Werte mit denen sie arbeiten – einen links und einen rechts – und ein Ergebnis. Es gibt aber auch hier (wie immer im Leben) Ausnahmen, manche Operatoren beziehen sich auf nur einen Wert, manche sogar auf drei Wert.

Genug mit der Einleitung, fangen wir an und sehen uns die Operatoren einfach der Reihe nach an.

 

Zuweisungsoperator

Beginnen wir mit einem Operator, den wir schon aus unserem Artikel zum Thema Variablen kennen – dem Zuweisungsoperator =. Wie der Name schon sagt können wir mit diesem Operator einen Wert zuweisen, nämlich einer Variable.
Dabei wird der Wert rechts vom Operator dem Wert links davon zugewiesen. Steht also rechts eine Zahl und links ein Variablenname wird die Zahl der Variable zugewiesen. Aber rechts könnte natürlich auch eine Variable stehen, dann wird der Wert der Variable rechts der linken Variablen zugewiesen.

Was passiert nun, wenn rechts aber eine Funktion steht? Ganz einfach, dann wird der Rückgabewert der Funktion verwendet und dieser wird der Variablen links zugewiesen. All das ist kein Problem.
Das Ergebnis der Zuweisungsoperation ist der Wert der Variablen links nach der Zuweisung.

Dieses Beispiel gibt also die Zahl 10 aus, da die Zuweisung zuerst stattfindet und dann der Wert der Variablen ausgegeben wird.

 

 

Vergleichsoperatoren

Die nächste Gruppe die wir uns ansehen sind die Vergleichsoperatoren. Möchten wir zwei Werte miteinander vergleichen steht uns dafür eine ganze Reihe von Operatoren zur Verfügung.

 

Gleich und ungleich

Sehen wir uns zuerst an, wie wir überprüfen können, ob zwei Werte gleich sind oder nicht. Hier gibt es direkt eine kleine Besonderheit, nämlich die Datentypen. Für JavaScript macht es einen großen Unterschied, ob wir von der Zahl 10 oder von einem String „10“ reden. Aus diesem Grund gibt es auch vier anstatt zwei Operatoren, die wir uns ansehen müssen.

Der Operator === überprüft, ob der Wert links derselbe wie der Wert rechts ist. Dabei wird auch der Datentyp überprüft! Sind beide Werte gleich gibt der Operator true zurück, andernfalls false.

Das Gegenteil davon ist !==. Das Ausrufezeichen kehrt die Wirkung des Operators um, dieser Operator gibt also true zurück, wenn links ein anderer Wert als rechts steht. Falls beide Werte gleich sind wird false zurückgegeben.

Aber was, wenn uns nun der Datentyp egal ist? Was ist, wenn für uns 10 dasselbe wie „10“ ist und wir nur wissen wollen, ob beides zehn ist? Auch dafür gibt es ein Operatorenpaar, nämlich == und !=.

Mit == werden die Werte auf beiden Seiten angepasst, das heißt es findet eine Typumwandlung statt. Falls das nicht funktioniert wird false zurückgegeben (zum Beispiel kann man ein Array nur schwer in einen String umwandeln). Sind die Werte auf beiden Seiten nach der Typumwandlung gleich gibt der Operator true zurück.

Und auch hier gibt es das Gegenteil !=. Auch dieser Operator gibt – wie sein typsicheres Gegenstück – dann true zurück, wenn die beiden Werte nach einer Typumwandlung unterschiedlich sind.

 

Sehen wir uns noch einige Beispiele dazu an:

 

 

Größer und kleiner

Die Welt ist nicht nur schwarz und weiß, das ist wohl jedem bewusst. Daher gibt es auch noch mehr Vergleichsoperatoren – neben der Gleichheit können wir nämlich auch noch überprüfen ob ein Wert größer oder kleiner als der andere ist. Dafür stehen uns folgende Operatoren zur Verfügung:

Um nur größere oder kleinere Werte zuzulassen können wir < (links muss kleiner als rechts sein) und > (links muss größer als rechts sein) verwenden. Wird die Bedingung erfüllt (also der linke Wert ist kleiner / größer als der rechte) gibt der Operator true zurück, andernfalls false.

Ein weiteres Operatorenpaar ist <= und >=. Wie du dir sicher gedacht hast stellt das eine Abkürzung für Der linke Wert muss kleiner / größer oder gleich zum rechten sein dar. Auch hier wird wieder true oder false zurückgegeben.

Auch hier noch ein paar Beispiele um das Gelernte zu verstehen:

 

Rechenoperatoren

Nun können wir zwar Werte schön miteinander vergleichen aber oft genügt das ja nicht. Wir wollen die Werte auch verändern, das macht die Programmierung aus. Eine der einfachsten Methoden dafür ist natürlich das Rechnen mit Zahlen wofür wir ja auch schon im Mathematikunterricht Operatoren gebraucht haben – Plus, Minus, Geteilt und so weiter. Wie können wir also nun Zahlen in JavaScript verändern?

 

Grundrechenarten

Genau wie im Mathematikunterricht können wir auch in JavaScript die Grundrechenarten einsetzen – also +, , / und *. Die Funktionsweise ist bei allen dieselbe und sehr intuitiv: Je nach Rechenart wird die linke mit der rechten Zahl verrechnet und das Ergebnis der Rechnung zurückgegeben. Sehen wir uns einfach ein paar Beispiele an:

 

 

Inkrement und Dekrement

Mit den Rechenarten können wir jetzt schon einiges anfangen. Was ist jetzt aber, wenn wir eine Zahl einfach nur um eins erhöhen oder verringern wollen? Grundsätzlich können wir das natürlich mit folgendem Code:

Das ist aber umständlich. Genau dafür gibt es Inkrementoren und Dekrementoren! Diese praktischen kleinen Helfer ersetzen genau die zweite Zeile aus dem Beispiel, das heißt sie erhöhen den Wert einer Variable um 1 (oder senken ihn um 1) und speichern den neuen Wert in der Variable ab. Aus einer 100 in der Variable wird also eine 101 oder eine 99.

Geschrieben werden diese Operatoren einfach als ++ oder , es macht aber einen wichtigen Unterschied wo wir sie hinschreiben! Dazu folgendes Beispiel:

Was wird hier ausgegeben? Wir erhöhen den Wert von x um 1 also müsste es 4 sein, richtig? Nicht ganz. Dadurch, dass das ++ hinter dem Variablennamen steht findet zuerst die Ausgabe von 3 statt und danach wird der Wert erhöht.
Ganz anders sieht es aus, wenn wir den Inkrementor vor den Variablennamen schreiben:

Jetzt kommt die Ausgabe 4 denn der Wert wird zuerst erhöht. Ein kleiner, aber äußerst wichtiger Unterschied. Mit Dekrementoren (also –) funktioniert es natürlich genau gleich.

Das heißt, Inkrementoren und Dekrementoren nehmen den Wert links oder rechts (sie haben nur einen), erhöhen bzw verringern diesen um 1 und speichern den neuen Wert dann wieder in der Variable ab.

 

Modulo

Einen interessanten Rechenoperator haben wir noch – den Modulo. Der Modulo ist – ganz simpel – der sogenannte Restoperator. Das heißt ganz einfach, er führt eine Division durch, gibt aber nicht das Ergebnis der Division zurück sondern den Rest.
Teilen wir also beispielsweise 15 durch 2 wäre das Ergebnis die 7 (2 passt 7 mal in 15). Der Rest ist allerdings 1, denn 2 * 7 = 14. Und der Modulo gibt uns diese 1 dann als Ergebnis zurück. Der Operator Modulo ist das Prozentzeichen %.

 

 

Das waren noch nicht alle JavaScript Operatoren. Weitere nützliche Operatoren und noch einige andere wichtige Informationen zu diesem Thema sehen wir uns detailliert im nächsten Artikel an.
Hast du bis hierhin noch Fragen oder ist etwas unklar? Hinterlass mir gerne 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.

*