1. Startseite
2. JavaScript
3. Operatoren

Operatoren

Wir können inzwischen Daten von verschiedenen Typen in Variablen Speichern, doch das alleine bringt uns nicht wirklich viel, vor allem weil wir die Daten ja bereits kennen.

Interessant wird es doch erst, wenn wir mit den verschiedenen Daten arbeiten können, indem wir sie verändern und Kombinieren, um daraus völlig neue Daten zu erhalten. Wir können eine individuelle Begrüßung erstellen oder auf bestimmte Ereignisse reagieren, indem wir mit verschiedenen Operatoren arbeiten. An dieser Stelle möchte ich auf die Begriffe Anweisung und Ausdruck sowie auf Operator und Operand eingehen. Aus der Mathematik sollten noch die Begriffe Operand und Operator bekannt sein. Dabei sind die Zahlen die Operanden und das zum Beispiel gesetzte Multiplikationszeichen zwischen den Operanden ist der Operator. Ein Ausdruck ist das Ergebnis aus einer Kombination zwischen Operanden und Operatoren. Die Anweisung ist das Stück vom Code, welches nacheinander ausgeführt und mit dem Semikolon beendet wird. Der Interpreter führt also Anweisungen nacheinander aus.

Ein Operand kann eine Variable sein sowie eine einfache Zahl oder eine Zeichenkette usw. Die Operatoren verknüpfen die einzelnen Operanden und dieses Ergebnis ist dann ein Ausdruck. Fangen wir am besten langsam an und beginnen mit den Operatoren zum Berechnen von Zahlen.

Arbeiten mit Zahlen

Eine einfache Addition zur Übung:

let x = 12 + 50;

Eine einfache Subtraktion zur Übung:

let x = 60 - 50;

Eine einfache Multiplikation zur Übung:

let x = 3 * 5;

Eine einfache Division zur Übung:

let x = 20 / 4;

Neben den Standardoperatoren gibt es noch den Modulo Operator der zur Restermittlung einer Division verwendet wird. Bei der Berechnung: 15 dividiert durch 4 erhalten wir einen Rest von 3

let x = 15 % 4;

Das Modulo wird mit dem Prozentzeichen als Operator gerechnet.

Der Inkrement und Dekrement Operator addieren bzw. subtrahieren jeweils "1" vom Wert. Beispiel für Inkrement:

let x = 5++;

Beispiel für Dekrement:

let x = 5--;

Zu guter Letzt noch die Potenzrechnung.

let x = 4**3;

Die Potenzialrechnung: 4*1=4, 4*4=16 & 16*4=64

Wenn mehrere Operatoren in einem Ausdruck verwendet werden, dann wertet der Interpreter diese in der bekannten Reihenfolge: Punktrechnung geht vor Strichrechnung und Klammer geht vor beides.

let x = 4+3*5;

Ergibt 19, denn es wird zuerst 3 mit 5 Multipliziert, welches 15 ergibt, und danach wird 4 mit 15 addiert, welches 19 ergibt.

Wenn die Addition vor der Multiplikation ausgewertet werden soll, dann schreiben wir einfach die Addition in Klammern:

let x = (4+3)*5;

Daraus ergibt sich das Ergebnis 35, denn jetzt wird erst 4 mit 3 Addiert was 7 Ergibt und danach wird 7 mit 5 Multipliziert, was dann 35 ergibt.

Zuweisungsoperatoren

Mit dem Gleichheitszeichen können wir den linken Operand den Wert zuweisen, den der rechte Operand hat. So wie bei den Variablen.

let x = 3;

Nach dieser Anweisung hat unsere Variable also "x" den Wert "3". Angenommen, wir möchten den Wert der Variable "x" um "2" erhöhen und direkt in der Variable x speichern. Dazu ergänzen wir unsere erste Anweisung einfach um eine weitere, in der wir sagen "x" soll jetzt "x+2" sein.

let x = x+2;

Jetzt hat "x" den Wert von "5"

console.log(x);

Für die einfachen Operatoren, also Addition, Subtraktion, Multiplikation, Division und Modulo Rechnung bietet sich eine Kurzschreibweise an.

