Die wichtigsten Operatoren in JavaScript

Thema in Kurzform

• Operatoren werden in der Programmierung genutzt, um einzelne Werte miteinander zu verrechnen oder zu vergleichen.
• Außerdem gibt es logische Operatoren, die auf kombinierte boolesche Ausdrücke angewandt werden und prüfen, ob der Gesamtausdruck true oder false ist.

Inhaltsverzeichnis

1. Operatoren für die Grundrechenarten
2. Modulo und Potenz
3. Verkettungsoperator
4. Zuweisungsoperatoren
5. Inkrement- und Dekrement Operatoren
6. Vergleichsoperatoren
7. Logische Operatoren
8. Übungen

Operatoren für die Grundrechenarten

Die vier Grundrechenarten sind uns allen bestens bekannt und sollten uns (hoffentlich!) keine Probleme machen:

• Addition +
• Subtraktion -
• Multiplikation *
• Division /

Im JavaScript-Einsatz sieht das dann so aus:

var zahl1 = 10;
var zahl2 = 2;

console.log(zahl1 + zahl2); // 12
console.log(zahl1 - zahl2); // 8
console.log(zahl1 * zahl2); // 20
console.log(zahl1 / zahl2); // 5

Die beiden Variablen zahl1 und zahl2 werden nacheinander mit den Operatoren der vier Grundrechenarten verrechnet und das Ergebnis in der Konsole ausgegeben.

Modulo und Potenz

JavaScript kennt neben den vier Grundrechenarten außerdem noch diese beiden wichtigen Operatoren:

• Modulo: %
• Potenz: **

Der Modulo-Operator wird mit dem Prozentzeichen % eingesetzt und hat den Zweck, den Rest einer Division zu ermitteln. Hier ein Beispiel:

var erg = 10 % 4; // 2

Die Operation 10 % 4 (sprich: "10 Modulo 4") liefert das Ergebnis 2, da der Rest der Division 10 durch 4 gleich 2 ist.

Nun zum Potenz-Operator: Dieser wird eingesetzt, indem wir zwei Sternchen ** zwischen die Basis und die Potenzzahl setzen:

var erg = 4 ** 2; // 16

Verkettungsoperator

Um zwei Strings miteinander zu verbinden ("verketten") wählen wir als Verkettungsoperator das Plus-Zeichen ( + ). Auf diese Weise können wir zum Beispiel den String "Hallo " mit "Welt!" zu "Hallo Welt!" verbinden:

var wort1 = "Hallo ";
var wort2 = "Welt!";
console.log(wort1 + wort2); // "Hallo Welt!"

Zuweisungsoperatoren

Den ersten Zuweisungsoperator ( = ) haben wir bei der Initialisierung von Variablen schon kennengelernt.

Im Gegensatz zur Mathematik bedeutet das = Zeichen aber kein "ist gleich"-Verhältnis (7 + 3 = 10). Stattdessen wird es in der Programmierung für die Zuweisung verwendet, das heißt, dass einer Variablen links vom = Zeichen der Wert der rechten Seite zugewiesen wird. Zum Beispiel:

var v1 = 2;
var v2 = 3;
var v3 = v1 + v2; // 5

In jeder Zeile dieses Beispiels findet eine Zuweisung statt. In den ersten beiden Zeilen werden die Werte 2 und 3 den Variablen v1 bzw. v2 zugewiesen. In der letzten Zeile erfolgt die Zuweisung nach der Addition von v1 und v2, sodass v3 den Wert 5 erhält.

Kombinierte Zuweisungsoperatoren

Soll der Wert einer Variablen durch Addition erhöht werden, können wir Folgendes schreiben:

var zahl = 4;
zahl = zahl + 2; // 6

In der zweiten Zeile erfolgt die Erhöhung um +2, indem der alte Wert von zahl mit +4 addiert wird und das Ergebnis 6 als neuer Wert zahl zugewiesen wird.

Schon klar, aber das geht auch kürzer - und zwar mit dem kombinierten Zuweisungsoperator ( += ):

var zahl = 4;
zahl += 2; // 6

Ganz easy also und außerdem ersparen wir uns unnötige Schreibarbeit.

Die kombinierten Zuweisungsoperatoren lassen sich für alle Grundrechenarten und auch für Modulo und Potenz anwenden:

var zahl = 4;

zahl += 4;  // 8
zahl -= 2;  // 6
zahl *= 3;  // 18
zahl /= 2;  // 9
zahl %= 5;  // 4
zahl **= 2; // 16