let x = 3;
x += 2; // 5
x -= 2; // 1
x *= 2; // 6
x /= 2; // 1.5
x %= 2; // 1

Operatoren für Zeichenketten

Um Zeichenketten aneinanderzufügen, gehen wir wieder zurück zum Auto.

Jetzt erstellen wir eine Anzeige für das Auto, um es zu Inserieren, damit es einen neuen Besitzer bekommt. Dazu verwenden wir fertige Texte, die wir in Variablen gespeichert haben und die Daten vom Fahrzeug selber, die wir ja im Objekt zusammengefasst haben. Um Zeichenketten zusammenzufügen, verwenden wir in JavaScript den Operator "+", der als Pluszeichen bekannt ist. Um aus mehreren Zeichenketten eine Anzeige zu schreiben, verwenden wir mehrere Variablen, indem wir einzelne Textbausteine abspeichern.

let verkaufe = 'Ich verkaufe meinen';
let baujahr = 'aus dem Baujahr';
let farbe = 'in der Farbe';

Als Nächstes werden wir eine Variable erstellen, die alle Textbausteine und Objektmethoden beinhaltet.

let anzeige = verkaufe + auto1.marke + auto1.typ + baujahr + auto1.baujahr + farbe + auto1.farbe;

Die Werte der einzelnen Variablen und die Werte vom Objekt "auto1" werden aneinandergehangen ausgegeben, dadurch fehlen aber auch die Leerzeichen, die wir für einen vernünftigen Satzbau benötigen.

Entweder verlängern wir die einzelnen Strings um ein Leerzeichen oder wir bauen zusätzliche Strings mit einem Leerzeichen in die Variable anzeige mit ein. Leerzeichen werden wie normale Strings erstellt, nur dass sie eben ein Leerzeichen enthalten, welches ausgegeben wird.

let verkaufe = 'Ich verkaufe meinen ';
let baujahr = ' aus dem Baujahr ';
let farbe = ' in der Farbe ';

let anzeige = verkaufe + auto1.marke + " " + auto1.typ + baujahr + auto1.baujahr + farbe + auto1.farbe;

Man könnte allerdings auch mit dem Zuweisungsoperator "+=" arbeiten und das Leerzeichen an die jeweiligen Variablen anfügen.

verkaufe += ' ';
auto1.marke += ' ';
auto1.typ += ' ';
baujahr += ' ';
auto1.baujahr += ' ';
farbe += ' ';

Alle Varianten liefern das gewünschte Ergebnis.

Damit haben wir von JavaScript eine Anzeige schreiben lassen, die wir mit wenig Aufwand erweitern, verändern oder sonst irgendwie bearbeiten können.

Vergleichsoperatoren

Es wird in der Praxis häufig vorkommen, dass 2 Werte miteinander verglichen werden müssen, um entsprechende Aktionen ausführen zu können.

Wir können Zeichenketten, Zahlen und boolesche Werte miteinander vergleichen. Als Erstes erstellen wir wieder eine Variable.

let y = 5;

Das doppelte Gleichheitszeichen == Prüft ob 2 Werte gleich sind.

console.log(y == 5);

Die Konsole gibt als Wert "true" zurück, denn "5" ist gleich "5". Das Gegenteil von gleich ist ungleich. Ungleich wird mit dem Ausrufezeichen vor dem einfachen Gleichheitszeichen geschrieben.

console.log(y != 5);

Nun bekommen wir den Wert "false" ausgeliefert weil "5" nicht ungleich "5" ist. Dazu gibt es noch das strikte gleich, es wird mit drei Gleichheitszeichen geschrieben "===" und prüft nicht nur, ob der Wert der gleiche ist, sondern auch, ob der Datentyp der gleiche ist.

console.log(y === 5);

In unserem Fall stimmen Wert und Datentyp überein und wir erhalten "true" von der Konsole zurück. Anders sieht es aus, wenn wir die "5" in einen String schreiben.

console.log(y === '5');