Inkrement- und Dekrement Operatoren

Es kommt sehr häufig vor, dass eine Variable um den Wert von genau 1 erhöht (inkrementieren) bzw. verringert (dekrementieren) werden soll. Um dies zu erreichen, ist folgende Schreibweise natürlich möglich:

var x = 1;
x = x + 1; // 2

Wie wir oben gesehen haben, geht das aber auch einfacher mit dem kombinierten Additions-Operator ( += ) :

var x = 1;
x += 1; // 2

Und sogar noch schneller geht die Erhöhung des Werts um +1 mit dem Inkrement-Operator ( ++ ):

var x = 1;
x++; // 2

Wir schreiben also lediglich hinter den Variablennamen zwei Plus-Zeichen und schon wird der Wert einer Variablen um +1 erhöht.

Analog dazu funktioniert der Dekrement-Operator ( -- ), der einen numerischen Variablen-Wert um exakt -1 verringert:

var x = 1;
x--; // 0

Diese Schreibweise kommt insbesondere in Schleifenkonstruktionen zum Einsatz. Nice to know: Die Programmiersprache C++ hat sogar ihren Namen vom Inkrement-Operator (C++ als direkter Nachfolger von C).

Vergleichsoperatoren

Mithilfe von Vergleichsoperatoren lassen sich zwei Werte miteinander vergleichen. Als Ergebnis des Vergleichs wird ein boolescher Wert (true oder false) zurückgeliefert. Diese Operatoren werden zumeist in if-else-Kontrollstrukturen eingesetzt. Sie werden aber der Vollständigkeit halber bereits hier aufgeführt:

Hier einige konkrete Beispiele mit JavaScript-Code:

var a = 3;
var b = 5;

console.log(a > b);  // false
console.log(a < b);  // true
console.log(a >= b); // false
console.log(a <= b); // true
console.log(a == b); // false
console.log(a != b); // true

Logische Operatoren

Die logischen Operatoren werden eingesetzt, um den Wahrheitswert zweier boolescher Ausdrücke zu überprüfen. Die Logischen Operatoren werden darum auch als boolesche Operatoren bezeichnet. Wir können diese Prüfung sowohl mit einer UND- als auch einer ODER-Verknüpfung realisieren. Dafür werden die Operatoren && und || verwendet.

Wie soll das nun ablaufen? Sehen wir uns das einmal an einem konkreten Beispiel für eine UND-Verknüpfung mit dem entsprechenden Operator && an:

var a = true;
var b = true;
var c = (a && b); // true

Die Werte der Variablen a und b sind true; mit anderen Worten: Beide boolesche Ausdrücke sind wahr. Genau dies prüft der logische Operator &&. Der "Gesamtausdruck" ist nur dann true, wenn die beiden "Einzelausdrücke" gleichsam true sind. Ist einer der beiden Ausdrücke false, wird mit der Prüfung a && b nämlich false zurückgeliefert:

var a = true;
var b = false;
var c = (a && b); // false

Die Prüfung mit dem ODER-Operator ( || ) funktioniert ähnlich, nur dass es hier genügt, wenn einer der beiden Ausdrücke wahr ist:

var a = true;
var b = false;
var c = (a || b); // true

Zusammenspiel mit Vergleichsoperatoren

Logische Operatoren werden häufig zusammen mit Vergleichsoperatoren eingesetzt. Wir können auf diese Weise alle möglichen logischen Konstellationen abbilden. Mit einem zusätzlichen Einsatz von Klammern lässt sich zudem ein höheres Maß an Komplexität erreichen. Zum Beispiel:

var wahrheit = ((5 > 2) && (2.3 <= 2.29)) || (1 == 1);

Was meinen Sie, ist der Wert der Variablen wahrheit?

Der Gesamtausdruck ist true (und damit auch der Wert von wahrheit). Der &&-Operator prüft zunächst die beiden Ausdrücke (5 > 2) und (2.3 <= 2.29). Da letzteres false ist, ergibt die &&-Prüfung insgesamt auch false. Damit ist der erste Teil der ODER-Prüfung ( || ) false. Da jedoch der zweite Teil mit (1==1) true ist, ist am Ende auch der Gesamtausdruck true.

Alles klar? 😎

Übungen

console.log((5 * 2) % 10);

var b1 = (false && false);
var b2 = (3 > 3) || ((2 == 2) && (1 < 0));
var b3 = (35 >= 10) && false;

var x = 100;
var y = 100;
x += ++y;
var z = x + y;