Nun hat der Operand zwar den gleichen Wert, aber nicht den gleichen Datentyp. Das Gegenteil zu striktes gleich ist demnach das strikte ungleich, hierbei werden auch wieder der Wert und der Datentyp verglichen. Wenn hier der Wert oder der Datentyp ungleich sind, dann erhalten wir ein "true" von der Konsole.

console.log(y !== 5); // false
console.log(y !== '5'); // true

Die Werte können aber auch in ihrer Größe verglichen werden. Mit dem kleiner-als Zeichen (<) vergleichen wir, ob der Wert auf der linken Seite vom Pfeil kleiner ist als der Wert auf der rechten Seite des Pfeils.

console.log(y < 8);

In diesem Fall bekommen wir "true" zurück weil "5" kleiner ist als "8".

console.log(y < 5);

Die Konsole gibt "false" aus weil "5" nicht kleiner ist als "5". Das Ganze können wir natürlich drehen und prüfen, ob der Wert links vom Pfeil größer ist als der Wert auf der rechten Seite, indem wir anstelle, des kleiner-als <, ein größer-als > einsetzen.

console.log(y > 8);

Jetzt gibt die Konsole ein "false" aus. Den Größenvergleich können wir aber noch etwas präzisieren, indem wir Prüfen, ob ein Wert kleiner als oder gleich ist <=

console.log(y <= 8);

Die Konsole gibt "true" aus. Wenn wir jetzt wieder mit der "5" vergleichen, bekommen wir an dieser Stelle ein "true" zurück.

console.log(y <= 5);

Indem wir die Pfeile drehen, können wir auch prüfen, ob ein Wert größer oder gleich ist.

console.log(y >= 5);

Logische Operatoren

In JavaScript gibt es 3 logische Operatoren.

Um diese zu verstehen, gehen wir auf einen Vergnügungspark. Auf diesem Vergnügungspark gibt es eine Achterbahn, für die alle mitfahrenden Personen mindestens "12 Jahre" alt und "150 cm" groß sein müssen. Um die Werte miteinander zu vergleichen, verwenden wir den logischen Operator "UND" ("&&"). Zuerst erstellen wir Variablen mit dem Mindestalter und der Mindestgröße und auch noch für das Alter und der Größe des Fahrgastes.

let min_alter = 12;
let min_groesse = 150;
let fahrgast_alter = 12;
let fahrgast_groesse = 160;

Die Variablenwerte lassen wir durch den UND-Operator vergleichen und bekommen von der Konsole einen booleschen Wert zurück. "true", wenn die Bedingungen erfüllt sind und "false", wenn die Bedingungen nicht erfüllt sind.

console.log(fahrgast_alter >= min_alter && fahrgast_groesse >= min_groesse);

Nur wenn bei beiden vergleichen, der Wert "true" rauskommt, ist das Gesamtergebnis auch "true". Wenn unser Fahrgast allerdings nur "140 cm" groß ist, dann erhalten wir den Wert "false".

Angenommen, die Regeln für diese Achterbahn werden etwas gelockert und jetzt reicht es aus entweder "12 Jahre" alt zu sein, oder "150 cm" groß zu sein. Dann verwenden wir den "ODER-Operator" ("||")

console.log(fahrgast_alter >= min_alter || fahrgast_groesse >= min_groesse);

Die senkrechten Striche können wir mit der Tastenkombination Alt Gr, und der Taste für > sowie < (links neben dem Y) erzeugen. Durch den ODER Operator reicht es aus, wenn ein Vergleich den Wert "true" hat, um als Gesamtergebnis "true" auszuliefern.

Als letzten logischen Operator gibt es noch die Negation. Die Negation wird verwendet, um zu prüfen, ob ein Ausdruck unwahr ist. Im Beispiel kochen wir ein einfaches Hühnerei. Dieses Ei möchten wir entweder weichgekocht oder hartgekocht essen, aber nicht solange es noch Roh ist.

let ei = 'weich';
console.log(ei != 'roh'); // true

Mit der Negation fragen wir, ob die Variable "ei" nicht roh ist, hier bekommen wir den Wert "true" zurück, weil der Wert unwahr ist. Nur wenn der Wert gleich ist, erhalten wir in der Negation "false".

let ei = 'roh';
console.log(ei != 'roh'); // false